박스 모델  - 실제 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성됨  - 확인 : [F12] - [개발자 도구] 박스 모델 너비 기준 설정선택자 { box-sizing : content-box | border-box ; }  - content-box (기본값)      : width 속성 값을 콘텐츠 영역 너비 값으로 사용함  - border-box      : width 속성 값을 (콘텐츠 영역 + 패딩 + 테두리)의 너비 값으로 사용함 너비 (width) & 높이 (height)선택자 { width : 너비px | 백분율 | auto ; height : 높이px | 백분율 | auto ;}  - min-width : 100%  → 너비를 화면에 꽉 차게 함  - min-height..

사용자 동작에 반응하는 가상 클래스#  마우스 커서를 올려 놓을 때선택자:hover { 스타일속성 : 속성값 ; }#  마우스로 클릭할 때선택자:active { 스타일속성 : 속성값 ; }#  초점이 맞춰졌을 때 (Tab 키)선택자:focus { 스타일속성 : 속성값 ; }#  방문하지 않은 링크일 때선택자:link { 스타일속성 : 속성값 ; }#  방문한 링크일 때선택자:visited { 스타일속성 : 속성값 ; }  UI 요소 상태에 따른 가상 클래스#  요소를 사용할 수 있을 때선택자:enabled { 스타일속성 : 속성값 ; }#  요소를 사용할 수 없을 때선택자:disabled { 스타일속성 : 속성값 ; }# 라디오 버튼 or 체크 박스에서 항목을 선택했을 때선택자:checked { 스타일속..

기본 선택자#  전체 선택자  - 페이지에 있는 모든 요소를 대상으로 스타일을 적용함  - 브라우저마다 패딩과 마진의 기본값이 다름 → 전체 선택자를 사용하여 0으로 리셋할 수 있음* { 스타일속성 : 속성값 ; }#  태그 선택자  - 문서에서 해당 태그를 사용한 모든 요소를 대상으로 스타일을 적용함태그 { 스타일속성 : 속성값 ; }#  클래스 선택자  - .과 class가 대응됨 #  id 선택자  - #과 id가 대응됨 # 그룹 선택자  - 같은 스타일을 사용하는 선택자들을 한 번에 정의함선택자1, 선택자2, ... { 스타일속성 : 속성값 ; } 연결 선택자 (조합 선택자)#  하위 선택자  - 상위 요소에 포함된 모든 하위 요소에 스타일이 적용됨상위요소 하..

CSS (Cascading Style Sheet) ...  - 브라우저에게 웹 사이트가 어떻게 보여져야 하는지 알려주는 언어  - Style sheet : 스타일을 관리하기 쉽도록 한 군데에 모아놓은 것  - HTML에 종속적임 (독립적으로 쓰일 수 없음)  - 선택자 : 스타일 규칙이 적용될 대상  - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 상속함 스타일의 우선순위  - 인라인 스타일 → id 스타일 → class 스타일 → 태그 스타일  - 우선순위가 같다면 나중에 입력된 스타일이 앞 스타일을 덮어씀#  중요 스타일 !important  - 우선순위가 동일한 스타일이 있을 때, 중요 스타일로 지정된 것이 가장 우선적으로 실행됨 내부 스타일 시트#  인라인 스타일  - 스타일..