[온보딩트랙]CSS 구성(기본 구조)

 

 

 

CSS

 

Cascading Style Sheets

스타일과 레이아웃을 적용할 때 사용하는 스타일 시트 언어이다.

HTML로 몸(뼈대)를 만들었다면, CSS는 몸을 꾸며주는 역할을 한다.

 

Cascading은 '계단식', '폭포처럼 흐르다'의 의미인데,

상위(부모) 요소의 스타일 속성이 하위(자식) 요소에도 영향을 주는 모습이 폭포가 아래로 흐르는 것을 닮았기 때문이다.

 

HTML에서도 <style> 태그를 쓸 수 있지만 CSS와 분리한 이유는,

정보가 담긴 코드와 디자인만 해주는 코드들이 섞이면서

코드의 가독성과 문서 전체의 일관성이 떨어져 웹 페이지가 갖는 정보로써의 가치도 떨어지기 때문이다.

그래서 HTML이 정보 전달에만 전념하도록 스타일 기능을 CSS가 하는 것이다.

마크업과 스타일을 분리함으로써 코드의 가독성과 일관성을 높이고, 유지보수를 편리하게 할 수 있으며,

이는 곧 작업 시간 단축으로도 이어진다.

---

p {
    color: yellow;
}

 

p { color: yellow; }

 

중괄호 앞에 쓴 'p'의 명칭을 선택자(selector)라고 한다.

어떤 HTML 요소에 스타일을 적용할지 선택한다.

*(Universal Selector), 태그 선택자(Type Selector), 클래스 선택자(Class Selector) 등 여러 가지 셀렉터가 있다.

---

p { color: yellow; }

 

중괄호 안의 'color'의 명칭은 속성(property)이다.

스타일을 부여할 항목이다.

---

p { color: yellow; }

 

프로퍼티 옆 'yellow'의 명칭은 값(value)이고, 속성에 대한 값을 정한다.

---

p { color: yellow; }

 

중괄호 안 부분은 선언(declaration), 속성과 값을 합한 부분이고,

전체를 통틀어 규칙(rule), 선택자와 선언부의 조합이다.

 

이 부분은 처음 들어보는 내용이다!

---

/* p { color: yellow; } */

 

HTML과 마찬가지로 CSS도 주석을 쓸 수 있다.