TIL) HTML/CSS - 레이아웃 만들기

div를 이용한 네모박스 디자인

.box {
  margin : 20px; // 상하좌우 바깥 여백
  padding : 30px; // 상하좌우 안쪽 여백
  border : 1px solid black; // 테두리 두께, 선의 종류, 색상
  border-radius : 5px; // 테두리 둥글게
}

요소를 공중에 띄워 왼쪽/오른쪽 정렬하는 float 속성

모든 <div>는 display:block을 가지기 때문에 가로행 전부를 차지한다.

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"><div>
</div>

.left-box {
  width : 20%; 
  height : 400px;
  float : left;
}
.right-box {
  width : 80%; 
  height : 400px;
  float : left; // 이 요소를 띄워 왼쪽으로 붙이겠다.
}
.footer {
	clear : both;
}
.box {
	width: 80%;
}

float 속성을 쓰게 되면 공중에 붕 뜨기 때문에 float 다음에 오는 요소들이 보이지 않는다. 그럴 때엔 float 다음에 오는 요소에 clear:both를 입력해주면 float 때문에 발생하는 이상한 현상을 해결할 수 있다. 그래서 float를 쓰고 나면 항상clear 속성이 필요하다.
float:none도 추가해 주는 것이 나중에 생길 버그 예방차원에서도 좋다.

가로 정렬 display : inline-block

inline-block은 내 폭과 높이만큼 자리를 차지하는 것.
간편하다는 장점이 있지만, <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에 가로로 정렬하려면 태그 사이의 공백도 제거해야 한다는 단점1과 inline-block 박스 안에 글자를 쓰면 화면이 이상해지는 단점2가 있다.

단점1 - 공백 제거 방법
1. 박스 사이에 주석 기호 활용
2. 부모 태그에 font-size: 0px; 입력

단점2 - 박스 안에 글자입력 시 화면 오류 해결 방법
1. vertical-align: top(bottom); 입력 -> 상하정렬