TIL 16. 레이아웃 관련(position, display, float)

윤현묵·2021년 8월 4일
0

HTML & CSS

목록 보기
9/9

1. position 속성

웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성으로 position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있습니다. 만약 position 속성에 대한 이해도가 부족한 경우 레이아웃이 겹치거나 이상하게 되어 기존의 계획대로 웹 페이지를 만들지 못하게 될 수도 있습니다.

  • position 속성값

    속성값Description
    static요소를 문서 흐름에 맞추어 배치
    relative이전 요소(주로 부모 요소)에 자연스럽게 연결되어 위치를 지정
    absolute원하는 위치를 지정하여 배치
    fixed지정한 위치에 고정하여 배치
    sticky위치에 따라서 동작방식이 달라짐.
    요소가 임계점 이전에는 relative와 같이 동작하고 그 이후에는 fixed와 같이 동작

    static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있며, 각 값들은 그 방향에서 얼마나 떨어져 위치시킬 것인 지를 나타냅니다.
    (ex. top: 10px → 기준위치의 위에서 10px 떨어져 있는 곳에 위치)

    -. static
    static은 position 속성의 기본값으로 요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없습니다. (float 속성은 가능)

    -. relative
    static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다. 예로, static일 때 기준으로 왼쪽으로부터 50px, 위쪽으로부터 30px에 위치해 있다면 style="top:5px; left: 5px;" 을 적용하면 왼쪽으로부터 55px, 위쪽으로부터 35px 이동하는 형식입니다. 상대적 위치는 top, right, bottom, left 속성을 써서 나타낼 수 있습니다.

    -. absolute
    absolute 속성값은 브라우저가 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다. 이때 기준이 되는 위치는 가장 가까운 부모 요소 혹은 조상 요소 중 position 속성이 relative인 요소입니다.


    -. fixed
    fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.
    (기준점: 브라우저 왼쪽 위 꼭지점)


  • -. sticky
    sticky 속성은 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다가 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작하게 됩니다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 됩니다.

2. display 속성

CSS에서 display 속성은 웹페이지 상에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본인 inline과 block, inline-block에 대해서 알아보도록 하겠습니다.

  • inline
    display 속성이 inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다. 대표적인 inline 요소로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.

  • inline-block
    display 속성이 inline-block으로 지정된 요소는 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치됩니다. 하지만 inline 요소에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.
    대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등을 들 수 있습니다.

  • block
    display 속성이 block으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 요소로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.
    예를 들어, 여러 개의 block 요소를 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

3. float 속성

CSS float 속성은 특히 국내 실무 내에서 레이아웃 설계하는 과정에서 많이 사용하는 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성으로, float 속성을 사용해 박스를 왼쪽 또는 오른쪽으로 "부유"시키는 레이아웃 기법입니다.
여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다. 이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.

  • float의 속성값
    -. left : 요소를 왼쪽 방향으로 부유하게 설정
    -. right : 요소를 오른쪽 방향으로 부유하게 설정
    -. none : 기본값(default), 요소를 띄우지 않는다.
    -. float 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.
    -. 이미지에 텍스트를 둘러싸게 만들려는 목표로 나온 기법이 floating 이라는 기법입니다.

  • 주요 특징
    -. 플로팅된 요소는 그 요소의 종류에 상관없이 블럭 박스가 됩니다.
    -. 인라인 요소인 링크(anchor)를 플로팅시키는 경우, 블럭 박스로 변경되고 div처럼 동작하게 됩니다.
    -. 자신의 영역만을 가지고 있는 인라인 블럭 박스처럼 렌더링되는 것이 특이한 점입니다.
    -. 플로팅된 요소는 display: inline-block; 을 선언한 것과 동일해집니다.
    -. float 사용 예시(사이드바와 main contents를 각각 왼쪽, 오른쪽 / 오른쪽, 왼쪽 float 적용)

  • clear - 플로팅 해제 기법
    플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보게 될 것입니다. 이는 float을 사용하면 발생되는 현상으로, float을 해제해 주어야 합니다. 이 의미는 float이 적용된 요소를 해제하는 것이 아니라, clear 속성을 적용해 float의 영향을 받지 않도록 한다는 의미입니다.
    플롯을 해제하는 방법 중에 전 세계적으로 통용되는 이름으로 clearfix 라는 방법이 있습니다. 물론 clear 속성을 적용하기 보다 다른 방법으로도 float을 해제할 수는 있으나 float을 사용해 레이아웃을 잡다보면 clear 가 필요해지기 때문에 가급적 float 요소의 부모 요소에 clearfix 방법을 적용하는 것을 권장하고 있습니다. 다시 말해, float이 적용된 자식 요소를 부모 요소가 감싸 안지 못하는 현상을 해결하기 위해서는 대략적으로 6가지 방법이 있는데 그 중 대표적으로 많이 사용되는 방법이 clearfix 입니다.

  • clear 속성값
    -. left : 왼쪽에 floating 된 요소를 지정 해제
    -. right : 오른쪽에 floating 된 요소를 지정 해제
    -. both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
    -. none : 기본값(default), floating 을 해제하지 않음

참고자료: https://engkimbs.tistory.com/922, https://www.daleseo.com/css-display-inline-block/, https://webclub.tistory.com/606

profile
진정성 있는 개발자를 꿈꾼다

0개의 댓글