> position
MDN형님은 position에 대해 "요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다."라고 요약해 주셨다.
박스가 있고 상대방이 있고 좌표라니.. 상대적 위치가 있는 박스라는 말인가보다.
화면 안에서 박스의 위치를 설정하는 것을 명제로 알고 출발하겠다.
▶︎ position의 property value
구글링을 했을때와 달리 MDN 웹페이지에서 position을 검색하니 3개의
position 타이틀이 검색됐고 두번째 타이틀을 클릭하니 좀 다른 정의와 함께 값들에 대한
메뉴얼도함께 소개하고 있었다.
그리고 "CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다." 라고
좀 더 뭔가 친숙한 단어들로 다시 position을 설명해주셨다.
이로써 position의 핵심은 배치에 대한 것이 확실해 보인다.
position은 fixed, absolute, relative, static과 sticky라는 값을 가지고 있는데 고정된, 절대적인, 상대적인 등의 뜻으로 값들의 이름이 뭔가 직관적인 것만 같다.
종합해보자면 상대적인 것이 있고 그것으로부터 고정되거나 절대적인..
뭐가 어떻게 절대적이라는건지.. 하나씩 알아보도록 하겠다.
static은 기본값으로 모든 tag는 기본값으로
position: static상태다.
sticky는 사용 빈도를 고려해봤을 때 중요도가 떨어진다고 생각되어 일단 제외하고
다른 값들을 설명하는데 집중하겠다.
▶︎ position: fixed
<style>
body {
margin: 0;
height: 1500px;
background-color: lightsteelblue;
}
.container {
background-color: lightseagreen;
top: 50px;
left: 50px;
position: relative;
}
div {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
#blue {
position: fixed;
background-color: blue;
}
</style>
<section class="container">
<div></div>
<div id="blue"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>position: fixed가 적용된 파란 상자는 화면에 분명히 존재하지만
자신의 공간은 없으므로 다른 element(빨간 상자) 위에 둥둥 떠있다.
또한 스크롤을 움직여도 똑같은 위치에 고정되어 있다.
이러한 특성때문에 보통 페이지 navigation이나 로고등을 화면 어딘가에 고정(fixed)
시켜서 계속 출현시키고 싶을 때 fixed는 매우 유용하며 널리 사용된다.
예시코드에서는 상위 element인 container 안에 있기 때문에 빨간 상자과 겹쳐 있지만
<body>가 fixed의 최상위 element인 경우 기본값이 적용되어 browser 왼쪽 상단
구석에 위치하게 되는데 이는 fixed가 가지는 컨테이닝 블록의 특성 때문이다.
💡 컨테이닝 블록(containing block)
상위 element의 면적이 자신에게 속해있는 하위 element의 크기와 위치에 영향을
주는 것을 컨테이닝 블록이라고 한다.
🥕 컨테이닝 블록 식별: https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block#%EC%BB%A8%ED%85%8C%EC%9D%B4%EB%8B%9D_%EB%B8%94%EB%A1%9D_%EC%8B%9D%EB%B3%84
<style>
#전지현 { position: fixed; }
</style>
<div id="전지현">전지현</div>
<div>김수현</div>💡 fixed의 컨테이닝 블록
뷰포트(viewport, 웹페이지가 사용자에게 보여지는 영역),
페이지로 나뉘는 매체인 경우 페이지 영역에서 가장 바깥쪽으로
스마트폰의 browser의 경우 보여지는 페이지의 가장 외곽 테두리를 말함.
▶︎ position: relative
/* fixed 예시코드에서 수정/추가 부분만 표기. */
#blue {
position: relative;
top: -50px;
left: -50px;
}
나란히 줄서있는 빨간상자들 사이에 파란상자가 빼꼼 삐져나와 있다.🙉
position: relative가 적용된 파란상자에 초기값만 적용되면 빨간상자들 사이에
나란히 위치하게 된다.
하지만 top, left 등의 property를 적용하면 다른 element들의 위치에 영향을
주지 않으면서 주변 tag들과 맥락상 상대적(relative)으로 자신의 초기값 위치를 기준으로
설정한 값에 따라 이동한다.
또한 파란상자가 차지하고 있어야할 원래의 위치와 공간은 유지된 다는 것을 기억하자.
💡 relative 컨테이닝 블록
가장 가까운 상위 블록 컨테이너(inline-block, block, list-item 등의 요소),
또는 가장 가까우면서 맥락을 형성하는 상위 요소(table, flex, grid 혹은
블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됨.
▶︎ position: absolute
/* fixed 예시코드에서 수정/추가 부분만 표기. */
#blue {
position: absolute;
}
파란상자가 아예 자신의 위치와 공간을 버리고 뛰쳐나왔다.
absolute는 자신의 가장 가까운 상위 element를 기준으로 상자의 위치가 정해진다.
문서의 맥락에서 본래 자신이 있어야할 곳으로부터 독립(absolute)된 것이다.
그래서 relativ 예시코드에서 top이나 left를 수정하지 않고
position을 absolute로 바꾸기만 했음에도 위치가 완전히 달라졌다.
또한 파란상자 크기의 공간이 사라져 빨간 상자들이 그만큼 위로 올라붙어서
전반적인 문서형태의 변형도 발생했다.
💡 absolute 컨테이닝 블록
position 속성 값이 static이 아닌 fixed, absolute, relative, sticky 중에서
가장 가까운 상위 element 내부 여백 영역.
> display
display는 element를 block과 inline으로 설정하며,
각각의 특성을 바탕으로 하위 element를 배치할 때 사용한다.
▶︎ display의 property value
HTML tag들을 배울 때 어떤 tag는 가로 한줄을 다 차지하여 다음 tag의 내용이
아랫줄로 이동하는 경우도 있었고, 여러개의 tag가 가로로 나란히 배치되기도 했다.
<div>나 <p> tag는 1개의 tag가 가로 한줄을 다 차지하는데 이런 특성을
block level이라고 한다.
<span>이나 <a> tag는 자신의 상위 tag의 너비만큼 가로로 각각의 element들이
연달아 배치 되는데 이러한 이를 inline level이라고한다.
이 특성들은 CSS의 display attribute를 통해 바꿔줄 수 있다.
▶︎ display: block
<style>
.container {
padding: 5px 0px;
top: 50px;
left: 50px;
position: relative;
background-color: lightseagreen;
}
div {
width: 100px;
height: 100px;
margin: 15px;
background-color: red;
}
</style>
<section class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>하나의 <div>는 가로 한줄을 다 차지(block)하기 때문에 빨간상자들이
한개씩 세로로 배치되었다.
초기값으로 상위 element의 크기만큼 가로줄을 차지하는데, 만약 body 바로 아래
사용한다면 body의 너비만큼의 가로면적을 갖는다.
width와 height property가 적용되며 margin, padding, border을
부여하면 주변 element들이 밀려나게 된다.
이런 성질을 <a>나 <span>에게도 부여하고 싶다면 해당 tag에게
display: block을 선언해주면 된다.
▶︎ display: inline
/* display: block 예시코드를 바탕으로 추가/변경된 부분만 작성함*/
<style>
div {
width: 1000000000000000px;
height: 1000000000000000px;
margin-top: 1000000000000000px;
margin-bottom: 1000000000000000px;
margin-left: 15px;
margin-right: 15px;
/* padding-bottom: 1000000000000000px; */
padding-left: 50px;
padding-right: 50px;
display: inline;
color: white;
font-size: 20px;
}
.blue {
background-color: blue;
}
</style>
<section class="container">
<div class="blue">inline6</div>
<div class="blue">inline7</div>
<div class="blue">inline8</div>
<div class="blue">inline9</div>
<div class="blue">inline10</div>
</section>
<!-- <div style="top: 1000px; font-size: 70px; position: relative; left: 300px; background: black; color: white; padding: 10px;">슝~</div>
<div style="top: 500px; font-size: 70px; position: relative; left: 120px; background: black; color: white; padding: 10px;">슝~</div>
<div style="top: 1500px; font-size: 70px; position: relative; left: 250px; background: black; color: white; padding: 10px;">슝~</div>
<div style="top: 2000px; font-size: 50px; position: relative; left: 120px; background: yellow; color: red; padding: 10px;">서울까지 1000000km 남았습니다.</div> -->inline은 block과는 거의 상반되는 특징을 가지는데
초기값으로 자신의 content 너비만큼만 가로면적을 차지(inline)하기 때문에
상위 tag의 너비가 허용하는 만큼 여러개의 element가 가로로 늘어선다.
<span>이나 <a> tag는 초기값이 inline이므로 똑같이 동작한다.
width와 height property 역시 block과 반대로 적용되지 않는다.
margin, padding, border의 top과 bottom을 미국의 1년 국방비만큼
줘도 공간적으로 적용되지 않아서 다른 줄에 있는 element들이 밀려나지도 않는다.
(💡 margin/padding/border-left/right는 적용 된다.)
❗️
inline이 적용되면 text나 image 등 content를 가지고 있지 않은 경우
화면에 표시되지 않는다.
inline으로는 아래와 같은 것을 할 수 있다.(🤗 예시코드에서 주석처리한 부분 해제)
▶︎ display: inline-block
/* display: block 예시코드를 바탕으로 추가/변경된 부분만 작성함*/
<style>
body {
margin: 0;
height: 1500px;
background-color: lightsteelblue;
}
.container {
display: inline-block;
height: 300px;
width: 500px;
}
div {
display: inline-block;
}
</style>inline처럼 자신의 content 너비만큼만 가로면적을 차지한다.
그러면서도 block처럼 width와 height, margin과 padding border값을
적용받을수 있어서 tag에 content가 없어도 자유롭게 공간을 설정할수 있기 때문에
활용성이 우수하다.
inline과 block의 장점을 모두 모아놓은 것 같은 아이다!👍👍
> 참고자료 💕
▶︎ MDN - Box model
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model
▶︎ 드림코딩 by 엘리 - css 레이아웃 정리 display, position 완성
https://www.youtube.com/watch?v=jWh3IbgMUPI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=8
▶︎ DaleSeo - [CSS] display 속성: inline, block, inline-block
https://www.daleseo.com/css-display-inline-block/
🌈 작은 회고 🤔
이제 당분간은 FrontEnd를 주제로 하는 블로그는 지양하고
BackEnd에 대한 글만 써보려 한다.
둘 다 다루고싶은 욕심은 있지만 글 쓰는 속도가 느린 편이라
지금은 아니라는 판단이 들었기 때문이다.
며칠 전부터 결정했었고 BE에 집중하려 마음먹은 후부터
FE 관련 글을 쓰는데 흥미가 훅가셔서 정말 큰 스트레스를 받았었다.
굳이 안쓰고 넘어가도 되긴 했지만 중간에 포기하는게 싫었다.
그런데도 막상 때가 되니 아쉽기도 하고 또 글을 쓰다보니 이해가 많이 되서
재미가 붙어버린게 약간 난감묘시기한 기분이 들기도 하지만..🙄
결단력이 필요한 때이기 때문에 예정대로 진행하는것으로!!
오늘도 누군가에게 작게라도 도움이 되기를 바라며 글을 마친다.🙋🏻♂️
