레이아웃 만들기 1 : 호환성 좋은 float

 

 

 

 

html css로 사이트 레이아웃 만드는 법 :

만들고 싶은 레이아웃 디자인 위에 네모박스를 먼저 그려보고 바깥 네모부터 <div> 써서 구현하면 됩니다.

어려워보이는 레이아웃도 네모박스부터 그 위에 그려보고

바깥 네모부분부터 <div>로 하나하나 만들기 시작하면

그럼 무슨 레이아웃을 가져다주든 알아서 만들 수 있음

 

 

 

▲ 예를 들어 당근마켓 상품하나 레이아웃을 구현하고 싶으면

네모박스처럼 보이는걸 전부 네모로 표시해보고

바깥 네모 부터 하나하나 <div>로 구현하라는 것임

물론 문자는 <p> 이미지는 <img> 이런거 쓰는게 좋겠죠

그리고 그러려면 박스를 정렬하고 배치하는 법도 알아야합니다.

오늘 배울 것임

 

 

 

 

 

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

 

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

.left-box {
  width : 100px; 
  height : 100px;
  float : left;
}
.right-box {
  width : 100px; 
  height : 100px;
  float : left;
}

- 위의 코드는 박스 두개를 만들어 각각 왼쪽으로 정렬시킵니다.

- 하지만 float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML 요소들이 제자리를 찾지 못합니다. 

(참고) float 속성으로 가로정렬할 땐

영상처럼 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는게 좋습니다.

그래야 모바일에서 안 흘러넘침

 

 

 

 

 

float를 쓰고 나면 항상 clear 속성이 필요합니다.

 

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

.footer {
  clear : both
}

clear 속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게 됩니다.

float썼으면 까먹지 말고 항상 넣으시면 됩니다.

안넣으시면 내 의도와는 다른 레이아웃이 반겨줄 것입니다. 

참고로 float : none 이것도 추가해주는게 나중에 생길 버그예방차원에서도 좋을 수 있습니다. 

 

 

 

 

 

상대적인 크기 단위인 퍼센트 단위 

 

.box {
  width : 80%
}

이 경우 내 부모 태그의 width에 비해 80% 만큼 차지하게 됩니다.

부모태그는 나를 감싸고 있는 태그를 뜻합니다.