[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #6. 박스모델
박스모델 : HTML의 모든 요소는 사각형의 박스형태로 만들어지며, 이 박스는 4가지(content, padding, border, margin)로 세분화된다. 이 4가지 영역을 통틀어서 박스모델이라고 한다. 사용 예시 1. Content : 요소의 실제 내용을 포함하는 영역 2. Border : content 영역을 감싸는 테두리 1) border-width : 선의 굵기 지정 -> thin / medium / thick or 숫자+px, em, rem ✔ 기본값 = medium 2) border-style : 선의 모양 지정 -> solid(실선), double(이중실선), dotted(점선), hidden, dashed, groove, inset, outset 등 ✔ 기본값 = none(=borde..
2022. 4. 12.
[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #4. 가상 선택자 구체성, 상속
1. 구체성 : 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로 어떤 규칙을 우선적으로 적용시킬지를 결정하는 규칙이다. 구체성의 값이 클수록 우선적으로 적용이 되며(단 예외 있음! 인라인 우선, !important 우선), 구체성은 아래와 같이 4개의 값으로 이루어진다. [구체성 보는 법 예시] => h1 { } -> 0,0,0,1 => body h1 {} -> 0,0,0,2 => .grape {} -> 0,0,1,0 => p.bright em.dark {} -> 0,0,2,2 => #page -> 0,1,0,0 ✔이 예시에서 두번째로 구체성이 높음 => div#page -> 0,1,0,1 ✔이 예시에서 가장 구체성이 높음 [특징] - 구체성이 높은 것이 우선적으로 적용됨 - 조합자(>, + 등)..
2022. 4. 6.
