7. 포지셔닝
1) box-sizing :박스 너비 정하기
width, height, margin, padding, border 지정
박스모델의 너비 = 컨텐츠 크기 + 좌우 padding
+ 좌우 border 두께 + 좌우 margin => 전체요소 너비
box-sizing 속성값
content-box : width로 지정하는 범위가 컨텐츠 영역의 너비로 사용(dafault)
border-box : width로 지정하는 너비가 테두리까지 포함한 너비로 사용
<!DOCTYPE html>
// 박스 포지션 설명
<html lang="en">
<head>
<meta charset="UTF-8">
<title>selector</title>
<style>
.box1{
box-sizing: content-box;
background-color: yellow;
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 2px solid red;
}
.box2{
box-sizing: border-box;
background-color: lightblue;
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="box1"> content-box </div>
<div class="box2"> border-box </div>
</body>
</html>
2) float 속성
:요소를 문서위에 떠있게 만들어 왼쪽/ 오른쪽으로 배치
left : 왼쪽배치
right : 오른쪽배치
non: 좌우 어느쪽도 배치 x
float 속성해제 : clear 속성
:float 속성을 요소에 사용하면 다음에 오는 다른 요소들도
속성이 전달되어, 배치가 원하는 방식으로 이루어지지 않을 수 있다.
float 속성이 더이상 유용하지 않다고 알려주는 속성이 필요한데
그것이 clear이다.
left : float: left적용한것 해제
right : float:rigt 적용한것 해제
both : 좌우상관없이 기본상태로 되돌릴때 사용
<!DOCTYPE html>
//float 설명
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
background-color: yellow;
width: 200px;
height: 150px;
margin: 10px;
padding: 30px;
float: left;
}
.box2{
background-color: lightblue;
width: 200px;
height: 150px;
margin: 10px;
padding: 30px;
float: left;
}
.box3{
background-color: orange;
width: 200px;
height: 150px;
margin: 10px;
padding: 30px;
clear: both
}
.box4{
background-color: turquoise;
width: 200px;
height: 150px;
margin: 10px;
padding: 30px;
clear: both
}
</style>
</head>
<body>
<div class="box1"> box1 </div>
<div class="box2"> box2 </div>
<div class="box3"> box3 </div>
<div class="box4"> box4 </div>
</body>
</html>
3) position 속성
-static (default)
다른 태그와의 관계에 의해 자동으로 배치
- relative
원래 배치되어야하는 위치를 기준으로, 좌표로 지정
- absolute
가장 가까운 위치에 있는 position 속성이 relative인 부모 요소를 기준으로,
left, right, top, bottom 값으로 요소 위치 지정
position 속성이 relative인 부모가 없으면 body를 기준으로 위치
- fixed (고정 위치)
화면에 보여지는 영역을 기준으로 특정 위치에 배치
(스크롤 해도 고정- 따라다님)
'WEB Creator > [CSS]' 카테고리의 다른 글
| [CSS] 9 - Flexbox (0) | 2022.06.07 |
|---|---|
| [CSS] 8 - media query 미디어쿼리 (0) | 2022.06.07 |
| [CSS] 3 - 적용 스타일과 박스 모델 (0) | 2022.05.31 |
| [CSS] 2 - 선택자 (0) | 2022.05.31 |
| [CSS] 1 - 개념과 적용 방법 (0) | 2022.05.31 |