CSS (2) 썸네일형 리스트형 CSS Layout - Box Model CSS layout: 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정 CSS Box Model 모든 HTML 요소를 사각형 박스로 표현하는 개념 > content, padding, border, margin으로 이루어짐 margin : 이 박스와 다른 요소 사이의 공백, 가장 바깥쪽 영역 border : 콘텐츠와 패팅을 감싸는 테두리 영역 padding : 콘텐츠 주위에 위치하는 공백 영역 contetnt : 콘텐츠가 표시되는 영역 box-sizing 속성 width와 height는 content를 기준으로 하기에 실제 박스 너비와는 차이가 있음 *{ box-sizing: content-box; } 이게 default인 컨텐츠 기준으로 박스 크기가 됨 *{ box-sizing: border-.. Cascade-명시도, 상속 CSS Cascading Style Sheet : 계단식 스타일 시트; 웹 페이지의 디자인과 레이아웃을 구성하는 언어 Specificity 결과적으로 요소에 적용할 CSS 선언을 결정하기 위한 알고리즘 CSS Selector에 가중치를 계산하여 어떤 스타일을 적용할지 결정 동일한 요소에 2개 이상의 CSS 규칙이 있는 경우(스타일이 겹치는 경우) 가장 높은 명시도를 가진 Selecor로 스타일이 적용됨 Cascade 명시도가 높은 순서 1. Importance !important 2. Inline 스타일 권장하지 않지만, 우선 순위는 높음 3. 선택자 id > class > 요소 4. 소스 코드 선언 순서 같은 태그의 CSS 규칙이면 마지막으로 선택 class 선택에 2개를 넣을 때는 순서가 필요없음 (.. 이전 1 다음
