웹에서 element들의 배치(레이아웃)을 조정하는 것은 매우 중요하다.
순차적으로 내용을 설명하며 position property 사용에 대한 이해를 높여보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
</div>
<script src="script.js"></script>
</body>
</html>
위에 작성된 html문서를 보면
div 태그를 이용하여 "container"와
그 아래 자식 태그들("box1", "box2", "box3")이 있다.
우선 첫번째 질문은,
div는 inline 일까, block 일까?.box1, .box2, .box3 { background-color : yellow; }
확인을 위해 다음과 같이 box 자식들에 대하여 배경을 노란색으로 지정했다.
두 번째 질문은 실습을 해보며 찾게 됐다.
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
div의 content가 비어있다. 이때,
.container {
background : skyblue;
}
를 통해 parent div의 배경을 지정하면, 결과는 어떻게 될까?
배경이 정말 하늘색으로 보일까?
확인해보자.
아무것도 출력되지 않는다.
width를 지정해도 결과는 똑같았다.
심지어!!!!
height = 100%; 라고 넣어도 결과도 똑같았다.
그 이유는 body가 "없기"때문이다.
'개발자도구'를 통해 확인해보자.
확인결과, 높이가 '0'으로 나오고 있음을 알 수 있다.
그래서 다시 CSS를 수정하였다.
html, body {
height : 100%;
}
.container {
height : 50%;
}
이렇게 말이다. 전체 페이지 중 50%만큼은 div(클래스명 : container)로
지정하겠다라고 정의하니 비로소 반영된 모습을 볼 수 있다.
(위의 예시는 body 및 div의 높이를 강제 지정하여 보이게 하였다.)
이제 정말 본론으로 들어가자(position)
아래와 같이 이해를 위해
.box1, .box2, .box3 에 대해서 배경 색깔을 달리 하였다.
.box1 {
position : static;
}
이라고 해보자.
즉, static은 본디 태그들의 기본 위치다.
특별한 언급이 없다면 default는 (position : static)인 것이다.
때문에,
default인 것을 굳이 명시할 필요가 없으므로
자주 보게되는 property는 아닌 것이다.
.box1 {
position : absolute;
}
다음과 같이 변했다.(변경 후)
이해를 돕기위해
.box1 {
position : absolute;
bottom : 0;
}
bottom 값을 0으로 주면 어떻게 될까?
즉, 더 이상 container에 구속된 움직임을 갖지 않는다.
이제 우리는
.box1 {
position : static;
top : 10px;
right : 10px;
}
이 어떻게 나올지 예상할 수 있다.
"top으로부터 10px, right로부터 10px 떨어진 곳에 배치하라"
.container {
background : skyblue;
position : relative;
}
관습적으로,
바로 위의 부모 태그에 position : relative; 라고 해왔지만, '공식'같은 것은 아니다.
단지, 바로 위 부모 태그에 대해(relative to) 자식 태그의 위치를 조정하는 것이 일반적인 작업 과정이기 때문이다.
(그래서 보통 부모 태그에 position :relative를,
자식 태그에 position : absolute를 하라고 하는게 이 때문이다.)
= "자식 태그를 부모 태그를 기준으로 absoulute하게 배치시키겠다."
하늘색 배경인 container 태그에 position :relative를 하고
노란색 배경인 box1 태그에 position : absolute을 해보자.
box1 의 위치는 이제 부모 클래스에 종속되어 배치가 이뤄진다.
부모 클래스의 relative to~
box1 입장 : "Okay, 내 position이 absolute라는 거 알겠어. top은 몇 px, right는 몇 px 만큼 떨어지게 배치되면 되는거지? 근데 누구에 대해(기준) 그렇게 absolute한 배치를 하라는 거니?"
대답 : "position : relative를 갖는 element에 대해서 그렇게 위치해 있어봐~"
아래 예시를 보자.
<body>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3
</div>
</div>
</body>
div(클래스명 container)가 box1, box2, box3 div를 포함하고 있다.
아래 CSS스타일링을 보자.
container(부모 태그)에 position : relative를,
box2에 position : absolute;를 했다.
.container {
position : relative;
}
.box1 {
width : 300px;
background : yellow;
}
.box2 {
position : absolute;
top : 0;
left : 300px;
width : 300px;
background : pink;
}
.box3 {
width : 300px;
background : skyblue;
}
container 로부터 box2는
왼쪽으로 300px, 위로부터는 0px 위치해 있을 것이다.
box 컴포넌트의 가로길이가 300px이었던 것을 상기하면
box2는 box1바로 옆에 붙어있을 것이다.
그 결과
(position : absolute'속성을 갖는 다른 태그가 없고, relative만 있는 경우)
.navbar {
position : fixed;
background-color : rgba(사용자 선택 부분)
}
(구분을 위해 배경색을 따로 지정해줬다.)
<body>
<h1>This</h1>
<h1>is</h1>
<h1>example</h1>
<p>And then</p>
<a href="#">this is a link</a>
</body>
<body>
<h1>This</h1>
<h1>is</h1>
<h1>example</h1>
<p>And then</p>
<a href="#">this is a link</a>
<a href="#">this is a link</a>
</body>
'this is a link' 바로 옆에 'this is a link'가 이어서 나오는 것을 알 수 있다.
그렇다면, a tag가 inline처럼 거동되는 것이 아닌,
block처럼(line-break) 나타내게 할 수는 없을까?
a {
display : block;
}
inline element인 a 태그에
display : block; 라고 해봤다.
결과는
this is a link
this is a link
(ex. margin-top, padding-bottom )
- block : 요소들 간의 줄바꿈 됨, margin 및 padding 모두 적용됨
- inline : 요소들 간의 줄바꿈 안 됨, margin/padding의 상, 하 값 적용 안 됨
a {
background-color : gray;
width : 100px;
height : 100px;
}
a 태그는 inline element로써, width와 height를 추가로 지정해주었음에도
아래와 같이 변화가 없는 것을 확인할 수 있다.
a {
display : block;
background-color : gray;
width : 100px;
height : 100px;
}
display: block; 지정을 하고 결과를 보면,
block element처럼 거동됨을 확인할 수 있다.
'inline-block'은 기본적으로는 inline속성을 따르며,
block 속성 또한 가지고 있다.
아래를 보자.
a {
display : inline-block;
background-color : gray;
width : 100px;
height : 100px;
}
- One step at a time -