CSS - CSS를 이용한 html 엘리먼트 위치변경(display, position, float,clear)

728x90

1. display

css를 이용하여 html의 요소들을 배치하는 방법에 대해 알아보도록 하겠습니다. css 속성들중 html의 요소의 배치, 위치에 영향을 주는 속성은 크게 3가지가 존재합니다. display, position, float입니다. 각각에 대해 알아보겠습니다.

1. display

display가 가질 수 있는 값은 다시 크게 세가지로 나뉩니다. block, inline, inline-block이 그것입니다.

사실 display라는 속성은 기본적으로 html 태그들이 가지고 있는 속성입니다. 각각의 태그들에 따라 가지고 있는 값들이 다른데요, 각각의 값들을 설명드리면서 다시 말씀드리겠습니다.

1.1 block

block값은 마치 block을 쌓듯이 위에서 아래로 쌓인다고 해서 block 입니다. 위에서 말씀 드렸듯 처음 부터 태그들은 가지고 있는 display 속성의 값들이 있는데요, div, p 등등의 태그들이 기본적으로 display의 속성의 값으로 block을 가집니다.


  <body>
    <div>div1</div>
    <div>div2</div>
    <p>p1</p>
    <p>p2</p>
  </body>

위와 같이 작성한 후 확인하면,

이처럼 각각의 태그들이 위에서 아래로 쌓여나가는 것을 볼 수 있습니다. p의 경우에는 기본적으로 margin 값을 가지기 때문에 조금 떨어져 있음을 볼 수 있습니다.

1.2 inline

inline 값은 왼쪽에서 오른쪽으로 정렬되는 성질을 가집니다. a, strong, input, span ..등이 inline을 값으로 가집니다.


xxxxxxxxxx
<body>
    <a href="#">a</a>
    <span>span</span>
    <strong>strong</strong>
    <input type="text" name="" value="asd">
</body>

위와 같이 작성한 후 확인해봅니다.

좌측에서 우측으로 정렬되는 것을 볼 수 있습니다.


xxxxxxxxxx
<style media="screen">
      div {
        display : inline;
      }
      p{
        display : inline;
      }
</style>

css에서 display속성의 값을 inline으로 주시면 방금 보셨던 div, p들도 좌측에서 우측으로 흐르도록 할 수 있습니다.

2. position

position 속성의 경우 각각의 html의 각 element들의 위치를 직접적으로 조정할 수 있는 속성입니다. 값으로는 relative, static, absolute, fixed 등이 존재합니다.

2.1 static

static은 모든 요소들이 기본적으로 가지는 값입니다. inline이나 block에 따라 그대로 위치 대도록합니다. static은 위치를 변경하더라도 변경되지 않습니다.

2.2 absolute

기준점에 따라 배치가 가능합니다. 기준이 되는 요소는 상위 엘리먼트(부모) 중 position속성의 값으로 relative를 가지는 엘리먼트를 기준으로 잡습니다. 만약 상위 엘리먼트들 중 relative를 가지는 속성이 없다면 최상위(body)를 기준으로 위치를 지정합니다.

2.3 relative

relative는 원래 자신이 위치할 곳을 기준으로 위치를 정합니다.

2.4 fixed

화면을 기준으로하여 위치를 지정합니다. 화면을 기준으로 하기 때문에 스크롤을 하여 아래로 내리더라도 지정한 위치에 그대로 위치합니다. (광고등을 생각하면 쉽습니다.)

각각의 설명들을 조금 대충한 감이 있으니 예제를 보며 다시한번 설명드리겠습니다.


x
<head>
    <style media="screen">
      .static{
        left : 100px;
      }
      .relative{
        position : relative;
        left : 100px;
      }
      .absolute{
        position : absolute;
      }
      .fixed{
        position : fixed;
        top : 100px;
        left : 100px;
      }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="static">static(defulat)</div>
        <div class="relative">relative</div>
        <div class="absolute">absolute</div>
        <div class="fixed">fixed</div>
    </div>
</body>

위를 기준으로 설명드리겠습니다.

static

먼저 static의 경우 css에서 left : 100px;을 주었지만 설명드린것 처럼 위치가 변경되지 않았음을 볼 수 있습니다.

relative

relative의 경우는 원래 자신이 위치할 곳에서부터 왼쪽에서 100px떨어져 있는것을 확인할 수 있습니다.

absolute

absolute는 css를 조금 수정하며 설명드리겠습니다.


.absolute{
    position : absolute;
    top : 20px;
    left : 20px;
}

css에서 absolute만을 위처럼 변경하겠습니다

결과 입니다. 화면의 좌측상단 즉 body를 기준으로 아래, 우측으로 각각 20px씩 이동했습니다. 어? 그런데 바로 위 div가 relative값을 가지는데 왜 body를 기준으로 할까요?


<div class="wrap">
      <div class="static">static(defulat)</div>
      <div class="relative">relative</div>
      <div class="absolute">absolute</div>
      <div class="fixed">fixed</div>
</div>

바로 absolute의 상위 엘리먼트가 아니기 때문입니다. 그렇다면 absolute의 상위 엘리먼트로 realative를 가지도록 변경해보겠습니다.


xxxxxxxxxx
<body>
    <div class="wrap">
      <div class="static">static(defulat)</div>
      <div class="relative">relative
        <div class="absolute">absolute</div>
      </div>
      <div class="fixed">fixed</div>
    </div>
</body>

위처럼 absolute를 relative의 하위엘리먼트로 변경했습니다.

조금 더 잘 보실 수 있도록 각 엘리먼트가 테두리를 가지도록 css속성을 추가했습니다.

자 이번에는 relative를 기준으로 아래, 오른쪽으로 각각 20px씩 이동한 것을 알 수 있습니다.

3. float, clear

3.1 float

float의 경우 지정된 엘리먼트를 띄우는 효과를 줍니다. 무슨 말인지 예제를 통해 말씀드리겠습니다.


<head>
    <style media="screen">
        div {
        width : 100px;
        height : 100px;
        }
        .red{
        background-color : red;
        }
        .blue{
        background-color : blue;
        }
        .green{
        background-color : green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>

위를 기준으로 설명드리겠습니다.


xxxxxxxxxx
      .blue{
        background-color : blue;
        float : left;
      }

우선 blue에 float:left; 를 추가합니다. float 속성을 준다면 해당 엘리먼트를 띄운다라고 표현을 했습니다. 어떤 의미냐하면, blue라는 요소를 z축으로 띄웠다고 생각하시면 됩니다. 따라서 div는 display를 block으로 가지고 있기 때문에 blue의 자리가 비게 되어 green이 그자리를 채우게 됩니다. (현재 green은 z축을 기준으로 blue의 하단에 존재합니다.)


  .green{
    background-color : green;
    margin-left : 20px;
  }

green이 그 아래에 있는지 확인하기 위해 margin left를 주겠습니다.

green이 blue아래에 빼꼼 나온것을 볼 수 있습니다.

실상 z축으로 띄운다고 했지만 클라이언트 입장에서는 이를 판가름할 수 없습니다. 따라서 float를 이용해 inline 속성을 준것처럼 할 수 있습니다.

3.2 clear

이 float를 감지하지 않도록 하는 방법도 있습니다. float속성을 가진 엘리먼트 이외의 즉 그 아래의 엘리먼트들에 clear: 속성을 주면 됩니다. clear:left; 로 할경우 float:left를 감지하고 right면 right를 both면 left,right를 모두 인식합니다.

저작자표시

'Web > CSS' 카테고리의 다른 글

CSS -CSS의 선택자 (0)	2019.05.11

전준엽

배움이 즐거운 개발자

알고리즘 코드는 GitHub에 업로드 하고 있습니다. (https://github.com/galid1/Algorithm)

알고리즘 코드는 GitHub에 업로드 하고 있습니다. (https://github.com/galid1/Algorithm)

CSS - CSS를 이용한 html 엘리먼트 위치변경(display, position, float,clear)

1. display

1.1 block

1.2 inline

2. position

2.1 static

2.2 absolute

2.3 relative

2.4 fixed

3. float, clear

3.1 float

3.2 clear

'Web > CSS' 카테고리의 다른 글

티스토리툴바

전준엽

CSS - CSS를 이용한 html 엘리먼트 위치변경(display, position, float,clear)

1. display

1.1 block

1.2 inline

2. position

2.1 static

2.2 absolute

2.3 relative

2.4 fixed

3. float, clear

3.1 float

3.2 clear

'Web > CSS' 카테고리의 다른 글

'Web/CSS' Related Articles

티스토리툴바