고정 헤더 영역
상세 컨텐츠
본문
반응형
CSS 포지셔닝이란?
- 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할 지를 결정하는 것이 float 속성과 position 속성이다. 박스 모델의 패딩이나 마진, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 그리고 같은 내용이더라도 어떻게 배치를 하고 어떤 배경과 색상을 사용할 지에 따라 다른 레이아웃으로 만든다.
box-sizing 속성 - 박스 너비 기준 정하기
- 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다. CSS의 width 속성은 콘텐츠 영역의 너비를 나타낸다. 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 한다.
box-sizing: content-box | border-box
속성
- content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용한다. 기본 값이다.
- border-box : width 속성 값을 콘텐츠 영역에서 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다.
<html>
<head>
<meta chartset="utf-8">
<style>
.box1 {
box-sizing: content-box;
width: 300px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 20px;
}
.box2 {
box-sizing: border-box;
width: 300px;
height: 200px;
border: 1px solid red;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box1">동해물과 백두산이 마르고 닳도록..!</div>
<div class="box2">동해물과 백두산이 마르고 닳도록..!</div>
</body>
</html>
실행 화면
- 너비 계산 > 콘텐츠 영역 + 좌우 패딩 + 좌우 테두리
float 속성 - 왼쪽이나 오른쪽으로 배치하기
- float 속성은 웹 요소를 문서 위에 떠 있게 만든다. 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻이다.
float: left | right | none
속성
- left : 해당 요소를 문서의 왼쪽으로 배치한다.
- right : 해당 요소를 문서의 오른쪽으로 배치한다.
- none : 좌우 어느 쪽으로도 배치하지 않는다.
<html>
<head>
<meta chartset="utf-8">
<style>
.title {
width: 100px;
height: 100px;
float: left;
magin-right: 10px;
}
</style>
</head>
<body>
<div class="title">
애국가
</div>
<p>동해물과 백두산이 마르고 닳도록</p>
<p>하느님이 보우하사 우리나라 만세</p>
<p>무궁화 삼천리 화려 강산</p>
<p>대한 사람 대한으로 길이 보전하세.</p>
</body>
</html>
실행 화면
clear 속성 - float 속성 해제하기
- float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 그래서 float 속성이 더 이상 유용하지 않을 때 clear 속성을 사용한다.
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
}
.box1 { float: left; border: 2px solid green;}
.box2 { float: right; border: 2px solid blue; }
.box3 { border: 2px solid red;}
.box4 { clear: both; border: 2px solid yello; }
</style>
</head>
<body>
<div class="box1"></biv>
<div class="box2"></biv>
<div class="box3"></biv>
<div class="box4"></biv>
</body>
</html>
실행 화면
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] 표 스타일 (1) (0) | 2021.05.06 |
|---|---|
| [CSS 기초] 다단으로 편집하기 (0) | 2021.05.03 |
| [CSS 기초] 여백을 조절하는 속성들 (0) | 2021.04.28 |
| [CSS 기초] 테두리 관련 속성들 (0) | 2021.04.27 |
| [CSS 기초] CSS와 박스 모델 (0) | 2021.04.26 |
댓글 영역