배치 방법 결정하는 속성
- display 속성
- display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능
- 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수 있음
- 자주 사용하는 display 속성값
- block : 인라인 레벨 요소를 블록 레벨 요소로 만듦
- inline : 블록 레벨 요소를 인라인 레벨 요소로 만듦
- inline-block : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음
- none : 해당 요소를 화면에 표시하지 않음
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>수평 내비게이션 만들기</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>예시 1</li>
<li>예시 2</li>
<li>예시 3</li>
<li>예시 4</li>
</ul>
</nav>
</body>
</html>-(결과) :
왼쪽이나 오른쪽으로 배치하는 속성
- float 속성
- <p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없음
이럴 때는 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러 싸도록 할 수 있음
- <p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없음
- float 속성값
- left : 해당 요소를 문서의 왼쪽에 배치함
- right : 해당 요소를 문서의 오른쪽에 배치함
- none : 좌우 어느 쪽에도 배치하지 않음 / 기본값
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 왼쪽에 이미지 배치</title>
<style>
img {
float:left;
margin-right:40px;
}
</style>
</head>
<body>
<img src="example.png">
<p>예시 1</p>
<p>예시 2</p>
<p>예시 3</p>
<p>예시 4</p>
</body>
</html>-(결과) :
float 속성을 해제하는 속성
- clear 속성
- float 속성을 사용하여 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달됨
- float 속성을 더 이상 사용하지 않을 때 clear 속성을 사용함
- clear 속성값
- left : float: left를 해제함
- right : float: right을 해제함
- both : float: left와 float: right을 해제함
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플로팅 해제</title>
<style>
div {
padding:20px;
margin:10px;
}
#box1{
background: red;
float:left;
}
#box2 {
background: blue;
float:left;
}
#box3 {
background: green;
}
#box4 {
background: purple;
clear:left;
}
</style>
</head>
<body>
<div id="box1">예시1</div>
<div id="box2">예시2</div>
<div id="box3">예시3</div>
<div id="box4">예시4</div>
</body>
</html>-(결과) :
'Web Basic > CSS' 카테고리의 다른 글
| 박스모델 여백 조절하기 (0) | 2021.07.30 |
|---|---|
| 박스 모델 테두리 지정하기 (0) | 2021.07.30 |
| CSS 박스 모델 (1) | 2021.07.15 |
| 표 스타일 (0) | 2021.07.15 |
| 목록 스타일 (0) | 2021.07.15 |