웹페이지의 사용자 경험과 직결되는 부분이기 때문에 한 페이지를 구현하더라고 정말 많은 생각이 필요한데, 이를 결정하는 HTML 요소들은 다음과 같습니다.
Position 속성은 웹 문서안 요소들을 어떻게 배치할 지를 정하는 속성으로, 텍스트나 이미지를 원하는 위치에 둘 수 있죠!
총 5가지 종류의 속성이 있고, 각 속성마다 그 사용법이 아래와 같이 구분 되어있습니다.
Attribute | 설명 | 비고 |
---|---|---|
static | 요소를 문서 흐름에 맞추어 배치 | 기본값 |
relative | 부모 요소에 자연스럽게 연결하여 위치를 지정 | |
absolute | 원하는 절대적 위치를 고정 | |
fixed | 지정한 위치가 화면에 과정되어 배치 | |
sticky | 스크롤을 하기전에는 relative와 같이 동작하지만 이후에는 fixed와 같이 동작 |
Fixed 속성같은 경우 == 원래는 relative 하게 작동하다가 일정 스크롤을 내리면 fixed로 고정되는 효과
웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정하는 요소
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;
}
```
Element를 부유시켜, 화면 흐름에 억압되지 않고 보다 부모 요소안에서 유연한 배치가 가능하지만, flex의 등장으로 위험위험한 상태의 속성....ㅠ
속성값은 다음과 같다.
이 속성같은 경우, 엄밀히 따지면 부모 요소에 상대적으로 (relative) 배치시키는 것이기 때문에 {position: absolute} + {float:right} 는 서로 개념적으로 반대되는 속성이기 때문에 사용하면 안된다.
Float을 사용하다보면, 화면 레이아웃을 무너뜨릴 수도 있는 위험성이 있어, 이를 위해 float속성 사용에 주의를 기울어야 된다.