레이아웃
사전적 의미 : 배치, 정리
기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는것
화면 배치 방법(형식) :display 속성
: 요소가 화면에 어떻게 보여질 지 형식을 지정하는 속성
- block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능
- inline : 화면을 수평 분할 + width / height 속성 사용 불가능
- inline-block : inline의 수평분할 + block 크기 조정
- none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태
- flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 형식화면 (영역) 분할
- 상하 2분할
준비물
1) 감싸는 영역 요소
2) 내부에 영역을 분할할 요소
3) display: block
4) 크기 단위(고정(px)) / 가변(%)
- 좌우 2분할
1) 감싸는 영역 요소
2) 내부 분할 요소
3) 크기 단위
4) display : inline-block (약간 문제점 있음)
요소의 영역(여백) 관련 속성
: HTML 요소는 총 4가지의 영역으로 구성되어 있다.
1. content 영역
- 요소의 내용이 작성되는 영역
(시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)
2. padding 영역
- content 영역과 border 영역 사이
3. border 영역
- 요소의 테두리가 지정되는 영역
- content보다 바깥쪽에서 content를 감싸고 있음
4. margin 영역
- 다른 요소와의 간격을 나타내는 영역padding, border, margin의 방향성
: padding, border, margin은 방향에 따라 크기를 지정할 수 있다.
000-top
000-bottom
000-left
000-right
(000에는 paddinG, border, margin 선택해서 작성)box-sizeing 속성
: 요소의 영역 중 실제로 화면상에 보여지는 부분인 content, padding, border는 각각 크기를 지정할 수 있음
-> 이 때, 각각 크기를 따로 지정하다 보니 전체적인 크기를 한눈에 파악하고 설정하기 힘들다
배치 관련 스타일(position)
position은 요소의 위치를 지정하는 속성
position : relative; (상대적인)
- 지정된 요소 내부에 다른 요소가
상대적인 위치를 지정할 수 있도록
기준이 되게 만드는 속성.
- 내부에 작성되는 요소에 위치 지정 시
top, bottom, left, right 속성을 사용할 수 있음.
position : absolute; (절대적인)
- 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함.
position : fixed; (고정된)
- 항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)