[Css3] #2. Layout

김상웅·2022년 5월 24일

CSS WeCode absolute block display fixed inline inline block layout position relative 위코드

[Computer Science]

목록 보기

2/10

이제 HTML5의 다양한 태그를 복습해보았으니, 그 태그들의 위치를 잡아주는 css의 속성을 복습해볼 차례입니다.
아마 코딩을 하다보면 좌측 화면엔 코드를, 우측 화면엔 렌더링되는 결과물을 켜놓고,
아무 생각 없이 flex와 position의 속성 값을 이것저것 넣어보면서 위치를 잡는 자신을 발견할 때가 있을 것입니다. (누가 내 얘기하는듯..)

요새는 flex를 많이 쓴대~
top에 고정시키려면 position: fixed 써야지~
처럼 생각없이 적는 코드는 이제 없다!

display 속성의 값이 inline block inline-block 인 요소들의 특징과 차이점,
position 값에 따라 요소가 어떻게 배치되는지를 알아보겠습니다.
이번 복습을 통해 layout을 구성하기 위해 요소를 원하는 자리에 더 수월하게 배치할 수 있게 되었네요

물론 이번 포스팅에서도 반성을 많이 해보았습니다..

📌 display 속성

우선 HTML 태그들이 어떤 display속성을 갖고 있는지 알아보겠습니다.
그리고 각각의 속성을 지닌 요소들이 어떻게 렌더링되는지 직접 확인해보겠습니다.

{ display: inline }
inline 태그 요소가 가지는 값의 크기만큼 너비를 지닙니다.

inline 속성의 대표적인 요소는 span태그입니다. (div처럼 아무런 의미가 없습니다.)

우전 width값을 설정하지 않은 코드를 작성해보겠습니다.

<span>안녕하세요</span>
<span>저는</span>
<span>김상웅입니다.</span>

렌더링되는 화면은 다음과 같습니다.

모든 span 요소의 텍스트가 붙어서 나오는 것을 확인할 수 있네요.

그럼 이번에는 span 요소의 너비를 viewport의 너비보다 크게 설정해보겠습니다.

<span style="width: 500px; background: yellow">안녕하세요</span>
<span>저는</span>
<span>김상웅입니다.</span>

렌더링 되는 화면은 다음과 같습니다.

inline 요소는 다음과 같은 특징을 가집니다.

margin 값에 영향을 받지 않습니다.
width와 height 속성이 적용되지 않습니다.
이어진 요소들 사이의 margin 값이 자동 적용됩니다. (첫번째 코드 및 사진 참조)

{ display: block }
block 태그는 width: 100% 값이 자동 적용됩니다. (width 설정 없으면 화면에 꽉찬다!! )

block 속성의 대표적인 요소는 div태그 요소입니다. (역시 아무런 의미가 없는 태그입니다.)

코드를 통해 확인해보겠습니다.

가로 길이를 설정하지 않은 코드는 다음과 같습니다.

<div style="border: 1px solid black">안녕하세요 </div>
<div style="border: 1px solid black"> 저는 </div>
<div style="border: 1px solid black">김상웅입니다.</div>

렌더링되는 화면은 아래와 같습니다.

너비를 설정하지 않았는데도 화면에 꽉찬 테두리를 확인할 수 있고,

div요소가 작성된 순서대로 늦게 작성되는 div요소가 아래로 배치되는 것을 볼 수 있습니다.

가로 길이를 설정한 코드와 그렇지 않은 코드는 다음과 같습니다.

<div style="border: 1px solid black">안녕하세요 </div>
<div style="border: 1px solid black"> 저는 </div>
<div style="border: 1px solid black">김상웅입니다.</div>

렌더링되는 화면은 아래와 같습니다.

inline 태그 속성과 달리 화면의 크기가 요소의 너비보다 작아지면 웹 브라우저는 곧바로 수평 스크롤바를 생성하게 됩니다.

{ display: inline-block }
inline-block 태그는 화면의 가로 길이만큼 너비를 가집니다.

inline-block 속성의 대표적인 요소는 input buton태그입니다.
이번에는 div를 통해 앞서 언급한 두가지와의 차이점을 알아보겠습니다.

우선 코드를 적어보겠습니다.

<div style="display: inline-block"> 안녕하세요 </div>
<div style="display: inline-block"> 저는 </div>
<div style="display: inline-block">김상웅입니다.</div>

아래와 같은 결과가 렌더링됩니다.

inline 요소와 같은 성질을 갖고 있는 것 같네요!

이번엔 width 값을 부여해보겠습니다.

<div style="display: inline-block width: 200px; background: yellow">
  안녕하세요
</div>
<div style="display: inline-block"> 저는 </div>
<div style="display: inline-block">김상웅입니다.</div>

이번엔 결과가 조금 다르게 렌더링되는 것을 확인할 수 있는데요

이처럼 inline-block 요소는 inline과 block 요소의 특징을 모두 갖고 있습니다.

inline: 줄 바꿈 없이 한 줄에 다른 요소들과 배치가 가능합니다.
block: width, height, margin 설정을 할 수 있습니다.

📌 position 속성

웹 페이지에서 layout을 구성하는 또 다른 방법이 있습니다.
HTML 태그 요소에 position 값을 설정해주는 것인데요, 요소의 위치를 직접 지정해줄 수 있습니다.

HTML 태그 요소들은 기본값으로 position: static 값이 설정이 되어있습니다.

그렇기 때문에 방금 위에서 봤던 화면처럼 요소가 좌에서 우 위에서 아래로 배치되었죠

이번에는 relative absoulte fixed 세가지 특성에 따라 요소들이 어떻게 배치되는지 알아보겠습니다.

{ position: relative }
해당 속성이 적용된 요소 본인 (static 값)을 기준으로 요소를 배치합니다.

공통 속성 값 (양수 값은 기준 위치보다 더욱 안쪽으로, 음수는 기준 위치보다 더욱 바깥으로 이동합니다.)
top 기준이되는 요소의 상단 위치를 조정합니다.
right 기준이되는 요소의 우측 위치를 조정합니다.
bottom 기준이되는 요소의 하단 위치를 조정합니다.
left 기준이되는 요소의 좌측 위치를 조정합니다.

{ position: absolute }
position: relative 속성이 적용된 부모/조상 요소를 기준으로 absolute 요소를 배치합니다.
만약 상위 요소 중에 relative 값 설정이 되지 않았다면, body태그를 기준으로 합니다.

다음과 같은 코드가 있다고 가정해봅시다.

<div class="wrapper"
     style="position: relative; width: 300px; height: 300px; border: 1px solid black;">
      <div style="
              background: yellow;
              width: 100px;
              height: 100px;
              position: absolute;
              top: 20px;
              right: 10px;
              
      ">
  </div>
</div>

위 코드는 다음과 같은 화면이 렌더링 될 것입니다.

노란색 상자의 위치는 검정색 테두리를 가진 상자를 위치를 참조하고 있습니다.

사진을 보면 위쪽에서 20px만큼, 우측에서 10px만큼 떨어져있네요

이번엔 position: relative 속성을 부여하지 않아보겠습니다!

<div class="wrapper"
     style="width: 300px; height: 300px; border: 1px solid black;">
      <div style="
              background: yellow;
              width: 100px;
              height: 100px;
              position: absolute;
              top: 20px;
              right: 10px;
              
      ">
  </div>
</div>

위 코드의 결과는 다음과 같습니다.

화면의 일부분만 잘랐지만, 노란색 상자의 위치가 이동한 것을 확인할 수 있네요.

상위 요소에 position: relative 값을 찾지 못해 body 요소의 위치를 기준으로 잡은 것입니다.

즉 body 태그 (전체화면)를 기준으로 상단에서 20px만큼 우측에서 10px만큼 위치해 있습니다.
(캡쳐를 해서 좀 잘려보이지만 코드를 복사해서 렌더링되는 결과물과 비교해주세요!)

앞으로 position: absolute를 통해 다양한 레이아웃을 구성해볼 수 있겠네요!

{ position: fixed }
viewport 우리가 보는 화면을 기준으로 요소를 배치합니다.

fixed 속성값은 주로 많은 웹페이지나 앱에서 접할 수 있는데요.

유저가 웹 브러우저나 앱을 위 아래로 이동을 시켜도 특정 부분을 고정하고 싶다면,
요소에 position: fixed 속성을 설정해야 합니다.

코드를 통해 알아보겠습니다.

<div class="wrapper" style="height: 1000px; background: gray">
      <div class="button-to-top" \
           style="
                  width: 50px;
                  height: 50px;
                  background: yellow;
                  position: fixed;
                  bottom: 15px;
                  right: 15px;
       ">
        	top
  		</div>
    </div>