절대 단위 : 고정된 값을 출력 (출력장치의 물리적 속성을 아는 경우 효율적)
→ in, cm, mm, pt, pc
상대 단위 : 다른 요소의 크기에 영향을 받아 크기가 변함 (호환성을 유지하는데 유리)
→ em, ex, px, %
자주 사용하는 상대 단위
em : font_size, 해당 폰트의 대문자 M의 너비를 기준으로 함
ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함
px : pixel, 출력장치에 따라 상대적인 크기를 가짐
% : percent, 기본 글꼴의 크기에 대하여 상대적인 값을 가짐
위치 지정하기
1. static
모든 요소의 default 값이다.
포지션 속성을 따로 설정하지 않았을 때 자동으로 적용되는 것
가장 위쪽, 왼쪽에 배치된다.
2. relative
위치를 이동하고 싶을 때 사용하는 태그
top, right, bottom, left를 이용해서 조절 가능
css코드
body{
background-color: black;
}
div{
width : 300px;
height : 300px;
background-color: white;
position : relative;
top : 30px;
left : 50px;
}출력 결과
3. absolute
absolute 또한 위치를 이동하고 싶을 때 사용하는 태그이며 top, right, bottom, letf를 이용해서 조절할 수 있다.
relative와 absolute의 차이점은
relative → static 속성을 기준으로 상대적인 위치를 지정
absolute → stacic 속성이 아닌 요소를 기준으로 상대적인 위치를 지정
html
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<link rel ='stylesheet' href = './style.css'/>
</head>
<body>
<div class = 'box1'>
relative
<div class = 'box2'>
absolute
</div>
</div>
</body>
</html>css
body{
background-color: lightgreen;
}
.box1{
position:relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
background-color: yellow;
}
.box1 .box2{
position:absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
}출력 결과
노란색 박스의 위쪽과 왼쪽으로부터 100px씩 떨어져 있는 파란색 박스가 보인다.
부모 태그인 relative를 기준으로 위치를 지정하는 게 바로 absolute이다
4. fixed
fixed는 위치를 고정해주는 역할이다.
html
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<link rel ='stylesheet' href = './style.css'/>
</head>
<body>
<div class = 'box1'>
relative
<div class = 'box2'>
absolute
</div>
</div>
<div class = 'box3'>
fixed
</div>
</body>
</html>css
body{
background-color: lightgreen;
}
.box1{
position:relative;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
background-color: yellow;
}
.box1 .box2{
position:absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 1000px;
background-color: aquamarine;
}
스크롤을 움직여보면 민트색 박스만 고정되어 있고 다른 요소들은 움직이는 것을 볼 수 있다.
★ 정리하기 ★
✔ 상대 단위
- em, ex, px, %
✔ position
- static
- relative
- absolute
- fixed
'Web 개발 > [HTML,CSS]' 카테고리의 다른 글
| [HTML/CSS] 8. Flex (0) | 2022.07.08 |
|---|---|
| [HTML/CSS] 7. 도형만들기 (0) | 2022.07.08 |
| [HTML/CSS] 5. 클래스 , 패딩과 마진 (0) | 2022.07.01 |
| [HTML/CSS] 4. css (0) | 2022.07.01 |
| [HTML/CSS] 3. 중요태그 정리 (0) | 2022.06.30 |
