위코드 3일차! 오늘의 시작은 replit을 이어서 푸는 중에 나온 css 의 layout에 관하여 정리하는 것으로 해보려한다.
1. DISPLAY
display는 css에서 레이아웃을 제어할 수 있는 중요한 property이다. 이 display의 속성에는 수많은 종류가 있지만 지금 시간에는 그 중에서도 대부분의 inline, inline-block, block에 대해서 다뤄보려한다.
(1) inline
: 대표적으로 <span>과 <a> 태그가 있다. 인라인 엘리먼트 단락 안에서는 이만큼만 포함하고 있어서 해당 단락의 흐름을 방해하지 않고 내용을 감쌀 수 있다.
(2) block
: 대표적으로 <div> , <header> , <footer> , <section> 등의 태그들이 있다. 이 블록 엘리먼트는
(3) inline-block
: inline-block과 같은 경우엔 inline 엘리먼트처럼 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
그럼 inline 과의 차이점은 무엇일까? inline-block의 경우엔 width나 height 크기를 조절하는 속성을 지정할 수 있다.
대표적으로는 <button>이나 <input>, <select> 태그가 있다.
⌨️ 입력
<span style="background-color:lightgreen; display: inline;width: 150px; height:60px; padding:10px; margin-left: 20px;"> inline 입니다.</span>
<span style="background-color:lightgreen; display: inline-block; width: 150px; height:60px; padding:10px; margin-left: 10px;"> inline-block 입니다.</span>💻 출력
inline 입니다.
inline-block 입니다.
2. POSITION
position은 객체들의 위치를 지정하는 property이다. 대표적으로는 relative, absolute, fixed 등이 있다.
(1) relative
: relative는 별도의 property 값을 지정하지 않는 이상 기본인 static과 동일하게 작용한다.
하지만 <divrelative 가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 기본 위치가 다르게 조정이 된다.
⌨️ 입력
<div class="fir" style="border: 10px solid lightgreen; position: relative; width: 120px; height: 120px;">
1</div>
<div class="sec" style="border: 10px solid lightblue; position: relative; top: -100px; left: 30px; width: 120px; height: 120px;">
2</div>
💻 출력
예시를 보면 이 때에 입력되는 수치가 right: 30px 이지만 오른쪽으로 30px만큼 가는 것이 아니고, 30px 만큼 공백을 주는 것을 볼 수 있다. 즉 right: 30px 과 left: -30px 은 같은 수치이다.
또한 위의 예시와 이 글의 사이에 있는 여백은 따로 구현한 것이 아니라 class="sec" 의 공간만큼 비어있는 것이다.
(2) absolute
: absolute는 다루기가 가장 까다로운 위치 지정 값이라고 볼 수도 있다. absolute의 경우에는 relative와 다르게 위치를 이동한 후 자신이 기존 위치한 곳의 여백을 지워버린다. 그렇기 때문에absolute 태그로 위치를 지정하게 되면 다른 객체들의 위치도 absolute로 지정해야하기에 까다롭다 여기는 것 같다.
relative와는 다르게 뷰포트의 좌측 상단을 0,0 을 기준으로 절대값을 지정해준다.
또한 이렇게 absolute로 지정한 객체는 스크롤의 움직임에도 그 위치에 고정되어 따라오게 된다.
부모 엘리먼트가 존재하는 경우에 따라 그 부모 엘리먼트의 좌측 상단을 기준으로 삼게 되고, 이 경우엔 스크롤을 움직였을 때 객체는 따라오지 않게 된다.
⌨️ 입력 <div style="border: 10px solid lightblue; position: relative; width: 300px; height: 200px;">
relative 예시입니다
<div style="border: 10px solid lightgreen; position: absolute; top:20px; left: 20px; width: 120px; height: 80px;"> absolute 예시입니다
</div>
</div>
💻 출력
위의 예시는 absolute 의 예시만 띄울 경우, 게시물을 읽기에 방해가 되는 것 같아 부모 엘리먼트를 만들었다.
(3) fixed
: fixed의 경우엔 단어 그대로 위치를 고정시키는 엘리먼트로 뷰포트에 상대적으로 위치가 지정되는데, absolute의 기본 사항과 마찬가지로 지정한 객체가 스크롤의 움직임에도 그 위치에 고정되어 따라오게 된다.
⌨️ 입력 <div style="border: 10px solid lightblue; position: relative; width: 300px; height: 200px;"> relative 예시입니다
<div style="border: 10px solid pink; position: fixed; bottom:0; right: 0px; width: 120px; height: 80px;"> fixed 예시입니다
</div>
</div>
💻 출력
처음 이 포스팅을 확인한 순간부터 스크롤을 내리는 과정 중에도 우측 하단 구석부분에 fixed가 떠있었다.
이는 absolute와는 다르게 부모 태그가 있어도 빠져나와 본인의 역할을 수행함을 볼 수 있다.
또한 absolute와 마찬가지로 자신이 기존 위치한 곳의 여백을 지워버린다.
