위코드 2일차 layout에 대해 공부하면서 float 속성에 대해서 공부한 것들을 정리합니다.
1. float
1-1) float 속성?
float는 레이아웃 설계하는 과정에서 많이 사용하는 속성으로 특정 요소를 자연스럽게 흐르도록 합니다. 즉 공간은 차지하지만 다른 엘리멘트들의 배치에 영향을 안주는 엘리먼트가 되는 것 입니다.
1-1-1) float 속성이 없을 때
index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>float</title> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="main-box"> <div class="img">이미지</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut consectetur dicta dolorum earum e!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ducimus excepturi modi nostrum tempore? Aspernatur, et in libero</p> </div> </body> </html>
style.css* { box-sizing : border-box; margin : 0; padding : 3px; } .main-box { border : 3px solid black; width : 500px; } .img { width: 200px; height: 100px; border: 1px solid red; }
1-1-2) float 속성이 있을 때
style.css* { box-sizing : border-box; margin : 0; padding : 3px; } .main-box { border : 3px solid black; width : 500px; } .img { width: 200px; height: 100px; border: 1px solid red; float: left; }
.img 클래스에 float:left 속성을 추가하였습니다. 명백한 차이가 확인되시나요??
만약 float:right를 했을 경우에도 위치만 다를 뿐 결과는 같습니다.
위와 같이 left와 right를 사용하여 양쪽에도 배치할 수 있습니다.
2. clear
2-1) clear 속성?
clear속성은 float속성을 통해 태그를 자연스럽게 흐르도록한 뒤 이후 흐름을 제거하기 위해 쓰입니다.
말로 하는 설명보다는 직접 보는게 더 빠르겠죠?!
2-1-1) 속성 종류
- left : 좌측 제거
- right : 우측 제거
- both : 양쪽 제거
2-2) clear 사용
index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>float</title> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="main-box"> <div class="img">이미지</div> <p class="firstP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut consectetur dicta dolorum earum e!</p> <p class="lastP">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At ducimus excepturi modi nostrum tempore? Aspernatur, et in libero</p> </div> </body> </html>
style.css* { box-sizing : border-box; margin : 0; padding : 3px; } .main-box { border : 3px solid black; width : 500px; } .img { width : 200px; height : 100px; border : 1px solid red; float : left; } .firstP { background-color: cadetblue; opacity : 0.5; } .lastP { color: red; background-color : greenyellow; opacity : 0.5; }
위의 그림에서 cadetblue?색이 아닌 greenyellow색인 p태그 부분부터는 float:left를 제거하고 싶다면? 어떻게 해야 할까요??
.lastP 클래스에 clear:left옵션을 추가해주면 됩니다.
.lastP {
color: red;
background-color : greenyellow;
opacity : 0.5;
clear:left;
}
left는 제거가 되었는데 right는 그대로 적용이 되고 있습니다.
만약 아래와 같은 상황이라면 어떻게 해야할까요??
.lastP {
color: red;
background-color : greenyellow;
opacity : 0.5;
clear : both;
}clear:both 속성을 사용해서 양쪽 다 float을 제거해주면 됩니다!
