CSS 특강 1부

목차

1. CSS 개념을 시작하며...
2. inital value
3. inherit(상속)
4. Cascading의 의미
5. 정리

1. CSS 개념을 시작하며...

1. 웹사이트 제작의 관례:

   • header + contents + footer로 나누어 구성할 것
   • 시작할 때, 최소한의 마크업만 가지고 시작하는 것이 중요
   
   

2. 프로그래밍 관련 언어는 영어로 알고 있는 것이 유용하다!

   • 선택자 === 타입 셀릭터
   • 속성 === 프로퍼티
   • 속성값 === value
   • 초기값 === inital value
   • 전체 선택자 === Universal Selector(*)
   
   

2. inital Value

브라우저에서 width의 값은 이미 auto로 구성되어 있다. 여기서 auto는 브라우저가 제공하는 기본값 또는 초기값(default or inital value)를 의미한다.
ex) width : auto; / background-color : transparent / margin : 0

1. width : auto; : 직계부모(parent)가 제공하는 containg block의 크기 만큼 (100%) 부여

   단, width : auto; 와 width : 100%는 차이가 있다.
   width: auto;는 여러 변화를 줄 수 없지만, width : 100%는 다양한 변화를 줄 수 있다.

2. margin : auto; : 흔히, block요소를 가운데 정렬하는 속성이라 생각하지만, 이는 block이 차지하는 공간을 제외한, 사용가능한 공간을 나눠서 가운데로 정렬한 것이다.

   단, margin의 inital value는 0이다. 따라서, reset.css를 쓰지않을때, margin: 0;을 줘야 초기설정이 가능하다.

3. height : auto; : 컨텐츠 영역의 높이만큼 높이를 조절하는 속성, 흔히 높이를 정하기 애매할때 기본값으로 설정하고 가는 편이다.

4. color : currentColor; : 바로 앞에서 사용한 색상을 사용

3. inherit(상속)

상속은 말그대로, 부모요소의 속성을 자식요소가 그대로 물려받는 것을 의미하기도 하지만, 사실, 상속이 지원되는 프로퍼티가 이미 존재하기에 부모요소가 자식요소에 영향을 주는 것이 전부 상속인 것이 아니다.

ex) height나 width는 기본적으로 상속이 되지 않는 프로퍼티이다. 이를 상속받기 위해서는 자식요소의 속성값에 inheritance를 줘야한다.

4. Cascading Style Sheet

CSS의 어원이며, cascade는 '흐르다'라는 뜻이 있다. 즉, CSS자체가 위에서 아래로 흘러가며 최종적인 결과물을 도출하는 시스템이라는 것을 의미한다.

1. 셀릭터를 보고, 얼마나 구체적으로 작성되어 있는지에 따라서, 우선 순위가 결정이 된다. : 브라우저는 더 구체적인 정보를 더 가치있다고 생각하기 때문이다.

2. specity(특이성): 합계가 높을수록 우선순위가 높아짐 -> 특성에 따른 점수로 우선순위를 정하는 CSS만의 특징

3. fullname 문법: 가장 높은 우선순위를 가짐 ex). h1.class.class : 붙여씀

5. 정리

CSS는 후자우선원칙을 가지며 구체적인 정보를 더 우선시하는 고유의 특성 때문에 셀릭터나 클래스와 같은 요소들의 조합을 세심하게 생각하고 공부해나가야 한다.
또한, 브라우저를 제작하는데 있어, 처음부터 세세한 부분까지 도입하는 것이 아니라, 전반적인 틀을 잡아놓고 순차적으로 작업하는 것이 가장 효과적이다.
그리고 평소에 다양한 프로퍼티들의 inital value들을 찾아보고 정리하는 습관을 들이는 것이 CSS학습에 효과적일 것이다.