우선 이번 아티클에서는 다음 두 가지 요소에 대해서 다루게 됩니다. 그런데 이렇게 먼저 정리를 하며 설명하는 이유는 새롭게 배우게 되는 두 가지 요소가 연계되어 사용되기 때문입니다.
우선 이 챕터에서는 position 속성에 대해서 배우게 되고, 요소의 위치 속성(left, right, top, bottom)에 대해서 배웁니다. 그럼 position과 위치 속성이 각각 어떻게 영향을 미치게 될지에 대해서도 고민해 보도록 합시다.
○ 요소의 위치 속성 : left, right, top, bottom
위 네 가지 속성은 특정 요소의 스타일 속성에서 사용하게 되면, 해당 요소가 "기준 위치로부터" 얼마나 떨어져 있는지를 지정하게 됩니다. 간단하죠? 각각의 방향에 px 값을 부여하면 해당 요소가 왼쪽으로부터(left) 얼마나 떨어져 있는지 - 정하게 됩니다.
그런데 이 단순한 위치 설정이 position과 무슨 관계가 있을까요? 다름이 아닌 해당 요소의 위치 속성이 해당 요소의 position 속성의 종류에 따라 적용되기 때문입니다. 아무 요소에 left, right, top, bottom 속성 값을 지정한다고 해당 요소의 위치 값이 변하는 것이 아닙니다. 우선은 간단한 속성이니 사용 유형만 살펴보고 다음 메인 내용으로 넘어가 보겠습니다.
선택자 {
position: absolute;
left: 50px;
top: 50px;
}
○ 요소의 위치 배치 방식 : position
요소의 배치 방식을 지정하는, 상당히 중요한 속성이 바로 position입니다. 일부 HTML 기초 교재에서 이 position의 속성과 종류별 설명을 아주 불성실하게 해 두는 바람에 초심자들에게 시간낭비를 시키고 있기도 하죠. float 속성과 더불어 position은 애초에 '한 문장으로 정의하기 어려운' 개념입니다. 차근차근 정공법으로 살펴봅시다.
우선 position은 네 가지 종류를 갖게 됩니다. static / relative / absolute / fixed가 그 종류죠. 주의해야 할 점은, 여기서 기존 단어가 가진 뜻이나 맥락과도 다른 성질을 갖는 부분도 있다는 것입니다. 하나씩 살펴보도록 하겠습니다.
▷ static
static은 말 그대로 position 방식의 default입니다. 즉, 직접 지정해서 선언해도 되지만 별도의 position 선언이 없다면 자동으로 static으로 지정됩니다.
그럼 position 속성에서의 기본 값은 무엇을 의미할까요? 다름 아닌 요소들이 그냥 순서대로, 딱 붙어서 순서대로 HTML의 흐름에 맞춰서 배치되는 것을 의미합니다. 해당 요소에 대해서 어떤 위치 값을 임의로 바꾸는 것도 해당되지 않습니다. 위에서 설명한 left, right, top, bottom이 먹히지 않죠. 단순하게 <div> 태그 세 개를 가지고 배치해두면 그냥 순서대로 블럭 라인 요소 속성을 기반으로 하나씩 배치됩니다. 다음 예제를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>position</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css_example.css">
</head>
<body>
<main>
<div>static</div>
<div>static</div>
<div>static</div>
</main>
</body>
</html>
main {
width: 500px;
height: 600px;
background: purple;
}
div {
width: 300px;
height: 100px;
border: 1px solid;
background: rgb(22, 177, 61);
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
div:nth-of-type(2) {
position: static;
background:rgb(249, 255, 71);
opacity: 0.8;
}
기본적인 static 속성은 확인했으니, 다음 아티클에서 다른 속성들을 살펴보겠습니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 3 : absolute (1) | 2023.04.25 |
|---|---|
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 2 : relative (0) | 2023.04.24 |
| [CSS] 4. 레이아웃 설계(2) - float 3 : 3단 레이아웃 (0) | 2023.04.20 |
| [CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 (0) | 2023.04.18 |
| [CSS] 4. 레이아웃 설계(2) - float 1 (0) | 2023.04.17 |
