[작성일: 2023. 02. 13]
Layout
- 요소(Element, 버튼 등 웹을 구성하는 모든 것) 들을 화면에 배치하는 것
- 기본적으로는 위에서부터 아래로 배치함.
- 웹은 다양한 표현이 가능해야 하므로 속성을 통해 다양한 배치 구현
주요 속성
display block, inline
position static, relative, absolute, fixed
float left, right
display 속성
block
- 벽돌을 쌓듯이 쌓음.
- div, header, h1~h6, canvas, section, article, ol, ul
- width와 height 값을 지정할 수 있음.
inline
- 한 줄을 다 차지하지 않고 우측으로, 아래쪽으로 빈 자리를 차지하며 흐름.
- span, br, button, map, strong, textarea, img
- width와 height 지정 할 수는 있음.
flex
- block 속성의 태그들을 여러 형태로 배치해주는 스타일
- block 속성의 태그를 가로로 배치함.
Position 속성
static(기본)
- 나오는 순서대로 배치함.
absolute
- top, left, right, bottom
- 상위 엘리먼트(부모)의 기준으로 위치를 지정함.
relative
- top, left, right, bottom
- 내 위치를 기준으로 위치를 지정함.
fixed
- 전체 화면(Viewport) 기준으로 위치를 지정함.
Margin, Padding
- top, right, bottom, left의 속성을 가짐
- Padding에 따라 엘리먼트의 크기가 조정되나, box-sizing이라는 속상을 border-box로 설정하면 엘리먼트 크기 고정됨.
Margin 다른 엘리먼트와 나와의 간격
Padding 내 소속 엘리먼트와 가장 자리와의 간격
Webfonts
- 폰트를 내 PC나 웹서버에 저장하지 않고 링크로 불러와서 사용하는 방법
- Google Font가 가장 유명함.
- <link>와 css 적용사례를 copy하여 내 소스에서 붙여넣으면 사용할 수 있음.
🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.