CSS 레이아웃

윤재열·2022년 1월 26일

목록 보기

9/19

box-sizing속성-박스 내부 기준 정하기

웹 문서에서 여러 요소를 배치하려면 각 요소의 너비를 계산해야 합니다.

CSS의 width속성은 콘텐츠 영역의 너비를 나타내기 때문에 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산하여 배치해야 합니다.
이럴 때 box-sizing속성을 사용하면 콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width속성을 지정할 수 있습니다.

속성 값	설명
content-box	width 속성 값을 콘텐츠 영역 너비 값으로 사용합니다. 기본값
border-box	width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용합니다.

<!DOCTYPE html>

<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
	<style>
		div {
			float:left;
			margin-right:20px;
		}
		.box1 {
			box-sizing:content-box; /* 콘텐츠 영역 기준 */
			width: 300px; /* 콘텐츠 영역 너비 300px */
			height: 150px; /* 높이 */
			margin: 10px; /* 마진 */
			padding: 30px; /* 패딩 */
			border:2px solid red; /* 테두리 */
		}
		.box2 {
			box-sizing:border-box;  /* 테두리까지(박스 전체) 기준*/
			width: 300px; /* 박스 모델 전체 너비 */
			height: 150px; /* 박스 높이 */
			margin: 10px; /* 마진 */
			padding: 30px; /* 패딩 */
			border: 2px solid red; /* 테두리 */
		}
	</style>
</head>
<body>
	<div class="box1"> box-sizing = "content-box" </div>
	<div class="box2"> box-sizing = "border-box"</div>
</body>
</html>

이 값은 다음 수식처럼 박스 모델의 너비 값이 계산된 것입니다.
300px = 236px + (30X2)px + (2X2)px
=콘텐츠 영역 + 좌우 패딩 + 좌우 테두리
만약 width값을 계산하기 어렵다면 box-sizing:border-box;로 지정해 박스 모델 너비를 알기 쉽게 바꾸어 놓는 것도 좋은 방법입니다.

float속성-왼쪽이나 오른쪽으로 배치하기

float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다.여기서 '떠있다'라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치 된다는 뜻입니다.

속성 값	설명
left	해당 요소를 문서의 왼쪽으로 배치합니다.
right	해당 요소를 문서의 오른쪽으로 배치합니다.
none	좌우 어느 쪽으로도 배치하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>박스모델</title>
	<style>
    #container {
      width:800px;
      margin:20px auto;
      padding:20px;
    }
		.left-img {
			float:left;
			margin-right:25px;
		}
		p {
			line-height:30px;
		}
	</style>
</head>
<body>
  <div id="container">
      <img src="images/cover.jpg" class="left-img" alt="">
      <h1>바쁜 3, 4학년을 위한 빠른 분수</h1>
      <h2>3, 4학년이 꼭 알아야 할 분수를 한 권에 모았어요!</h2>
      <p>한국 교육과정평가원이 최근 발표한 보고서에 따르면 ‘수포자’는 초등 3학년 때 분수를 배우면서 시작된다고 합니다. 분수를 어려워하는 이유는 분모와 분자, 2개의 수가 나와 낯설기 때문입니다. 이렇게 낯설고 어려운 분수, 어떻게 공부해야 할까요?</p>
  </div>
	
</body>
</html>

여러 요소를 가로로 배치해보자

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

box1 선택자가 적용된 요소가 표시된 후 오른쪽 공간에 box2 선택자를 사용한 요소가 옵니다.

clear속성-float속성 해제하기

float속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪾에 배치하면 그 다음에 넣는 다른 요소들에게도 똑같은 속성이 전달 됩니다. 따라서 float 속성이 더 이상 유용하지 않다고 알려주는 속성입니다.

float:left를 이용해 왼쪽으로 왼쪽으로 배치했다면 clear:left로 종료합니다.
float속성이 left인지 right인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear:both로 종료합니다.

2단 레이아웃

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>2단 레이아웃</title>
    <style>
        div{
            border: 1px solid #ccc;
        }
        #container{
            width: 960px;
            padding: 20px;
            margin: 0 auto;
        }
        #header{
            padding: 20px;
            margin-bottom: 20px;
        }
        #contents{
            width: 620px;
            padding: 20px;
            float: left;
            margin-bottom: 20px;
        }
        #sidebar{
            width: 220px;
            padding: 20px;
            float: right;
            margin-bottom: 20px;
        }
        #footer{
            float: lefft;
            clear: both;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
			<h1>사이트 제목</h1>
		</div>
		<div id="sidebar">
			<h2>사이드 바</h2>
            <ul>
                <li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>

            </ul>
		</div>
		<div id="contents">
			<h2>본문</h2>
            <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>

            <p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
		</div>
		<div id="footer">
			<h2>푸터</h2>
            <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
		</div>
    </div>
</body>
</html>

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

position 속성은 웹 문서 안의 요소들을 자유자재로 배치해 주는 속성으로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용하는 속성 중 하나 입니다.

position 속성을 이용하면 텍스트나 이미지를 나란히 배치할 수 있고 여러개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있습니다.
이렇게 요소를 다양하게 배치하렴녀 Position 속성에서 사용한는 속성 값의 특성을 이해하고 필요에 따라 적절한 속성 값을 선택해야 합니다.

속성 값	설명
static	요소를 문서의 흐름에 맞추어 배치합니다.
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다.
absolute	원하는 위치를 지정해 배치합니다.
fixed	지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있습니다.

position 속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다. 이떄 위치는 top,bottom,left,right 로 지정합니다.

static속성 값-문서의 흐름대로 배치하기

static은 position의 기본 값으로 요소를 나열한 순서대로 배치하며 top,right,bottom 같은 속성을 쓸 수 없습니다. 단지 float 속성을 이용하여 좌우로 배치할 수 있습니다.

relative속성 값-문서 흐름 따라 위치 지정하기

static 처럼 나열한 순서대로 배치되지만 속성값들을 사용할 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS 포지셔닝</title>
	<style>
		.box1{
			float:left;
			width:100px;
			background:#ffd800;
			margin-right:10px;
			padding:20px;
		}
		.box2 {
			position:relative;
			left:-50px;
			top:30px;
			width:300px;
			background:#0094ff;
			float:left;
			padding:20px;
		}
	</style>
</head>
<body>
	<div class="box1">박스1</div>
	<div class="box2">박스2</div>
</body>
</html>

.box2를 position:relative로 지정하여 원래 표시 되었어야할 위치를 기준으로 왼쪾으로 50px, 아래로 30px 이동해 표시됩니다.

absoulte 속성 값- 원하는 위치에 배치하기

absoulte 속성을 사용하면 문서의 흐름과 상관없이 left,right,top,bottom 속성값을 이용해 요솔르 원하는 위치에 배치할 수 있습니다.

이떄 기준이 되는 위치는 가까운 보모 요소나 조상 요소 중 position 속성이 relative인 요소입니다.
그래서 absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position을 relative로 지정해 놓고 사용해야 합니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS 포지셔닝</title>
	<style>
		.box1{
			float:left;
			width:100px;
			background:#ffd800;
			margin-right:10px;
			padding:20px;
		}
		.box2 {
			position:relative;
			left:-50px;
			top:30px;
			width:300px;
			background:#0094ff;
			float:left;
			padding:20px;
		}
	</style>
</head>
<body>
	<div class="box1">박스1</div>
	<div class="box2">박스2</div>
</body>
</html>

이렇게 absoulte 속성 값을 이용해 자유자재로 요소를 배치하기 위해서는 반드시 부모 요소가 relative로 지정되어 있어야 합니다.

fixed속성 값-브라우저 창 기준 배치하기

fixed 속성 값도 absoulte 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 됩니다.

브라우저 창의 왼쪽 위 꼭지점을 원점으로 두고 좌표가 계산되며 한번 배치되면 fixed라는 이름 처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS 포지셔닝</title>
	<style>
		#fx{
			position:fixed;
			top:5px;
			right:5px;
			width:50px;
			height:50px;
			background:#ff6a00;
		}
		#content { width:400px;	}
		p { line-height:30px;}
	</style>
</head>
<body>
	<div id="fx"></div>
	<div id="content">
		<p>fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관 없이 좌표로 위치를 결정하지만, 기준이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. 브라우저 창의 왼쪽 위 모서리 부분을 원점으로 좌표가 계산되고 한번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다. </p>
		<p>fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼 문서 흐름과는 상관 없이 좌표로 위치를 결정하지만, 기준이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다. 브라우저 창의 왼쪽 위 모서리 부분을 원점으로 좌표가 계산되고 한번 배치되면 fixed라는 이름처럼 브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다. </p>
	</div>
	
</body>
</html>

브라우저 창 높이를 줄이고 화면을 스크롤해 보면 주황색 상자는 계속 같은 자리에 표시되는 것을 볼 수 있습니다.

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

특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성입니다.

속성 값	설명
visible	화면에 요소를 표시합니다.(기본값)
hidden	화면에서 요소를 감춥니다.하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미칩니다.
collapse	표의 행,열,행그룹,열그룹 등에서 지정하면 서로 겹치도록 조절합니다. 그 외의 영역에서 사용하면 'hidden'처럼 처리합니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>visibility 속성</title>
		<style>
			img {
				margin:10px;
				padding:5px;
				border:1px solid black;
			}
			.invisible {
				visibility:hidden;
			}
		</style>
	</head>
	<body>
			<img src="images/pic1.jpg">
			<img src="images/pic2.jpg" class="invisible">
			<img src="images/pic3.jpg">
	</body>
</html>

3개의 이미지 중 두번째 이미지를 visible:hidden으로 설정해 화면에서 감춘것입니다.
화면에는 보이지 않지만 두번째 이미지가 웹 문서에 존재하기 때문에 세 번째 이미지는 두번쨰 이미지의 위치를 고려하여 그 다음에 배치됩니다.

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

CSS에서 각 요소는 수평이나 수직으로 이동할 뿐만 아니라 한 요소 위에 다른 요소를 쌓을 수도 있습니다.

요소 위에 요소를 쌓을 떄 쌓는 순서를 지정하는 것이 z-index속성입니다.
z-index값이 작을수록 아래에 쌓이고, 클수록 작은 요소 보다 위에 쌓입니다.
z-index값을 명시하지 않을 경우,웹 문서에 맨 먼저 삽입하는 요소가 z-index:1값을 가지고 그 후에 삽입하는 요소들은 값이 점점 커집니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>z-index 속성</title>
		<style>
			div#wrapper {
				position: relative;
			}
			.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="b1" class="box">1</div>
			<div id="b2" class="box">2</div>
			<div id="b3" class="box">3</div>
		</div>
	</body>
</html>