[TIL] position속성과 display 속성

minami·2021년 12월 1일
0

wecode

목록 보기
3/10

1. position 속성

position은 요소의 위치를 지정하는 속성

  • static: 기본값. 문서 흐름에 맞춰서 자동으로 배치
  • absolute: relative, fixed, absolute 중 하나의 속성을 가진 가장 가까운 부모 요소 기준 절대적 위치 지정
  • relative: 원래 있던 기본값 위치를 기준으로 상대적 위치 지정
  • fixed: 스크롤과 상관없이 항상 top, right, bottom, left 중 한 곳에 위치 고정
  • inherit: 부모 요소의 속성값 상속

position 속성값은 이처럼 총 5가지가 있으며, static은 기본값이기에 따로 CSS파일에 작성하거나 자주 쓰이지는 않는다. 5가지 중에서 주로 많이 쓰이는 속성값은 부모 요소와 부모 요소를 기준으로 절대적 위치를 지정할 수 있는 absoluterelative, 메뉴바나 네비게이션 바처럼 화면에 항상 같은 위치에 고정되어서 쓰여야 하는 요소에 지정하는 fixed 정도이다. 사실 sticky같은 속성값이 더 있긴 하지만 현업에서는 잘 쓰이지 않는 것 같기도 하다. 처음 막 웹 개발에 발을 들였을 때에는 아무것도 모르고 그냥 써보기도 했고, 이런 속성값이 있다고 배우기도 했지만 길고 길었던 인턴 생활 중에도 해당 속성을 써본 적도 없었고 서비스의 기존 코드에도 사용된 걸 보지 못했던 것 같다.

그러니 relative, absolute, fixed에 대해 알아보자.

1-1. relative, absolute, fixed

  • 3가지 속성값의 공통점: top, right, bottom, left 값(픽셀 or 백분율) 지정 가능
  • 4개의 위치값에 음수를 지정하면 top은 아래로, right은 왼쪽으로, bottom은 위로, left는 오른쪽으로 즉, 반대쪽으로 움직이게 된다.
  1. relative
    • 기본값인 static 상태였을 때의 자신의 위치를 기준으로 상대적 위치를 지정하는 속성값
    • absolute값을 부여한 자식 요소의 기준이 될 부모 요소에 많이 사용되는 속성값
  2. absolute
    • 4개의 위치값을 이용해서 요소에 절대적 위치를 지정할 때 사용하는 속성값
    • 자유롭게 위치를 조정하고 싶을 때 많이 사용된다.
  3. fixed
    • 스크롤의 위치와 상관없이 화면에 요소를 고정할 때 사용하는 속성값
    • 상단의 네비게이션 바 또는 좌/우측의 퀵메뉴와 같이 스크롤의 위치와 상관없이 화면에 고정되어 있어야 하는 요소에 부여하는 일이 많다.

2. display 속성

웹 페이지의 레이아웃을 결정하는 중요한 속성 중 하나

  • HTML 요소의 대부분이 display 속성의 기본값인 블록(block) 또는 인라인(inline)의 값을 가진다.
  • 블록과 인라인의 속성을 모두 갖고 있는 인라인-블록(inline-block)이라는 값도 많이 사용된다.

2-1. 블록(block)

  • 항상 새로운 라인에서 시작한다.
  • 해당 라인의 전체 너비를 차지한다.
  • 예) <p>, <div>, <ul>, <ol>, <form>

2-2. 인라인(inline)

  • 새로운 라인에서 시작하지 않는다.
  • 해당 요소의 영역만큼만 너비를 차지한다.
  • 예) <span>, <a>, <img>

2-3. 인라인-블록(inline-block)

해당 요소끼리는 인라인처럼 적용되지만, 요소 내부에서는 블록처럼 적용되는 속성

  • 해당 속성값이 지정된 요소들끼리는 인라인처럼 적용되어 한 라인에 여러 요소들이 들어간다. 하지만 너비와 높이, margin이나 padding값을 지정하여 블록 요소처럼 활용이 가능하다.

    예)

    <!DOCTYPE>
    <html>
        <head>
            ...
        </head>
        <body>
            <div class="wrapper">
                <div class="box1 inline-block">
                    1
                </div>
                <div class="box2 inline-block">
                    2
                </div>
            </div>
        </body>
    </html>
    .box1 {
        width: 100px;
        height: 50px;
    }
    
    .box2 {
        width: 200px;
        height: 50px;
    }
    
    .inline-block {
        display: inline-block;
    }
profile
함께 나아가는 개발자💪

0개의 댓글