CSS 필수 요소( Box Model, Styling w&h, Pseudo Classes & Elements, The 'display' Property)

The Box Model - margin, border, padding, content

Styling Width & Height

- px or % (or other units)

- % refers to container

- width and height

- box-sizing can be content-box(default) or border-box

 

Pseudo Classes & Elements

:hover

:active

:first-of-type

 

::after

::first-letter

 

The "display" Property

- control behavior(block vs inline) of elements

- Mix behavior via inline-block

- Remove elements via none

 

참고하기

• CSS 박스 모델: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
• box-sizing 박스 크기 조정: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
• 높이 및 너비 더 알아보기: https://www.w3schools.com/css/css_dimension.asp
• display  디스플레이 프로퍼티: https://developer.mozilla.org/en-US/docs/Web/CSS/display
• 의사 클래스 MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• 의사 요소 더 알아보기: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements