레이아웃

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

display

• 화면 배치(표시) 방법
• 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

block

• 화면을 수직 분할(행을 나눔, 한 줄 다 차지)
• width, height 지정 가능

inline

• 화면을 수평 분할(하나의 행의 열을 나눔 == 글자, 문자열 생각)
• width, height 지정 불가능

inline-block

• inline의 수평 분할 + block의 width, height 지정
• 가로로 배치되면서 크기 지정

none

• 요소는 존재하나 화면에는 보이지 않게 함

flex

• 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 방식

grid

• 격자무늬 형식으로 화면을 쉽게 분할하는 형식

요소의 영역(여백) 관련 스타일

• HTML 요소는 총 4가지의 영역으로 구성되어 있다
• padding, border, margin 크기를 한 번에 지정하려면
  속성 값 1개 : (상하좌우) 지정
  속성 값 2개 : (상하) (좌우) 지정
  속성 값 3개 : (상) (좌우) (하) 지정 (위->아래)
  속성 값 4개 : (상) (우) (하) (좌) 지정 (상 기준 시계방향)

content

• 요소의 내용이 작성 되어지는 영역

padding

• content와 border 사이의 공간
• 상하좌우 크기 지정 가능

border

• 요소의 테두리가 지정되는 영역
• content 보다 바깥쪽에서 content를 감싸고 있다
• border-width로 상하좌우 크기 지정 가능
• border의 속성 값은 [크기 모양 색상] 형식으로 작성

margin

• 다른 요소와의 간격을 나타내는 영역
• 상하좌우 크기 지정 가능

margin : auto;

• 다른 요소와의 간격을 자동으로 지정(가운데 정렬)
• 기본적으로 좌우 간격만 지정됨
• 지정되는 대상은 block 형식 요소여야 된다 (inline 형식은 text-align : center; 사용)

.content{
  width: 150px;
  height: 150px;
  box-sizing: content-box;
}
.border{
  border: 10px solid black;
}
.padding{
  padding: 20px;
}
.margin{
  margin: 50px;
}
#test2{
  display: inline-block;

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;

  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 100px;
  margin-right: 100px;

  border-top: 5px solid red;
  border-bottom: 10px double black;
  border-left: 15px dotted yellow;
  border-right: 20px dashed purple;
}
#test3{
  border: 1px solid black;

  padding: 30px;
  padding: 30px 50px;
  padding: 30px 50px 10px;
  padding: 30px 20px 40px 50px;

  border-width: 3px;
  border-width: 3px 10px;
  border-width: 3px 5px 10px;
  border-width: 3px 5px 10px 20px;

  margin: 30px;
  margin: 30px 50px;
  margin: 30px 50px 10px;
  margin: 30px 20px 40px 50px;
}
#test4{
  margin: auto;
  margin-top: 100px;
}

box-sizing

• width/height 크기 조정 속성의 범위를 지정하는 css 속성

content-box

• width/height 지정 시 content 영역의 크기만 조정(기본값)

border-box

• width/height 지정 시 content + padding + border의 크기를 합산한 결과가 작성된 width/height와 같아지도록 content 영역의 크기를 자동으로 조정

.border-box{
  box-sizing: border-box;
}

요소 정렬 스타일

float

• 요소를 띄워서 좌/우로 정렬하는 속성

clear

• float로 인해 띄워져 있는 상태를 해제하는 속성
• float 사용 시 요소가 겹치는 문제를 clear로 해결

배치 관련 스타일

position : relative

• 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성
• 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음

position : absolute

• 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함

position : fixed

• 항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)

position : sticky

• 원래 요소가 보여지는 영역이라면 position X
• 요소가 보여지는 화면을 벗어나면 fixed

z-index : 정수

• position : absolute 상태의 요소의 z축 방향으로 올라와 있는 정도를 지정하는 속성 (같은 기준 요소(relative)를 가진 요소만 설정 가능)