이해도 자가 체크리스트
1장. CSS 기본
- CSS를 사용하는 목적을 이해합니다.
- CSS의 기본 구문과 구조를 이해합니다.
- CSS를 HTML에 적용하는 방법을 이해합니다.
- HTML 내에서 직접 CSS를 정의하는 것이 권장되지 않는 이유를 이해합니다.
- 텍스트는 CSS를 사용하여 스타일을 지정할 수 있습니다.
- CSS에서 사용되는 단위를 기억하고 각 단위가 적절한 시기를 구분할 수 있습니다.
- MDN이나 w3school과 같은 참조 사이트를 사용하여 CSS 속성을 검색하고 사용할 수 있습니다.
제 2 장. 박스 모델
- CSS 상자 모델을 이해할 수 있습니다.
- 상자를 구성하는 네 가지 요소를 식별하고 각각에 대해 설명합니다.
- 여백, 테두리, 패딩, 내용
- 상자 크기를 측정하는 두 가지 기준의 차이점을 이해할 수 있습니다.
3 장. CSS 선택기
- 다양한 CSS 선택자 규칙을 이해합니다.
- 하위 선택자와 하위 선택자의 차이점을 이해합니다.
- 필요한 경우 검색을 통해 필요한 선택자를 찾아 적용할 수 있습니다.
1. 브레인스토밍
– 웹 페이지 = 페이지 모음 = 많은 콘텐츠로 구성
– 콘텐츠가 힙에 나열되어 있는 경우 탐색 및 이해하기 어려움 = 구조화 및 구성 = HTML을 통해 구성 콘텐츠
– 구조를 보기 좋게 하기 위해 Attributes를 개발했고, 전용 CSS가 탄생했습니다.
'추천 관련글,
– HTML로 캡쳐한 구조 위에 CSS를 추가하여 구조의 디자인(색상, 위치 등) 추가
* 기억해야 할 개념(Things to remember)
– 상대 단위 / 절대 단위
– 박스 모델: margin, border, padding, contents
1) 상대/절대 단위
– 상대 단위: 컨텐츠가 종속된 상위 구조의 크기/비율이 변경되면 이에 영향을 받아 함께 변경됨(ex. rem, vw, vh)
– 절대 단위: 다른 구조의 변화에 영향을 받지 않고 고유한 값을 유지하는 단위(ex. px)
2) 박스 모델
– 콘텐츠가 차지하는 공간의 총량(직사각형 공간을 가지며 테두리로 내/외부가 구분됨)
– 구분선을 그어주지 않으면 보이지 않으나 컴퓨터는 입력 내용을 출력할 때 일정한 여백을 준다.
사각형 모양을 가지고 있기 때문에 BOX 모델이라고 합니다.
– 이 박스 컴포넌트의 크기/비율 및 베이스 속성을 조정하여 구조를 변경할 수 있습니다.