Notice
Recent Posts
Recent Comments
Link
YTCW
10. CSS (Layout, display, float, clear) 본문
1. display 속성
배치방법
- 가로와 세로 배치를 위해 주로 사용한다.
block | 인라인 레벨 요소를 블록 레벨 요소로 전환 |
inline | 블록 레벨 요소를 인라인 레벨 요소로 전환 |
inline-block | 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 / 마진과 패딩 지정 가능 |
none | 해당 요소를 화면에 표시하지 않는 속성 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS display 속성</title>
<style>
* {
box-sizing: border-box;
}
nav ul {
list-style:none;
}
nav ul li {
display:inline-block; /* 인라인 레벨 요소와 블록 레벨 요소 모두 지정 */
padding:20px;
margin:0 20px;
border:1px solid #222;
}
</style>
</head>
<body>
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</nav>
</body>
</html>
2. float 속성
왼쪽 or 오른쪽으로 배치
p 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야할 경우 사용
근데 요즘은 거의 flex를 사용하는느낌
left | 해당 요소를 문서의 왼쪽에 배치 |
right | 해당 요소를 문서의 오른쪽에 배치 |
none | 좌우 어느 쪽에도 배치하지 않는 속성 : 기본 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS float 속성</title>
<style>
body {
width: 600px;
height: 600px;
}
img {
width: 300px;
height: 300px;
float:left; /* 왼쪽에 떠 있게 */
margin-right:40px;
}
</style>
</head>
<body>
<img src="./lotte-white.jpg">
<p>롯데 자이언츠(Lotte Giants)는 대한민국 부산광역시를 연고지로 하는 KBO 소속 프로 야구 팀이다. 사직야구장을 홈구장으로 사용하고 있으며, 울산문수야구장을 제2홈구장으로 사용하고 있다.</p>
<p>1975년에 실업 야구단으로 창단되어 역대 KBO구단중 가장 오래된 구단이다. 1982년에 프로 야구단으로 전환했다. 1984년과 1992년 두 차례 한국시리즈 우승을 차지했고, 2008년부터 2012년까지 5년연속 포스트시즌 진출을 이루어냈다.</p>
<p>롯데 자이언츠의 별명은 부산광역시의 상징 새가 갈매기이고, 구단의 대표적 응원가도 〈부산갈매기〉라서 “부산 갈매기"라고 부른다. 롯데 자이언츠의 2023시즌 우승을 응원합니다!</p>
</body>
</html>
3. clear 속성
float를 사용한뒤에 속성 해제를 시켜줘야한다.
더이상 유용하지 않다고 알려주는 속성
left | float : left 해제 |
right | float : right 해제 |
both | float : left와 float : right 해제 |