티스토리 뷰
< float >
❑ 왼쪽/오른쪽 가로 배치
❑ 지정방향으로 이동
⇨ left / right / none
❑ 플롯에 크기는 내용의 크기와 똑같이 자동 인식
⇨ 크기(=너비)가 없는 인라인 요소도 float:위치를 주면 크기가 잡힘
⇨ display:block과는 같이 쓸 필요가 없음
⇨ 플롯이 적용된 요소안의 clear은 적용할 필요가 없음
# clear
❑ 달려드는 속성 해지: 뒤따라 오는 요소들이 플롯에 걸린 요소를 향해 달려듬
.class:after{
content:'';
clear:left;
display: block;
}
➡ clear:left / right / both (=왼쪽 or 오른쪽 둘 다 해지)
➡ content:' '으로 공백을 줌
➡ clear는 block요소만 적용 (=display:table)
➡ 속성을 해지 하지 않으면 높이가 다 흐트러짐
# clearfix(= cf)
.cf:after{
content:'';
display:block;
clear: both;
}➡ clear 할 대상이 많을 경우 사용
➡ 플롯을 해제할 부모요소 클래스에 cf를 붙여줌
# overflow
❑ float의 속성을 가진 부모 요소에 적용
➡ overflow: auto (= 자식 너비>부모 너비가 되면 가로 스크롤바가 생김)
➡ overflow: hidden (= 넘치는 경우가 많아 사용하지 않는 것을 권장)
- 실행 결과 -
< 조건 >
1. 모든 선택자 / 마진 / 패딩을 0으로 초기화
2. 헤더의 배경색 #ccc;
3. container의 너비는 960px, 화면 가운데 위치
4. list의 간격은 20px
5. 로고와 list 링크들은 세로 높이 60px이고 세로 안의 가운데 위치
* {margin:0; padding:0; color: black; text-decoration: none;}
header {background:#ccc;}
.container {width:960px; margin:0 auto;}
h1 {
float: left;
line-height:60px;
}
nav {
float: right;
}
.cf:after{
content:'';
display:block;
clear: both;
}
nav ul li{
float:left;
list-style:none;
line-height:60px;
}
nav ul li + li {
margin-left:20px;
}
<header>
<div class="container cf">
<h1><a href="#">Logo</a></h1>
<nav>
<ul class="cf">
<li><a href="#">Login</a></li>
<li><a href="#">Member Join</a></li>
<li><a href="#">Site map</a></li>
<li><a href="#">Location</a></li>
</ul>
</nav>
</div>
</header>➡ 브라우저와 공간 사이의 공백 제거
: <html>, <body>는 margin, padding 값을 가져 초기화 시켜줘야 함
➡ 웹사이트 만들 때 <html>, <body>은 초기화!
➡ * (= 모든 태그 선택)
'CSS' 카테고리의 다른 글
| shadow / gradient / transition / animation (0) | 2023.06.01 |
|---|---|
| position / z-index (0) | 2023.06.01 |
| display / overflow / background (0) | 2023.06.01 |
| 우선 순위 / font & text / vertical-align / list Style (0) | 2023.06.01 |
| CSS 기본문법 / colors / unit(단위) / 선택자 (0) | 2023.06.01 |