HTML의 position property, 그리고 Inline과 block value
✅ Position?
position은 약간의 위치 조정이 필요할 때 사용한다. position: fixed;는 화면 스크롤을 내려도 element(box)의 position이 고정된다. fixed를 사용하면 layer를 부수고 다른 layer에 위치시킬 수 있다. ‘가장 위’에 위치한다.
body {
height: 1000vh;
margin: 20px;
}
div {
width: 300px;
height: 300px;
color: white;
background-color: teal;
}
#different {
position: fixed;
background-color: lightcyan;
width: 200px;
}
<body>
<div></div>
<div id="different"></div>
</body>위 코드에서 different는 첫 시작시 div박스 아래에 위치하지만, 스크롤을 내리면 첫 시작점의 위치에서 고정된 채 fix된다. fixed값이 없는 div는 스크롤 위로 사라진다. 이는 netflix 등 타 사이트에서 자주 사용되는 기술이다.
이때 different에 top이나 left right bottom opacity 등의 값을 주면 div의 위치로 겹쳐진 채, 스크롤을 내릴때에도 fix된다. 반면 fixed값이 없는 div는 화면에서 out된다.
body {
height: 1000vh;
margin: 50px;
}
div {
width: 300px;
height: 300px;
background-color: salmon;
}
.green {
background-color: paleturquoise;
width: 100px;
height: 100px;
position: relative;
top: -10px;
left: -10px;
}
<div>
<div class="green"></div>
</div>position: relative;는 element가 처음 위치를 기준으로 조금씩 이동할 수 있게 해준다. 위 코드에서 class name이 green인 div가 position: relative에 의해 상단 div보다 top과 left를 -10 옮겨진 상태로 출력된다.
하지만 margin-top과 margin-left를 사용했다면 css collapse 현상으로 margin-top이 적용되지 않는 점을 유의해야 한다. css collapse현상이란 예를 들어, 두 개 margin의 경계가 겹쳐있을때 두 margin은 하나로 취급된다. 이는 좌, 우가 아닌 상단과 하단 값에서만 일어난다. 이를 collapse margin이라 부르는데 위 css collapse의 대표적 예시이다.
정리하자면, position: relative;는 element가 처음 놓인 자리를 기준으로 주어진 값에 따라 상, 하, 좌, 우 모두 움직여 준다.
div {
position: relative;
}
.green {
background-color: paleturquoise;
width: 100px;
height: 100px;
position: absolute;
right: 0px;
}
<body>
<div>
<div class="green"></div>
</div>
</body>position: absolute; 는 top, left, bottom, right의 이동을 위해 사용할 수 있다. absolute는 가장 가까운 relative 부모를 기준으로 이동시켜준다. 위 코드중 absolute값이 있는 class name green의 relative 부모 element는 <body>이다. 따로 relative를 지정하지 않았기 때문에 자동으로 부모 element인 <body>가 기준이 된 것이다. 위 코드에서 green은 <body>의 가장 상단 우측에 위치한 모습을 보여준다. 모두 <body>가 기준이 되었기 때문이다.
만약 <div class="green">의 상위 <div>를 absolute의 기준점으로 삼고 싶다면, <div>에 position: relative; 값을 준다. 즉, position: absolute;를 사용할 때엔 늘 기준점이 될 element를 지정해야 하므로, position: relative;가 따라다녀야 한다고 볼 수 있다.
✅ Inline & Block
💡 Block Tag
ex) div, p, header …
tag 중 옆에 다른 tag가 붙을 수 없으며 한 줄 전체를 차지하는 tag를 block tag라 한다.
💡 Inline Tag
ex) span, img, ahref …
inline tag는 tag 옆 다른 tag가 붙을 수 있다.
inline은 height와 width가 없는 반면, block은 height와 width 값이 존재한다. 대부분의 box들은 block이다. 이는 block이 아닌 종류를 기억하는 게 훨씬 빠를 정도이다.
span {
display: block;
}display: block;값이 적용되면 inline tag가 block tag로 변경된다. 만약 display를 설정하지 않았다면 browser는 tag의 기본적인 inline이나 block 값을 자동으로 인식한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</body>
</html>p {
display: inline;
width: 200px;
height: 200px;
}block을 inline으로 바꿨지만 height나 width값이 화면으로 반영되지 않는 현상이 있다. 어떤 element들은 inline으로 적용됐을 때엔 높이와 너비를 가질 수 없기 때문이다.
마찬가지로 Inline tag인 <span>으로 화면을 구성한다면 inline이 height와 width가 없는 특성으로 인해 margin의 좌우값은 적용되지만 상하값이 적용 되지 않는다. 상하값을 원한다면 inline 요소를 block으로 바꿔주어야 한다. 하지만 inline에서도 padding은 상하좌우 모두 적용된다. 이처럼 HTML은 현재까지도 여러 복잡한 특성들을 지니고 있는데, 이를 이해하며 코드를 작성해야 오류를 캐치할 수 있다.
display: inline-block 으로 width, height로 인해 설정되지 않던 inline을 적용해줄수있다. 하지만 inline-block은 default값에 문제가 많다고 여겨진다. 또한 창 크기가 달라질 때마다 영향을 받으므로 감수해야 할 불편함이 많다.
