화면 레이아웃의 이해

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개의 댓글