이전 글에서 말한 것처럼, 나중에 내가 직접 만든 사이트를 관리하고 싶다면 또 하나 정리해 둬야 할 게 있다.

CSS

예전에 학원에서 과제로 껍데기만 있는 사이트를 만든 적이 있다. 말 그대로 껍데기만 있는 사이트에 간단한 로그인과 글쓰기를 구현하면서 쇼핑몰의 리뷰 페이지를 게시판으로 만들기도 했다.

제법 귀엽다. 어떻게 만들었나 싶을 정도로...

이 페이지에는 슬픈 기억이 있다. 일단 닥치는 대로 만들었더니 페이지 크기와 사이트가 전혀 호환되지 않았다. 당장 중요한 문제는 아니었으나, 전혀 생각하지도 못한 문제기도 했다. 스크린샷은 제작할 때 맞춘 크기 그대로 창 크기를 맞춰서 찍었을 뿐이다. 그나마 다행히도 로그인, 리뷰 페이지는 구성 요소가 적고 가운데에 띄웠을 뿐이라 페이지 크기와 큰 상관이 없었지만, 나는 실망했다.

전혀 고려하지 않은 요소가 구현되지 않았다고 실망하는 것도 웃긴 일이지만, 그랬다.

이미지 아래에 제품명과 가격, 제품의 크기 등 세부적인 정보를 원하는 위치에 넣는 것도 실패해 아예 빼 버렸다(참고했던 사이트에도 없다는 걸 핑계로 삼으면서). 또 메인 화면에서 이미지들이 마우스의 움직임을 따라 슬라이드로 흘러가는 걸 구현하고 싶었지만, 그것도 여의치 않자 포기해 버렸다. 당시 배운 기초적인 css로는 불가능한 부분이기는 했다.



이런 커다란 문제들은 잠시 제쳐 두고, css의 아주 기초부터 다시 공부할 필요성을 느꼈다. 당장 이런 페이지를 다시 만들라고 하면, 앞서 나열한 기능들은커녕 똑같이 생긴 페이지도 못 만들 것 같으니까.

개구리도 잡았고, 한 페이지의 html로만 만들어진 자기소개 페이지도 만들어 보았다. 그러니 이제 두 가지 크고 중요한 속성에 대해 정리해보려 한다.

position, 그리고 display

레이아웃을 구성한다면, 어떤 요소를 어디에 어떻게 위치시킬지가 중요할 것이다. 그러기 위해 중요한 두 가지 프로퍼티가 있다.

1. position

position 프로퍼티는 기본적으로 static 값을 default로 가진다. 중요한 값으로는 relative, absolute, fixed가 있다.

- relative

relative는 요소의 위치를 단어 그대로 상대적으로 이동시킬 수 있다. 그 기준은 원래의 요소가 놓여 있던 위치다.

<style>
   .velog1 {
        background-color: tomato;
    	position: relative;
        top: 10px;
        left: 35px;
   }
</style>

<span class="velog">111</span>

이렇게 설정해준다면 div는 원래 존재하던 위치를 기준으로 top:맨 위에서 아래로 10px, left:맨 왼쪽에서 오른쪽으로 35px 이동하여 나타날 것이다.

 위치가 이동한 것을 확인할 수 있다.

left: -10px;

음수를 설정한다면 해당 방향을 기준으로 더 그 쪽으로 움직인다.

왼쪽에서 더 왼쪽으로 이동한 것을 볼 수 있다. 
여담이지만 난 css의 gold 색을 좋아한다... yellow는 눈이 아프니까.

부모가 있을 때에도 마찬가지다. 요소의 위치는 부모와 같은 곳에 위치하게 되기 때문에 relative의 움직임은 기존과 동일하다.

- absolute

absolute는 조금 얘기가 다르다. 단어 그대로 절대적인 위치를 가지려는 이 속성은, 자식 속성에 존재할 때 다른 기준을 가진다.

<style>
   .velog1 {
        background-color: seagreen;
        margin: 30px; // 차이가 확실히 보이도록 margin을 주었다
        width: 40px;
        height: 40px;
   }
   .velog1 .inner {
        background-color: gold;
        top: 10px;
        left: 35px;
        width: 40px;
        height: 40px;
   }
</style>

<div class="velog1">
    <div class="inner"></div>
</div>

이번에는 둘 다 div이다. 아무 포지션을 주지 않고 부모 div와 자식 div에 같은 크기를 주면 gold색의 자식 inner div가 부모를 기준으로 자식이 위치하므로 부모를 완전히 덮어 버린 것을 확인할 수 있다.

<style>
   .velog1 { 
        background-color: seagreen;
        margin: 30px; 
        width: 40px;
        height: 40px;
   }
   .velog1 .inner {
        background-color: gold;
        position: absolute; // 자식은 absolute 속성값을 가진다.
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
   }
</style>

<div class="velog1">
    <div class="inner"></div>
</div>

부모에게는 position과 관련된 아무런 값이 없어 보이지만 default로 static를 가지고 있다. 결과는 아래와 같다.

자식이 부모와 관련 없이 페이지를 기준으로 각각 위에서 20px, 왼쪽에서 20px을 움직인 것을 확인할 수 있다. 이처럼 부모가 static이고 자식이 absolute일 경우 자식은 부모를 무시하고 페이지 자체에 절대적으로 움직인다.

<style>
   .velog1 { 
        background-color: seagreen;
        position: relative; // 부모는 relative 속성값을 가진다.
        margin: 30px; 
        width: 40px;
        height: 40px;
   }
   .velog1 .inner {
        background-color: gold;
        position: absolute; // 자식은 absolute 속성값을 가진다.
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
   }
</style>

<div class="velog1">
    <div class="inner"></div>
</div>

이번에는 부모가 relative를 가지고 있다. 이 경우에는 결과가 다음과 같다.

자식이 부모를 기준으로 각각 20px씩 움직인 것을 확인할 수 있다. 이는 부모와 자식이 둘 다 position: relative;를 가지고 있는 것과 동일한 결과인데, 이를 통해 자식이 position: absolute;를 가지고 있을 때 부모가 position: static; 이외의 값을 가지고 있다면 부모를 기준으로 움직인다는 것을 확인할 수 있다.
같은 의미로,

부모가 position: static;를 가지고 있다면(혹은 아무 것도 가지지 않은 것처럼 보인다면) 자식의 position: absolute;는 페이지 자체를 기준으로 움직인다.

- fixed

position:fixed;는 다른 것들보다 훨씬 간단하다.
이 속성은 선언된 요소를 화면 크기, 즉 viewport 기준으로 위치가 정해지는데, 스크롤을 움직여도 항상 해당 위치에 고정된다. 뉴스 기사를 볼 때 옆에 올라와 스크롤을 움직여도 계속 붙어 있는 광고나 항상 페이지 맨 위에 존재하는 네비게이션 등이 이 속성값을 사용하고 있다.

화면 크기를 기준으로 움직이기 때문에, 예시로 든 뉴스 광고 같은 위치를 표현하기 위해서는

<style>
  .inner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    background-color: tomato;
  }
</style>

bottom: 0; right: 0;을 이용해 아래에서 0px, 오른쪽에서 0px을 사용해 화면 가장 오른쪽 아래에 고정시킬 수 있다.

또한 언급한 바와 같이 화면 크기에도 위치는 변경되지 않는다.

작성하며 궁금해져서, bottom: 0;left: 550px; 을 이용해 화면 아래 왼쪽에서 550px 위치에 요소를 위치시키자 화면 크기가 550px보다 작아졌을 때에는 보이지 않는 곳으로 사라졌다.

2. display

- block과 inline

display:inline'과 display:block;은 이미 우리가 이용해 왔던 요소들이 보여주고 있는 속성이다. 아래는 html과 css를 가장 처음 배울 때에 보았던 화면일 것이다.

<div>, <p>은 block이고
<span>, <a>은 inline이다.

block 속성값은 가로로 길게 모든 영역을 차지하고, inline 속성값은 요소의 크기만큼만 영역을 차지한다.

    <style>
      .d1 {background: tomato;}
      .d2 {background: gold;}
      .d3 {background: skyblue;}
    </style>
    
    <div class="d1">나는 div1</div>
    <div class="d2">나는 div2</div>
    <div class="d3">나는 div3</div>

위의 코드를 실행시켜보면

이러한 결과가 나온다. 크기를 지정해도 마찬가지다.

      div{
        width: 50px;
        height: 50px;
      }

여백이 보이느냐는 중요하지 않다. <div>가 display: block; 속성을 가지고 있기 때문이다.

      div{
        width: 50px;
        height: 50px;
        display: inline;
      }

이처럼 display속성을 부여하면

<div>도 <span>처럼 내용만큼의 공간만을 차지한다.
그러나 이상한 점이 있다. 분명 width와 height값을 가지고 있는데도 불구하고 딱 내용만큼의 공간만 차지하고 있다. 이것은 inline이 가진 특성 때문인데, inline은 크기를 설정할 수 없다.

또한 inline은 margin과 padding을 없애 버린다. 그러나, 위아래만 그렇다.

    <style>
      div{
        display: inline;
        margin: 20px;
        padding: 20px;
      }
    </style>

inline 속성에 margin과 padding을 각각 20px 가지고 있다. 그러나 결과는 다음과 같다.

위는 딱 붙어있으나 양옆에는 20px이 제대로 붙어 있다. 이와 같이 제대로 작동하지 않기 때문에 margin과 padding을 사용하고 싶다면 inline을 사용해서는 안 된다.

- inline-block

이러한 특성을 보완하기 위해 inline-block이 있다.
inline-block은 inline처럼 한 줄을 다 차지하지 않고, block처럼 margin과 padding이 정상적으로 들어온다.

    <style>
      div{
        display: inline-block;
        margin: 20px;
        padding: 20px;
      }
    </style>

멀쩡하게 margin과 padding이 작동하는 것을 확인할 수 있다.

마치며

이렇게 다양한 css의 요소들은 편하게 사용할 때에 잊혀지기 쉽다. ...나는 그랬다.
꾸준히 공부하고 실험해 가며 머릿속을 업데이트해야 원하는 결과를 얻기까지 덜 헤매고 빠르게 해결할 수 있을 것이다.