Chap 08-2 레이아웃을 구성하는 CSS 박스 모델
레이아웃을 구성하는 CSS 박스 모델
3. 여백을 조절하는 속성
✨ margin 속성
현재 요소 주변의 여백- 마진을 이용하면 요소와 요소 간의 간격 조절 가능
- 기본형 : margin : <크기> | <백분율> | auto
| 종류 | 설명 | 예시 |
|---|---|---|
| <크기> | 너비값이나 높잇값을 px나 em 같은 단위와 함께 수치로 지정함. | margin: 50px; |
| <백분율> | 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높잇값을 퍼센트(%)로 지정함. | margin: 0.1%; |
| auto | display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함. | - |
- 코드 예시 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델 - 마진</title>
<style>
* {
margin: 0;
}
div {
width:200px;
height:100px;
display:inline-block;
border:1px solid #222;
}
/* 박스 모델에 마진 지정하기 */
#margin1 {
margin:50px;
}
#margin2 {
/* 위아래 마진 30px, 좌우 마진 50px */
margin:30px 50px;
}
#margin3 {
/* 위 마진 60px, 좌우 마진 30px, 아래 마진 50px */
margin:60px 30px 50px;
}
#margin4 {
/* 위 아래 마진 30px, 좌우 마진 50px */
margin:30px 50px 30px 50px
}
</style>
</head>
<body>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
</body>
</html>- 결과 )
margin 속성을 사용해 가운데 정렬하기
- 배치할 요소의 너빗값이 정해져 있어야 함.
margin-left와 margin-right의 속성값을 auto로 지정
- 코드 예시 )
...
<title>박스모델 - 마진</title>
<style>
/* 마진을 사용해 수평으로 중앙 정렬하기 */
div {
width:200px;
height:100px;
border:1px solid #222;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 100px;
font-weight: bold;
}
</style>
</head>
<body>
<div>가운데 정렬</div>
</body>
</html>
- 결과 )
✨ margin 중첩 현상
- 요소를 세로로 배치할 경우,
마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹침 - 가로로 배치할 경우에는 상관 없음
✨ padding 속성
- 콘텐츠 영역과 테두리 사이의 여백
- 마진을 지정하는 방법과 같음
- 기본형 : padding : <크기> | <백분율> | auto
- 코드 예시 )
...
<title>박스 모델 - 패딩</title>
<style>
h1 {
display:inline-block;
border:1px solid #000;
margin: 0px 15px;
}
/* 박스 모델에 패딩 지정하기 */
#padding1 {
/* top - 20px / right - 60px / bottom - 40px / left - 50px */
padding:20px 60px 40px 50px;
}
#padding2 {
/* top&bottom - 20px / right&left - 30px*/
padding: 20px 30px;
}
#padding3 {
/* 위아래, 좌우 모두 20px */
padding: 20px
}
</style>
</head>
<body>
<h1>BMW</h1>
<h1 id="padding1">BMW</h1>
<h1 id="padding2">BMW</h1>
<h1 id="padding3">BMW</h1>
</body>
</html>- 결과 )
4. 웹 문서 레이아웃 만들기
✨ display 속성
-
요소의 배치 방법 결정종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 만듦 inline 블록 레벨 요소를 인라인 레벨 요소로 만듦 inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며, 마진과 패딩을 지정할 수 있음 none 해당 요소를 화면에 표시하지 않음 -
코드 예시 1 ) - block
...
<title>CSS display 속성</title>
<style>
/* li 요소를 가로로 나란히 배치하기 */
ul {
list-style-type: none;
}
nav ul li {
display: block;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 10px;
border: 1px solid black;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</body>
</html>
- 결과 1 )
- 코드 예시 2 ) - inline - block
...
<title>CSS display 속성</title>
<style>
/* li 요소를 가로로 나란히 배치하기 */
ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 10px;
border: 1px solid black;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</nav>
</body>
</html>- 결과 2 )
float 속성
요소를 왼쪽이나 오른쪽에 떠 있게 만듦- 기본형 - float : left | right | none
종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 만듦 inline 블록 레벨 요소를 인라인 레벨 요소로 만듦 inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며, 마진과 패딩을 지정할 수 있음 none 해당 요소를 화면에 표시하지 않음
- 코드 예시 1 )
...
<title>CSS float 속성</title>
<style>
/* 이미지 왼쪽으로 플로팅시키기 */
img {
float: left;
/* 왼쪽에 떠 있게 */
margin-right: 40px;
}
</style>
</head>
<body>
<p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<img src="images/tree.png">
<p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
<p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>- 결과 1 )
- 코드 예시 2 )
...
<title>박스모델</title>
<style>
.wrapper {
width: 800px;
margin: 10px auto;
padding: 20px;
border: 3px solid #ccc;
}
.box {
padding: 20px;
margin: 10px;
}
/* float 속성을 사용해 배치하기 */
#box1{
background-color: aqua;
float: left;
}
#box2 {
background-color: blue;
color: white;
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box" id="box1">박스1</div>
<div class="box" id="box2">박스2</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, deserunt. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>- 결과 2 )
clear 속성
float 속성을 무효화 시키는 속성- 기본형 - clear : none | left | right | both
종류 설명 left float : left를 해재 right float : right을 해제 both float : left / float : right을 해제
- 코드 예시 )
...
<title>박스모델</title>
<style>
.wrapper {
width: 800px;
margin: 10px auto;
padding: 20px;
border: 1px solid #ccc;
}
.sidebar {
width: 150px;
height: 150px;
}
#left{
background:#ffd800;
float: left;
margin-right: 10px;
}
#right {
background: #0094ff;
float: right;
margin-left: 10px;
}
/* clear 속성을 사용해 플로팅 해제하기 */
.clear {
clear: both;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="left">사이드바</div>
<div class="sidebar" id="right">사이드바</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, deserunt. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia totam animi delectus nesciunt. Minus accusamus consequuntur inventore fugit culpa reiciendis dicta aliquam.</p>
</div>
</body>
</html>
- 결과 )
5. 웹 요소의 위치 지정하기
left, right, bottom, top 속성
-
웹 요소의 위치를 지정하는 속성
종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정합니다. right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정합니다. top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정합니다. bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정합니다.
- 코드 예시 )
...
<title>CSS 위치 속성</title>
<style>
*{
margin:0; /* 마진 초기화 */
padding:0; /* 패딩 초기화 */
}
p {
width:300px; /* 너비 - 300px */
border:1px solid #ccc; /* 테두리 - 1픽셀 회색 실선 */
padding:10px; /* 네방향 패딩 10px */
}
#pos1{
/* absolute는 단독으로 사용하지 않는다. */
position:absolute; /* 포지셔닝 - absolute */
left:50px; /* 왼쪽에서 50px 떨어지게 */
top:50px; /* 위쪽에서 50px 떨어지게 */
}
#pos2 {
position:absolute; /* 포지셔닝 - absolute */
right:100px; /* 오른쪽에서 100px 떨어지게 */
top:100px; /* 위쪽에서 100px 떨어지게 */
}
#pos3 {
position: absolute; /* 포지셔닝 - absolute */
left:100px; /* 왼쪽에서 100px 떨어지게 */
bottom:50px; /* 아래쪽에서 50px 떨어지게 */
}
</style>
</head>
<body>
<p id="pos1">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
<p id="pos2">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
<p id="pos3">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>- 결과 )
left, right, bottom, top 속성
-
웹 문서 안에 요소들을 배치하기 위한 속성 -
기본형 - position : static | relative | absolute | fixed
속성 값 설명 static 요소를 문서의 흐름에 맞추어 배치함. relative 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음. absolute 원하는 위치를 지정해 배치함. fixed 지정한 위치에 고정해 배치함. 화면에서 요소가 잘릴 수도 있다.
- 코드 예시 )
...
<title>CSS position 속성</title>
<style>
p {
width:500px;
height:200px;
background-color:#eee;
border:1px solid #ccc;
line-height:2;
}
#static {
/* position 디폴트값은 static */
position: static;
}
#relative-1{
position: relative;
}
#relative-2 {
/* 기존 static의 위치로 부터 이동 */
position:relative; /* 포지셔닝 - relative */
left:100px; /* 왼쪽에서 100px 떨어지게 */
top:-50px; /* 위쪽에서 -50px 떨어지게 (위로 이동) */
}
#fixed {
/* 특정 위치에 고정시킴 */
width:100px;
height:100px;
background-color:#222;
position:fixed; /* 포지셔닝 - fixed */
right:30px; /* 오른쪽에서 30px 떨어지게 */
top:30px; /* 위쪽에서 30px 떨어지게 */
}
</style>
</head>
<body>
<p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Pariatur fugiat voluptate ea non amet cupidatat. </p>
<p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud labore cillum non exercitation voluptate. </p>
<p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p>
<p id="fixed"></p>
</body>
</html>- 결과 )
Hi