* 블록레벨의 좌우 배치를 위한 속성
(블록레벨은 지정된 너비 또는 부모의 너비만큼 차지하기 때문에 좌우 배치가 불가능함)
1. flex
display의 속성 중 하나인 flex 이용하기
(html5 버전의 기능으로 flex기능 이전에 만들어진 페이지에선 float으로 좌우 배치)
특징
① container(부모)에 flex를 주면 box(자식)들이 flexable한 배치가 된다. (부모가 flex 값을 가진다.)
(좌우 배치 또는 상하 배치)
② flex-direction: row => 좌우 배치 (디폴트)
flex-direction: column => 상하 배치
③ flex-wrap: nowrap => box(자식)들이 container(부모)에 한 줄로 배치된다.(디폴트)
box(자식)들의 크기가 줄어들 수 있다.
flex-wrap: wrap => box(자식)들이 container(부모)에 두 줄 이상으로 배치된다.
box(자식)들의 크기가 원래 크기를 유지한다.
④ justify-content: space-between => 자식 Box 사이에 공백을 배치한다.
justify-content: center => 자식 Box들을 container(부모) 중앙에 배치한다.
flex 예시1_좌우배치(flex-direction: row 가 디폴트)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
display: flex;
width: 700px;
height: 50px;
background-color: lightgray;
}
ul > li {
text-align: center;
list-style: none;
border:1px solid black;
width: 150px;
}
</style>
</head>
<body>
<ul>
<li>옆으로 나란히1</li>
<li>옆으로 나란히2</li>
<li>옆으로 나란히3</li>
<li>옆으로 나란히4</li>
</ul>
</body>
</html>-> 결과
flex 예시2_가운데정렬(justify-content: center)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
display: flex;
width: 900px;
height: 50px;
padding: 0;
background-color: lightgray;
justify-content: center;
}
ul > li {
text-align: center;
list-style: none;
border:1px solid black;
width: 150px;
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li>옆으로 나란히1</li>
<li>옆으로 나란히2</li>
<li>옆으로 나란히3</li>
<li>옆으로 나란히4</li>
</ul>
</body>
</html>-> 결과
2. float
float '뜨다' 라는 의미
문서의 기본흐름은 왼쪽->오른쪽 위->아래 => 기본흐름을 바꾸기 위해 사용
문서에 붙은 이미지나 박스를 '띄워' 옆으로 배치
float예시1_이미지 옆으로 텍스트 배치하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float: left;
margin:10px;
}
</style>
</head>
<body>
<img src="tokyo.JPG" width="200px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>
float예시2_블록레벨 옆으로 배치
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
padding: 0;
width: 700px;
height: 200px;
}
ul > li {
width: 150px;
height: 100px;
border: 1px solid black;
text-align: center;
line-height: 100px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<ul>
<li>float이용해 나란히1</li>
<li>float이용해 나란히2</li>
<li>float이용해 나란히3</li>
<li>float이용해 나란히4</li>
</ul>
</body>
</html>
댓글