화면 레이아웃의 이해

sj950902·2020년 11월 21일
1

HTML / CSS

목록 보기
2/2
post-thumbnail
오늘은 좋은 웹페이지의 불가결한 요소인 레이아웃 에 대해서 정리해보겠습니다.

웹페이지의 사용자 경험과 직결되는 부분이기 때문에 한 페이지를 구현하더라고 정말 많은 생각이 필요한데, 이를 결정하는 HTML 요소들은 다음과 같습니다.


  1. Position
  2. Display
  3. Float

1. Position 속성

  • Position 속성은 웹 문서안 요소들을 어떻게 배치할 지를 정하는 속성으로, 텍스트나 이미지를 원하는 위치에 둘 수 있죠!

  • 총 5가지 종류의 속성이 있고, 각 속성마다 그 사용법이 아래와 같이 구분 되어있습니다.

| Attribute | 설명 | 비고 |
|:---|:---|:---|
| static | 요소를 문서 흐름에 맞추어 배치 | 기본값
| relative | 부모 요소에 자연스럽게 연결하여 위치를 지정 |
| absolute | 원하는 절대적 위치를 고정 |
| fixed | 지정한 위치가 화면에 과정되어 배치 |
| sticky | 스크롤을 하기전에는 relative와 같이 동작하지만 이후에는 fixed와 같이 동작 |

Fixed 속성만 있을 경우 == 스크롤을 내려도 "화면"에 고정됨

Fixed 속성같은 경우 == 원래는 relative 하게 작동하다가 일정 스크롤을 내리면 fixed로 고정되는 효과

2. Display 속성

웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정하는 요소

  • Inline : 줄바꿈없이 전후 요소들과 나란히 배치되는 속성 (ex - <a> , <span> ...)
    주의 할 점 : width와 height 속성을 지정해도 무시됨 + 여백 (padding / margin) 은 가로만 적용되며, 상하 간격은 반영이 안됨.

  • block : 지정된 엘리먼트는 전후 줄바꿈이 일어나서, 요소하나가 한줄을 차지함
    Inline 유형과 다르게 여백 (margin/ padding)의 상하좌우 모두 적용됨

  • inline-block : 위의 inline 속성과 동일한 유형으로 배치되지만, 단점이였던 부분들이 보완된 유형
    inline이 기본적으로 잡혀있는 span 및 a 태그같은 경우, 명시적으로 다음과 같이 inline-block을 적용하는 것이 좋을듯하다.
    주의 할 점 : Internet Explorer 7 이하에서는 사용할 수 없습니다 ㅠ ㅅ ㅠ

    a, span {
    	display : inline-block;
    }

3. Float 속성

Element를 부유시켜, 화면 흐름에 억압되지 않고 보다 부모 요소안에서 유연한 배치가 가능하지만, flex의 등장으로 위험위험한 상태의 속성....ㅠ

속성값은 다음과 같다.

  • left : 왼쪽 방향으로 부유
  • right : 오른쪽 방향으로 부유
  • none : 기본값

이 속성같은 경우, 엄밀히 따지면 부모 요소에 상대적으로 (relative) 배치시키는 것이기 때문에 {position: absolute} + {float:right} 는 서로 개념적으로 반대되는 속성이기 때문에 사용하면 안된다.

Float을 사용하다보면, 화면 레이아웃을 무너뜨릴 수도 있는 위험성이 있어, 이를 위해 float속성 사용에 주의를 기울어야 된다.

profile
# 백엔드개발자 # 기억보단 기록을

0개의 댓글