개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.
1월 25일(화)
position(CSS)
position
- position은 레이아웃을 배치하거나, 객체를 위치시킬 때 사용하는 CSS속성이다.
- position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right)의 위치를 설정할 수 있다.
position 속성
- static(기본값) : 위치를 지정하지 않을 때 사용한다.
- relative : 위치를 계산할 때 static의 위치를 기준으로 계산한다.
- absolute : 원래의 위치와 상관없이 위치를 지정할 수 있으며, 가장 가까운 상위 요소를 기준으로 위치가 결정된다.
- fixed : 원래의 위치와 상관없이 위치를 지정할 수 있으며, 상위 요소의 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다.
1. static
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: static;
}
div#c {
background: #C5FF63;
position: static;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</body>
</html>
(결과)
position:static 설정은 기본값이므로, position 속성을 설정해도 변화가 없다.
2. relative
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: relative;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: relative;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</body>
</html>
(결과)
position: relative 속성은 static의 위치를 기준으로 자신의 위치를 계산한다.
위의 그림 처럼 b영역은 원래의 위치에서 위(top) 0px, 왼쪽(left) 100px로 위치 시킨 것이고, c영역은 원래의 위치에서 위(top) 0px, 왼쪽(left) 200px로 위치 시킨것이다.
3. absolute
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
</div>
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</body>
</html>
(결과)
position: absolute 속성은 static이나 relative 속성과는 달리 바깥으로 공간이 생기지 않는다.
위의 그림 처럼 absolute 속성의 위치는 상위 요소인 static의 위치를 기준으로 결정된다.
4. relative & absolute
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</div>
</body>
</html>
(결과)
위의 그림 처럼 position: relative (a영역) 안에 설정된 position: absolute (b영역, c영역)은 a영역부터 시작해서 위치가 결정됨을 알 수 있다.
5. fixed
<!DOCTYPE html>
<html>
<head>
<title>Position</title>
<style>
div {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: fixed;
top: 0px;
left: 200px;
}
</style>
</head>
<body>
<div id="a">
a 영역
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</div>
</body>
</html>
(결과)
position: fixed 속성은 브라우저 화면의 상대적 위치를 가진다.
따라서 화면이 바뀌어도 고정된 위치를 설정할 수 있고, 상위 요소에 영향을 받지 않는다.
inline / inline-block / block(CSS)
CSS에서 display 속성은 웹 페이지 상에 요소들이 어떻게 보여지고, 다른 요소들과 어떻게 상호 배치되는지를 결정한다.
inline
- display 속성이 inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.
- 대표적으로 <span>, <a> 태그가 display: inline 속성을 가진다.
- inline 요소를 사용할 때의 주의점은 width와 height 속성이 무시된다는 것이다. (해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하기 때문)
- 또한, margin과 padding 속성은 좌우 간격만 반영되며 상하 간격은 반영되지 않는다.
block
- display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가기 때문에, 다른 요소들을 다른 줄로 밀어내고 자기 혼자 한 줄을 모두 차지한다.
- 대표적으로 <div>, <p>, <h1> 태그가 display: block 속성을 가진다.
- block 요소는 inline 요소와 달리 width, height, margin, padding 속성들을 모두 반영할 수 있다.
inline-block
- display 속성이 inline-block으로 지정된 요소는 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.
- 하지만 inline 요소에서 불가능하던 width, height 속성 지정과 margin, padding 속성의 상하 간격을 지정할 수 있다.
- 대표적으로 <button>, <input>, <select> 태그가 display: inline-block 속성을 가진다.
- 참고로, inline-block 속성을 사용하려면 해당 요소의 스타일을 display: inline-block 으로 지정해줘야 한다.
참고 출처
'기타' 카테고리의 다른 글
| TIL - 22.01.29 (0) | 2022.01.29 |
|---|---|
| TIL - 22.01.28 (0) | 2022.01.29 |
| TIL - 22.01.27 (0) | 2022.01.27 |
| TIL - 22.01.26 (0) | 2022.01.26 |
| TIL - 22.01.24 (0) | 2022.01.24 |
댓글