[HTML/CSS] 블로그 글목록 만들기

💡 실습 포인트!

• 수업의 목적이 HTML/CSS 를 이용한 간단한 배치 및 디자인이어서 그냥 샘플이미지와 내용을 넣었다..ㅎㅎ

---

💜 Float 속성

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div style="clear: both"></div> /* 빈 div 박스에 clear 속성을 추가하는 방법 */
</div>

 

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

• 위와 같이 코드를 작성하면 박스들을 왼쪽 정렬할 수 있음
• float 속성은 요소를 뜨게 하므로 다음에 오는 HTML 요소들이 원하는대로 자리를 찾지 못할 수 있으므로 clear 속성을 사용하여 제자리를 찾게 해주어야 함
• float: none 을 추가해주는 것도 버그 발생을 줄일 수 있는 방법!
• float 속성으로 가로 정렬할 때는 float 박스를 감싸는 큰 div 박스를 만들고 폭을 지정해주어야 모바일에서 흘러넘치지 않음