1. 웹 문서의 레이아웃
1) display 속성
🐰 display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용한다.
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 만든다. |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 만든다. |
| inline-block | 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다. |
| none | 해당 요소를 화면에 표시 x |
display: block 사용 예
<head>
<style>
.transform {
display: block; /* 속성 변경 */
}
</style>
</head>
<body>
<!-- span 태그의 기본 속성에 의한 배치 -->
<span>SPAN 01</span>
<span>SPAN 02</span>
<span>SPAN 03</span>
<!-- span 태그의 변경된 속성에 의한 배치 -->
<span class="transform">SPAN 04</span>
<span class="transform">SPAN 05</span>
<span class="transform">SPAN 06</span>
</body>
display: inline 사용 예
<head>
<style>
li {
border: 2px solid black;
}
.v_menu {
list-style: none; /* 목록 항목의 스타일 기호를 없앰 */
}
.h_menu {
display: inline;
}
</style>
</head>
<body>
<ul>
<li class="v_menu">세로메뉴01</li>
<li class="v_menu">세로메뉴02</li>
<li class="v_menu">세로메뉴03</li>
<li class="v_menu">세로메뉴04</li>
</ul>
<ul>
<li class="h_menu">네이버</li>
<li class="h_menu">다음</li>
<li class="h_menu">쿠팡</li>
<li class="h_menu">구글</li>
</ul>
</body>
display: inline-block 사용 예
- inline의 경우 한줄로 배치할 수 있지만, 넓이와 높이, 마진과 같은 정확한 값이 필요한 경우에는 적용이 힘듦
- inline 속성의 특성은 내부 콘텐츠만큼만 공간을 차지하고 있어서 넓이와 높이의 스타일이 적용이 안됨
- inline-block을 사용하면 해당 요소들을 가로로 배치할 수 있고 각 요소의 넓이와 높이 등 정확한 수치를 지정할 수 있음
<head>
<style>
li {
border: 2px solid black;
}
.menu1 {
display: inline;
background-color: yellowgreen;
width: 150px;
height: 40px; /* 넓이, 높이를 지정하였으나 inline 속성이기에 넓이, 높이가 적용되지 않음 */
}
.menu2 {
display: inline-block;
background-color: orange;
width: 150px;
height: 40px;
}
</style>
</head>
<body>
<ul>
<li class="menu1">inline</li>
<li class="menu1">inline</li>
<li class="menu1">inline</li>
<li class="menu1">inline</li>
</ul>
<ul>
<li class="menu2">inline-block</li>
<li class="menu2">inline-block</li>
<li class="menu2">inline-block</li>
<li class="menu2">inline-block</li>
</ul>
</body>
display: none 사용 예
- 해당 요소와 공간을 모두 표시하지 않음
- 비슷한 속성 중에 visibility: hidden; 이 있는데, visibility 속성은 화면에는 요소가 보이지 않으나 공간은 그대로 유지
사용 예)
팝업창(레이어 방식) 닫기.
반응형 웹의 경우 모바일에서는 보이지만 PC에서는 보이지 않게 하려면 display: none 속성을 사용
<head>
<style>
.camera02 {
display: none; /* 해당 요소의 공간과 내용을 없앰 */
/* visibility: hidden; */
}
</style>
</head>
<body>
<img src="img2/camera04.png" class="camera01" alt="camera04.png">
<img src="img2/camera05.png" class="camera02" alt="camera05.png">
<img src="img2/camera06.png" class="camera03" alt="camera06.png">
</body>
2) 왼쪽이나 오른쪽으로 배치하는 float 속성
🐰 html 초기 형태는 table 태그가 레이아웃을 잡는 용도로 사용
🐰 html4 부터는 레이아웃 용도로 table 태그 대신 div에 float 속성을 부여하는 방향으로 사용
🐰 html5 이후 부터 display 속성에 flex, grid 추가 하여 레이아웃에 사용
💡 float 속성
· float의 사전적 의미는 '떠오르다', '떠다니다'
· 웹 페이지에서는 float을 왼쪽이나 오른쪽에 배치할 때 사용하며 배치를 하지 않을 경우 'none'으로 표현
· 삽화 사용뿐 아니라, 레이아웃(block)을 나열할 때 많이 사용
left : 문서의 왼쪽으로 배치. 블록 박스를 왼쪽으로부터 나열하고 싶을 때 사용.
right : 문서의 오른쪽으로 배치. 블록 박스를 오른쪽으로부터 나열하고 싶을 때 사용.
none : 배치하지 않음. 정렬하지 않음
➡️ left와 right를 통해 나열 속성을 지정하면 display 개념은 무시됨. (none은 제외)
<head>
<style>
.camera {
float: left;
}
</style>
</head>
<body>
<img src="img/camera01.png" class="camera" alt="camera01">
<h2>TITLE-1</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
<head>
<style>
div {
width: 300px;
height: 300px;
border: 2px solid black;
}
.box1 {
float: left;
}
.box2 {
float: left;
}
.box3 {
float: right;
}
</style>
</head>
<body>
<div class="box1">01</div>
<div class="box2">02</div>
<div class="box3">03</div>
</body>
3) float 속성을 해제하는 clear 속성
🐰 float 속성으로 박스를 배치하면 이어지는 요소들도 동일한 속성이 적용
🐰 float 속성이 더 이상 필요하지 않다면 기존 속성을 해체하기 위한 clear 속성을 사용
🥕 clear : float 나열에 대한 값을 지우고, 문서의 흐름을 제거하기 위해 사용하는 태그
clear: left ▶️ 왼쪽으로 붙는 float 정렬을 취소
clear: right ▶️ 오른쪽으로 붙는 float 정렬을 취소
clear: both ▶️ 왼쪽, 오른쪽으로 붙는 float 정렬을 취소
clear: none ▶️ clear 속성을 설정하지 않은 것과 같음
<head>
<style>
div {
width: 300px;
height: 300px;
border: 2px solid black;
}
.box1 {
float: left;
}
.box2 {
float: left;
}
.box3 {
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box1">01</div>
<div class="box2">02</div>
<div class="box3">03</div>
<div class="clear">04</div>
<div>05</div>
<div>06</div>
<div>07</div>
</body>
display : inline-block 과 float : left 속성의 다른점
- inline-block은 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만,
float: left는 가로로 배치될 때 요소에 기본 마진과 패딩이 없고 clear 속성으로 플로팅을 해제해야 함
2. 여백을 조절하는 속성
1) 요소 주변의 여백을 설정하는 margin 속성
margin: <크기>|<백분율>|auto
🐰 마진 margin은 요소 주변의 여백을 의미
🐰 top ▶️ right ▶️ bottom ▶️ left 순으로 적용
2) margin 속성을 사용하여 웹 문서를 가운데 정렬하기
🐰 웹 문서 전체를 화면 중앙에 배치할 때 margin 속성을 사용
🐰 margin-left 와 margin-right 의 속성값을 auto로 지정
➡️ CSS는 웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산
➡️ block 속성을 가진 박스의 넓이가 지정되어 있을 때 margin:0 auto를 통해 가운데 배치가 가능하며
margin: auto auto 라고 입력하면 브라우저의 위아래는 자동 인식이 되지 않지만 좌우는 자동으로 가운데 배치가 가능
<head>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
width: 740px;
height: 120px;
background-color: burlywood;
float: left;
}
.login {
width: 333px;
height: 120px;
background-color: beige;
float: left;
margin-left: 8px;
/* 로그인 박스 기준에서 간격을 주고자 왼쪽 바깥쪽 여백을 지정하였으며,
배너 박스 기준일 때 바깥쪽 여백은 margin-right가 됨. */
}
.main {
width: 1081px; /* 배너 박스와 로그인 박스를 더한 값 */
height: 120px; /* 두 개 박스의 고정 높이 */
margin: 100px auto;
/* margin 값이 2개일 때 top bottom, left right로 지정 */
}
</style>
<body>
<div class="main">
<div class="banner">배너영역</div>
<div class="login">로그인</div>
</div>
</body>
안쪽 박스에 border가 추가 되면 박스의 넓이와 높이에 영향을 주게 되어서 박스들이 밑으로 밀려나는 현상이 나타남
<style>
* {
margin: 0;
padding: 0;
}
.banner {
width: 740px;
height: 120px;
background-color: burlywood;
float: left;
border: 2px solid black;
}
.login {
width: 333px;
height: 120px;
background-color: beige;
float: left;
margin-left: 8px;
border: 2px solid black;
}
/*
배너 영역 박스 넓이 : 740 + 2 + 2 = 744px
로그인 박스 넓이 : 333 + 8 + 2 + 2 = 345px
부모 박스의 넓이 : 744 + 345 = 1089px
부모 박스의 높이 : 120 + 2 + 2 = 124px
*/
.main {
width: 1081px; /* 배너 박스와 로그인 박스를 더한 값 */
height: 120px; /* 두 개 박스의 고정 높이 */
margin: auto auto /* margin 값이 2개일 때 top bottom, left right로 지정 */
}
</style>
<body>
<div class="main">
<div class="banner">배너영역</div>
<div class="login">로그인</div>
</div>
</body>
3) 마진 중첩 이해하기
🐰 박스 모델들을 세로로 배치할 경우 각 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 문제가 발생
▶️ 이런 현상을 마진 중첩 margin overlap 또는 마진 상쇄 margin collapse 라고 함
▶️ 오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않음
4) 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성
🐰 패딩 padding 이란 콘텐츠 영역과 테두리 사이의 여백을 말함
🐰 4개 방향의 패딩을 한꺼번에 지정할 수도 있고, 예약어를 사용해서 특정 방향에만 지정할 수도 있다.
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > CSS' 카테고리의 다른 글
| [CSS] 배경 이미지 지정과 속성 (0) | 2024.03.22 |
|---|---|
| [CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0) | 2024.03.21 |
| [CSS] 수직 중앙 정렬 방법, overflow와 scroll (0) | 2024.03.21 |
| [CSS] 박스 모델 요소 및 구성, 테두리 스타일 지정 (0) | 2024.03.20 |
| [CSS] CSS 스타일, 기본 선택자, 캐스케이딩 스타일 시트 (0) | 2024.03.19 |