[TIL 21] HTML, CSS | 레이아웃

16983 단어 TILCSShtmlCSS

레이아웃이란 각 구성요소를 공간 안에 효과적으로 배치하는 프로세스를 말한다.
쉽게 말하자면 화면의 구조라고 할 수 있으며 레이아웃의 핵심은 요소들을 원하는 위치에 배치하는 것이다.
매일 봐도 헷갈리고 어려운 css 레이아웃에 관한 속성들을 이번 기회에 확실히 짚고 넘어가자!


position

position 속성은 페이지 안 요소들을 어디에 어떻게 배치할 지를 정하는 속성이다. position 속성을 사용하면 html 코드와 상관없이 요소를 원하는 위치에 배치할 수 있고 어떤 방식으로 놓을지를 결정할 수 있다.

  • static
  • relative
  • absolute
  • fixed

static

position속성의 기본값이다. 요소를 나열한 순서대로 배치한다.

relative

상대위치.
static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값이다.
position: relative; 자체로는 어느 위치로 이동한다거나 하지 않는다.
top, right, bottom, left 와 같은 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

예를 들어, static일 때 기준으로 왼쪽으로부터 50px, 위쪽으로부터 30px에 위치해 있다면 top:5px; left: 5px; 을 적용하면 왼쪽으로부터 55px, 위쪽으로부터 35px 이동한다.

absolute

절대 위치.
absolute는 해당 요소의 위치가 지정된 부모 요소를 기준으로해서 fixed 하는 것과 같다고 생각하면 된다.
부모 요소 중에 position이 relative, fixed, absolute 선언된 요소 기준으로 움직이게 된다.
만약, 부모 요소에 해당 프로퍼티가 없다면 최상단 태그인 body를 기준으로 위치가 지정된다.

일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다.

div.parent { 
    position:   relative;
}
div.child { 
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
}

위의 예제를 보면 child클래스 요소가 parent클래스 요소와 같은 위치에 같은 크기로 표시된다. 두 요소를 겹쳐 놓은 것이다.

fixed

fixed는 사용자에게 비춰지는 화면을 기준으로 위치가 지정된다. 브라우저 왼쪽 위를 기준으로 스크롤 하더라도 계속 고정되어 표시되게 된다.


display

display 속성은 페이지의 레이아웃을 결정하는 속성이다. 모든 html 엘리먼트는 display값을 갖고 있다.

  • none
  • block
  • inline
  • inline-block

block

block은 하나의 줄을 차지하고 가능한 최대의 가로 넓이를 가진다. div, p, form, header, section 등이 있다.

  • 별도의 width값을 주지 않았을 때는 부모요소의 width만큼 늘어난다.
  • 별도의 width값이 주어졌을때는 남은 빈 공간을 margin으로 채워서 다음 요소가 위로 올라오지 못하게 막는다.
  • 별도의 height값을 주지 않았을때 자식들의 크기 합만큼의 높이를 가진다.

inline

inline은 특정 텍스트를 감싸는 형태의 display 속성이다. block과는 반대로 아래 요소를 옆으로 올라오게 한다.

줄바꿈이 되지 않고 width, height, margin-top(bottom), padding-top(bottom) 값을 지정할 수 없다. span, a 등이 있다.

inline-block

inline에서 쓸 수 없던 width, height, margin-top(bottom), padding-top(bottom)을 사용가능하다. 그러면서도 inline의 성격대로 다음 요소를 옆으로 올라오게 한다.


float

float은 페이지 내에서 텍스트 영역에 이미지를 같이 배치할 수 있게 하기 위한 속성이다.

페이지 내의 이미지를 왼쪽이나 오른쪽으로 정렬하거나, 요소를 정렬해 전체 문서를 배치할 때도 사용할 수 있다.

  • none
  • left
  • right
  • inherit

none

정렬하지 않는다.

left

왼쪽으로 정렬한다.

right

오른쪽으로 정렬한다.


그런데 float속성을 사용해서 요소를 배치하다 보면 문제에 부딫힌다.

<!-- style -->
<style>
    .div1 {
        background-color: yellow;
        float: left;
        width: 100px;
    }
    .div2 {
        background-color: yellowgreen;
        float: left;
        width: 100px;
    }
    .div3 {
        background-color: skyblue;
        float: left;
        width: 100px;
    }
</style>

<!-- html -->
<body>
    <div class="wrap">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">얘는 줄바꿈 하고 싶은데..</div>
    </div>
</body>

div1, div2, div3을 float: left; 속성을 사용해 왼쪽부터 흐르게 배치했는데 div4는 줄바꿈해서 나타내고 싶다면 어떻게 해야할까?
clearfix의 방법에는 몇가지 방법이 있다.

clearfix

float속성을 해제하는 것!

  • 마지막에 빈 요소 삽입 후 clear:both; 속성 주기
  • overflow: hidden; 또는 overflow: auto 속성 주기
  • 부모 요소에게 float주기
  • ::after 사용

clear:both;

.div4 {
        clear: both;
    }

clear를 기준으로 줄바꿈이 된 것을 볼 수 있다.
하지만 float설정 후 다음 요소에 매번 <div class="clear"></div> 코드를 작성하는 것은 의미 없는 태그를 만드는 것이므로 효율성에서 좋지 않다.

overflow

float속성를 가진 부모 요소에게 overflow: hidden; 또는 overflow: auto 속성을 주어서 clearfix 할 수 있다.

  • overflow: hidden; : 자식의 너비가 부모의 너비보다 클 경우 넘치는 부분이 잘릴 수 있다.
  • overflow: auto; : 자식의 너비가 부모의 너비보다 클 경우 가로 스크롤바가 생긴다.

float

부모 요소에 float를 주는 방법이다. 그러나 block요소의 성질이 없어지므로 width:100%; 속성을 추가해야한다.

::after

float 속성을 가진 부모 요소에 ::after를 사용해 다음과 같이 작성해주는 방법이다. 

.wrap:after{
    content:"";
    display:block;
    clear:both;
}


다음과 같이 div3에는 float속성을 주지 않아야 한다.

<style>
    .wrap:after {
        content: "";
        display: block;
        clear: both;
    }

    .div1 {
        background-color: yellow;
        float: left;
        width: 100px;
    }

    .div2 {
        background-color: yellowgreen;
        float: left;
        width: 100px;
    }

    .div3 {
        background-color: skyblue;
    }
</style>

<!-- html -->
<body>
    <div class="wrap">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div>얘는 줄바꿈 하고 싶은데..</div>
    </div>
</body>
SwiftUI의 VStack에서 Extra argument in cal 오류
React를 사용하여 타임라인 어셈블리를 생성하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage