07_CSS 레이아웃

레이아웃(layout)

사전적 의미 : 배치, 정리
기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미.

화면 배치 방법(형식) : display 속성

요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

• block : 화면을 수직 분할(행을 나눔)
  + width / height 속성 사용 O
• inline : 화면을 수평 분할(하나의 행의 컬럼을 나눔 == 글자처럼 생각하면 됨)
  + width / height 속성 사용 X
• inline-block : inline의 수평 분할 + block의 크기 조정
• none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태
• flex : 요소의 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 형식

display : none
요소는 존재하지만 화면에는 보이지 않음(투명X)

visibility : hidden;
요소가 투명한 색으로 변함 (투명O)

---

요소의 영역(여백) 관련 속성

HTML 요소는 총 4가지 영역으로 구성되어있다.

1. content 영역
   - 요소의 내용이 작성 되어지는 영역
   (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)

width/height 속성은
기본적으로 content 영역의 크기를 지정하는 속성

2. padding 영역
   -content 영역과 border 영역 사이

3. border 영역
   - 요소의 테두리가 지정되는 영역
   - content보다 바깥쪽에서 content를 감싸고 있음

border 선 종류
solid(실선), dashed(절취선), dotted(점선), double(?)

4. margin 영억
   - 다른 요소와의 간격을 나타내는 영역

좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬
margin: auto;

padding, margin

값 1개 : 상하좌우
값 2개 : 상하, 좌우
값 3개 : 상, 좌우, 하 (위 -> 아래)
값 4개 : 상, 우, 하, 좌 (상 기준 시계 방향)

---

content-box와 border-box의 차이

content-box (기본값)

• width / height 속성 지정 시 content 영역만 적용

border-box

• width / height 속성 지정 시
  content + padding + border 의 크기를 합산한 결과가
  지정한 속성값과 같게 자동으로 비율 계산하여 적용