[카카오테크캠퍼스 3주차] CSS 개요: 선언 방식

⏳ 2023. 4. 24. - 2023. 4. 30.

 

1. 기본 문법

선택자 : { 속성: 값; 속성: 값; }

      

      

      

    
    

      <css />
    
div {
  color: red;
  font-size: 100px;
}
/* 주석은 이렇게 */

---

2. 선언 방식

2.1. 내장

html의 head 태그 안에 style 태그를 사용하여 스타일을 적용하는 방법

      

      

      

    
    

      <css />
    
<style>
  div {
    color: red;
    margin: 20px;
  }
</style>

하나의 html 파일 안에서 스타일을 관리할 수 있지만.. 유지 보수 측면에서 불리하다.

html과 css 파일을 구분하는 것이 권장하는 방법!!

2.2. 인라인

html의 요소에 직접 스타일을 작성하는 방법

      

      

      

    
    

      <css />
    
<div style="color: red; margin: 20px"></div>

인라인 방식은 스타일의 우선 순위가 너무 높기 때문에 유지 보수가 어렵다.

2.3. 링크

link 태그를 사용하여 css 문서를 연결하는 방법(병렬)

      

      

      

    
    

      <css />
    
<link rel="stylesheet" href="./css/main.css" />

가장 권장하는 방법!

2.4. @import

css 문서 안에서, 또 다른 css 문서를 가져오는 방법(직렬)

      

      

      

    
    

      <css />
    
/* main.css */
@import url("./box.css");

div {
  color: red;
  font-size: 100px;
}

      

      

      

    
    

      <css />
    
/* box.css */
.box {
  background-color: blue;
  padding: 20px;
}

연결이 지연된다. → 장점이 될수도, 단점이 될수도!