[HTML+CSS] CSS 포지셔닝 float, position, z-index

[HTML+CSS] CSS 포지셔닝 float, position, z-index - travelbeeee

2020. 4. 12. 16:28

안녕하세요, 여행벌입니다.

오늘은 CSS를 이용해 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 CSS 포지셔닝에 대해서 포스팅해보겠습니다.

CSS포지셔닝

CSS 포지셔닝이란 검색 창, 로그인 창, 광고, 뉴스 등 여러 요소를 적절히 배치하는 것을 말합니다. 즉, 웹 문서의 레이아웃을 만드는 과정을 CSS 포지셔닝이라고 합니다. 앞에서 배운 레이아웃 스타일 속성에 box-sizing 속성, float 속성, position 속성 등을 이용해서 CSS 포지셔닝을 할 수 있습니다. 같은 내용이더라도 배치를 어떻게 하고 어떤 배경과 색상을 사용할지에 따라 완전히 다른 사이트처럼 보일 수 있기 때문에 CSS 포지셔닝은 굉장히 중요한 작업입니다.

box-sizing 속성 : 박스 너비 기준 정하기

box-sizing 속성을 이용하면 박스 모델의 너비 기준을 정할 수 있습니다. 보통 width, height 속성을 이용해서 콘텐츠 영역의 크기를 조절할 수 있는데, box-sizing 속성을 이용하면 콘텐츠 영역뿐만 아니라 테두리 영역, 패딩 영역도 포함해서 크기를 포함해서 너비를 지정할 수 있습니다.

box-sizing : content-box | border-box

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .content-box{
            box-sizing : content-box;
            width : 200px;
            height : 100px;
            margin : 10px;
            padding : 30px;
            background-color : orange;
        }
        .border-box{
            box-sizing : border-box;
            width : 200px;
            height : 100px;
            margin : 10px;
            padding : 30px;
            background-color : yellow;
        }
    </style>
</head>
<body style="background-color : black;">
    <div class="content-box">content-box</div>
    <div class="border-box">border-box</div>
</body>
</html>

div 박스에 동일한 width, height, margin, padding 속성을 부여하겠습니다. 그 후, 첫 번째 박스는 box-sizing : content-box, 두 번째 박스는 box-sizing : border-box 속성을 부여하겠습니다.

결과는 다음과 같습니다. border-box는 padding, border 영역을 포함해서 width, height 속성을 적용하기 때문에 content 영역의 크기가 content-box에 비해 작은 것을 확인할 수 있습니다.

float 속성 : 왼쪽 혹은 오른쪽으로 배치하기

float 속성은 문자 그대로 웹 요소를 "띄워줍니다." float 속성을 이용하면 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 즉, 웹 요소를 문서의 왼쪽 구석이나 오른쪽 구석에 배치할 수 있게 만듭니다. float 속성을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.

float : left | right | none

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .left-box{
            float : left;
            width : 200px;
            height : 100px;
            background-color : orange;
        }
        .right-box{
            float : right;
            width : 200px;
            height : 100px;
            background-color : yellow;
        }
        .none-box{
            float : none;
            width : 200px;
            height : 100px;
            background-color : coral;
        }
    </style>
</head>
<body style="background-color : black;">
    <div class="left-box">left-box</div>
    <div class="right-box">right-box</div>
    <div class="none-box">none-box</div>
</body>
</html>

같은 크기의 박스 모델 3개를 float : left, right, none 순으로 부여했습니다.

float 속성을 이용하면 요소를 띄울 수 있기 때문에 left-box와 none-box가 겹쳐진 것을 확인할 수 있습니다.

clear 속성 : float 속성 해제하기

float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들도 똑같은 속성이 전달됩니다. 따라서, float 속성이 더 이상 유용하기 않을 때에는 clear 속성을 이용해서 float 속성을 해제해줘야합니다.

clear : none | left | right | both

float : left를 이용해 왼쪽으로 배치했다면 clear : left 로 종료하고, float : right 를 사용했다면 clear : right 를 사용해 무효화시킵니다. float 속성 값에 상관 없이 무조건 기본 상태로 되돌리고 싶다면 clear : both 라고 하면 됩니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>박스모델</title>
	<style>
		div {
			padding:20px;
			margin:10px;
		}
		.box1{
			background:#ffd800;
			float:left;
		}
		.box2 {
			background: #0094ff;
			float:left;
		}
		.box3 {
			background: #00ff21;
			/* clear: both; */
		}
	</style>
</head>
<body>
	<div class="box1">박스1</div>
	<div class="box2">박스2</div>
	<div class="box3">박스3</div>
</body>
</html>

float 속성에 의해 박스3 가 박스1, 박스2 아래로 놓이는 것을 볼 수 있습니다.

clear 속성을 이용해 박스3에 float 속성을 무효화시켜보겠습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>박스모델</title>
	<style>
		div {
			padding:20px;
			margin:10px;
		}
		.box1{
			background:#ffd800;
			float:left;
		}
		.box2 {
			background: #0094ff;
			float:left;
		}
		.box3 {
			background: #00ff21;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box1">박스1</div>
	<div class="box2">박스2</div>
	<div class="box3">박스3</div>
</body>
</html>

position 속성 : 배치 방법 지정하기

position 속성은 웹 문서 안이 요소들을 자유자재로 배치해 주는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있습니다.

position : static | relative | absolute | fixed

position 속성은 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다. top, bottom, left, right 로 지정하고 top이란 위쪽에서 얼마나 떨어져 있는지 bottom은 아래에서 얼마나 떨어져 있는지, left는 왼쪽에서 얼마나 떨어져 있는지, right는 오른쪽에서 얼마나 떨어져 있는지를 뜻합니다. 좌푯값은 양수와 음수 모두 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .box1{
            float : left;
            width : 100px;
            background-color : yellow;
        }
        .box2{
            float : left;
            position : relative;
            width : 300px;
            background-color : orange;
        }
    </style>
</head>
<body style="background-color : black;">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

box1, box2 모두 float : left 를 적용했습니다. 하지만 box2에는 position : relative; 를 부여해 이전 요소에 자연스럽게 연결해 배치할 수 있습니다.

box2에 left, top 속성을 적용해보겠습니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        .box1{
            float : left;
            width : 100px;
            background-color : yellow;
        }
        .box2{
            float : left;
            position : relative;
            width : 300px;
            background-color : orange;
            left : 50px;
            top : 30px;
        }
    </style>
</head>
<body style="background-color : black;">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

다음과 같이 static 속성을 제외하고 top, left, right, bottom 을 이용해 원하는 곳에 요소를 배치할 수 있습니다.

이번에는 absolute 속성을 이용해서 원하는 위치에 요소를 배치해보겠습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS 포지셔닝</title>
	<style>
		#wrap{
			position:relative;
			width:300px;
			height:300px;
			border:1px solid #ccc;
		}
		.box{
			position:absolute;
			width:50px;
			height:50px;
			background:#0094ff;
		}
		#crd1 {
			top:0;
			left:0;
		}
		#crd2{
			top:0;
			right:0;
		}
		#crd3{
			bottom:0;
			left:0;
		}
		#crd4{
			bottom:0;
			right:0;
		}
		#crd5{
			top:100px;
			left:100px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="box" id="crd1"></div>
		<div class="box" id="crd2"></div>
		<div class="box" id="crd3"></div>
		<div class="box" id="crd4"></div>
		<div class="box" id="crd5"></div>
	</div>
</body>
</html>

div 박스를 5개 만들고, absolute 속성을 이용해 박스를 화면 곳곳에 배치해보겠습니다. crd1 박스는 top : 0, left : 0; 을 부여했으므로 왼쪽 위에 붙어있게 되고, crd2 박스는 top : 0, right : 0; 을 부여했으므로 오른쪽 위에 붙어있게 되고, crd3 박스는 bottom : 0, left : 0; 을 부여했으므로 왼쪽 아래에 붙어 있고, crd4 박스는 bottom : 0, right : 0; 이므로 오른쪽 아래에 붙어 있게 됩니다. 마지막으로 crd5 박스는 위로부터 100px, 왼쪽으로부터 100px 떨어져 있는데 wrap 박스의 크기가 width : 300px, height : 300px 이므로 중간에 떠있게 됩니다.

visibility 속성 : 요소를 보이게 하거나 보이지 않게 하기

visibility 속성은 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성입니다. display : none 속성과는 다르게 visibility 속성을 이용해 특정 요소를 화면에서 보이지 않게 하더라도 크기는 그대로 유지됩니다.

visibility : visible | hidden | collapse

위의 예시를 그대로 가져와서 hidden 속성을 부여해보겠습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS 포지셔닝</title>
	<style>
		#wrap{
			position:relative;
			width:300px;
			height:300px;
			border:1px solid #ccc;
		}
		.box{
			position:absolute;
			width:50px;
			height:50px;
			background:#0094ff;
		}
		#crd1 {
			top:0;
			left:0;
			visibility: hidden;
		}
		#crd2{
			top:0;
			right:0;
		}
		#crd3{
			bottom:0;
			left:0;
			visibility: hidden;
		}
		#crd4{
			bottom:0;
			right:0;
		}
		#crd5{
			top:100px;
			left:100px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="box" id="crd1"></div>
		<div class="box" id="crd2"></div>
		<div class="box" id="crd3"></div>
		<div class="box" id="crd4"></div>
		<div class="box" id="crd5"></div>
	</div>
</body>
</html>

hidden 속성을 이용해 crd1 박스와 crd3 박스를 화면에서 숨겨보겠습니다.

하지만 개발자 모드를 통해서 보면 다음과 같이 crd1 박스와 crd3 박스가 자리를 차지하고 있는 것을 볼 수 있습니다.

z-index 속성 : 요소 쌓는 순서 정하기

CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있습니다. 요소 위에 요소를 쌓을 때 쌓는 순서극 지정하는 것이 z-index 속성입니다. z-index 값이 작을수록 아래에 쌓이고 z-index 값이 클수록 위에 쌓입니다. z-index 값을 명시하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index : 1 값을 가지며 그 후에 삽입하는 요소들은 z-index 값이 점점 커집니다.

z-index : <숫자>;

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>z-index 속성</title>
		<style>
			div#wrapper {
				position: relative;
			}
			div#box {
				position:absolute;
				width:100px;
				height:100px;
				border:1px solid black;
				font-size:26px;
			}
			.b1 {				
				left:50px;
				top:50px;
				background:#ff0000;
				z-index:1;
			}
			.b2 {				
				left:110px;
				top:70px;
				background:#ffd800;
				z-index:3;
			}
			.b3 {
				left:70px;
				top:110px;
				background:#0094ff;
				z-index:1;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="box" class="b1">1</div>
			<div id="box" class="b2">2</div>
			<div id="box" class="b3">3</div>
		</div>
	</body>
</html>

2번 박스가 z-index 값이 가장 크므로 제일 위에 쌓인 것을 확인할 수 있습니다. 1번, 3번 박스는 z-index 값이 같지만 1번 요소가 코드 상으로 먼저 웹 문서에 적용되므로 아래에 쌓인 것을 확인할 수 있습니다.

오늘 배운 CSS 속성들은 저번 레이아웃을 위한 스타일 포스팅과 더불어

웹 개발에서 꼭 사용되는 중요한 속성들입니다.

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 표 꾸미는데 필요한 속성 - travelbeeee (0)	2020.04.12
[HTML+CSS] 텍스트 단 나누기(다단) - travelbeeee (0)	2020.04.12
[HTML+CSS] 배경 스타일 : background 속성 정리 (0)	2020.04.09
[HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee (0)	2020.04.09
[HTML+CSS] 목록 스타일 : list 속성 정리 - travelbeeee (0)	2020.04.08

굳건하게