반응형
CSS 레이아웃 속성은 HTML 문서의 요소를 배치하는 데 사용됩니다.
웹 페이지의 요소를 정렬하고 레이아웃을 설계하는 데 큰 도움이 됩니다.
또한, 반응형 웹 디자인을 구현하기 위해서는 레이아웃 속성이 자주 사용됩니다.
예를 들어, 작은 화면에서의 레이아웃과 큰 화면에서의 레이아웃이 다르도록 만들 수 있습니다.
- display: 요소가 생성해야 하는 박스의 유형을 지정합니다. 일반적인 값으로는 block, inline, inline-block, none이 있습니다.
- float: 요소를 플로팅 요소로 위치 지정하고, 텍스트와 인라인 요소가 그 주위로 감싸도록 합니다. left와 right 값은 요소를 컨테이너의 왼쪽 또는 오른쪽에 플로팅하는 경우에 자주 사용됩니다.
- clear: 요소가 플로팅 요소와 옆에 있어서는 안 되는지 여부를 지정합니다. left, right, both, none 값은 요소의 어떤 면에도 플로팅 요소가 없어야 하는지를 결정합니다.
- position: 요소의 위치 유형을 지정합니다. 유형에는 static (기본값), relative, absolute, fixed가 있습니다.
- top: 지정된 요소를 기준으로 상단 위치를 지정합니다. position 속성 값이 absolute 또는 fixed인 경우에만 적용됩니다.
- right: 지정된 요소를 기준으로 오른쪽 위치를 지정합니다. position 속성 값이 absolute 또는 fixed인 경우에만 적용됩니다.
- bottom: 지정된 요소를 기준으로 하단 위치를 지정합니다. position 속성 값이 absolute 또는 fixed인 경우에만 적용됩니다.
- left: 지정된 요소를 기준으로 왼쪽 위치를 지정합니다. position 속성 값이 absolute 또는 fixed인 경우에만 적용됩니다.
예제 코드:
<html>
<head>
<style>
header {
background-color: lightgray;
height: 50px;
display: block;
text-align: center;
}
nav {
background-color: lightblue;
height: 50px;
display: block;
text-align: center;
}
main {
background-color: lightgreen;
display: block;
}
section {
background-color: lightyellow;
display: inline-block;
width: 30%;
height: 200px;
margin: 10px;
vertical-align: top;
}
footer {
background-color: lightgray;
height: 50px;
display: block;
text-align: center;
}
</style>
</head>
<body>
<header>Header</header>
<nav>Nav</nav>
<main>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
</main>
<footer>Footer</footer>
</body>
</html>
이 예제에서는 header, nav, footer 요소에 display: block 속성을 적용하여 각 요소가 블록 요소로 표시됩니다.
또한, main 요소 내의 section 요소에 display: inline-block 속성을 적용하여 인라인 블록 요소로 표시합니다.
이를 통해, main 요소 내에서 section 요소들이 수평적으로 나열됩니다.
반응형