[WEB] Foodneko clone coding

Updated: May 19, 2021

HTML&CSS 복습을 위한 FOODNEKO 사이트 클론코딩

[CSS] “display” vs “position”

display

요소를 블록 형태로 나타낼 것인가 인라인 형태로 나타낼 것인가, 보이게 할 것인가 안 보이게 할 것인가 등을 결정하는 속성. 레이아웃 설계 시 flex 속성으로 편리하게 작업 할 수 있다. inline, inline-block, block, flex 등의 속성 값을 가진다.

position

요소를 어디에 배치 할 것인지 결정하는 속성. static, relative, absolute, fixed, sticky, unset, inherit, initial 등의 속성 값을 가진다.

[CSS] “border-box” vs “content-box”

둘 다 width 값을 500px로 주었을 경우 border-box의 박스크기는 테두리를 포함해서 500px가 된다. 이 때 테두리 두께가 콘텐츠 영역을 침범하기 때문에 콘텐츠 영역은 500px 보다 좁아진다. content-box는 콘텐츠 영역 500px을 가지게 되고 박스크기는 콘텐츠 영역에 테두리 두꼐가 더해져 500px 이상의 크기를 가지게 된다.