CSS 9강 Float , 구글 UI 클론코딩
9강 - Float
float 프로퍼티는 블록 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.
flexbox으로 대체할 수 있지만 지원하지 않는 브라우저(IE)가 있기 때문에 알아야 한다.
float을 사용하지 않은 블록 요소들은 수직으로 정렬된다
float:left 가 사용된 블록 요소들은 왼쪽부터 가로 정렬된다
float:right 가 사용되면 오른쪽부터 가로 정렬된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
div {
width: 500px;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
border-radius: 5px;
margin: 20px;
color: white;
padding: 10px;
font-size: 40px;
font-weight: bold;
}
.box1 {
background-color: red;
float: left;
}
.box2 {
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>출력 결과
: 왼쪽부터 가로정렬, padding과 margin을 이용해서 띄우기
float 프로퍼티 관련 문제 해결 방법
1. float 선언된 요소와 선언되지 않은 요소간 margin이 사라지는 경우
- float이 선언되지 않은 요소에 overflow:hidden 추가
2. 부모 요소가 float 선언된 자식을 포함할 때 부모 요소의 높이가 정상적으로 반영되지 않는 경우
- 부모 요소에 overflow:hidden 추가
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
overflow: hidden;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div style="background:red;padding:10px;color:white;">3</div>
</body>
출력 결과
:after 가상 요소 선택자를 이용한 해결 방법
부모 요소에 :after 가상 요소 선택자를 사용해서 공백의 컨텐츠를 삽입해서 해결한다.
<style>
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="container clearfix">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div style="background:red;padding:10px;color:white;">3</div>
</body>inline-block을 이용한 해결 방법
d1, d2에 display: float 대신에 display: inline-block을 사용한다.
이때 두 요소간 공백이 생기는데 부모 요소에 font-size:0px 넣어서 공백을 제거하면 된다.
구글 UI 클론코딩
- 구글 메인화면과 최대한 비슷하게 만들어보기
- 1일차: 상단 메뉴 만들기
- 실제 구글 메인화면처럼 균형감있고 보기좋게 CSS 작업을 하려고 수치를 많이 넣어가면서 조정했다.
<html>
<head>
<style>
body {
margin: 0;
}
.menus {
margin: 10px;
text-align: center;
}
.login {
width: 100px;
height: 40px;
background-color: #1973E8;
border-radius: 3px;
text-align: center;
line-height: 40px;
color: white;
font-size: 14px;
font-weight: bold;
}
.text {
font-size: 15px;
color: black;
text-align: center;
line-height: 40px;
}
.float-right {
float: right;
}
.margin-right {
margin-right: 10px;
}
.menuicon {
line-height: 45px;
margin-right: 20px;
margin-left: 10px;
margin-top: 11px;
}
</style>
</head>
<body>
<div>
<div class="menus">
<a class="login float-right">로그인</a>
<a href="" class="float-right margin-right menuicon">
<img src="../menuicon.png" width="15px" height="15px"></a>
<a href="" class="text float-right margin-right">이미지</a>
<a href="" class="text float-right margin-right">Gmail</a>
</div>
</div>
</body>
</html>출력 결과
