1. CSS의 등장
- 중복 제거, 코드의 효율성
- 가독성 굿
- HTML이 웹의 정보만을 담을 수 있음
2. CSS의 기본 문법
- style 태그: 누구에게 해당 효과를 적용할지 명시해야 함. a { } 가 그러한 역할을 하고, 이를 선택자라고 부름. 하나의 선택자에 대해서 여러 개의 효과를 지정할 수 있는데, 이를 구분하기 위해 세미콜론으로 구분함.
- style 속성: HTML의 속성으로, 그 값으로 반드시 css의 효과가 들어옴.
3. CSS의 기본 구성
- 선택자(selector)
- 선언/효과(declaration)
- 속성(property), 속성의 값(value)
4. CSS의 속성을 스스로 알아내기
- css (기능) property 등의 검색어로 직접 찾아가며 코드를 구현할 수 있음
5. CSS 선택자의 기본
- 상황: 모든 페이지는 기본적으로 검정색, 사용자가 방문한 적 있었던 페이지는 회색으로, 현재 머물고 있는 페이지는 빨간색으로 표시하고 싶음.
- class 속성의 값은 여러 개가 들어올 수 있고 띄쓰로 구분함
- 하나의 태그에는 여러 개의 속성이 들어올 수 있고 , 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있음
- 사진 속 코드의 한계: class 선택자 saw와 active 순서 바꾸면 머물고 있는 페이지 빨간색이 구현안됨
>> id 선택자 사용!!
- 선택자의 종류와 우선순위
id 선택자(#) > class 선택자(.) > 태그 선택자
- 같은 종류의 선택자라면 가장 마지막에 등장하는 선택자가 우선순위 가장 높음.
- id 선택자(고유함, 따라서 우선순위 높음), 태그 선택자(포괄적, 따라서 우선순위 낮음), 그 중간이 class 선택자
6. 박스모델 : 페이지 내 문자들이 페이지에서 실질적으로 차지하고 있는 부피
- block level element와 inline element는 display 속성의 기본값일 뿐, 언제든 css를 통해 바꿀 수 있음
display: none;
/* 태그 화면에서 안보이도록 함 */
7. 박스모델 써먹기
- 상황(1): 위 그림과 같이 타이틀 밑줄을 긋고 싶음
>> h1 태그에게 테두리를 주면됨!!
- 상황(2): 챕터7 맨 위의 그림과 같이 부제목과 내용을 분리하는 선을 긋고싶음
>> ol 태그에게 테두리를 주자!!
