display / position 속성
display
레이아웃을 다루는데 가장 중요한 속성입니다.
모든 요소는 기본적으로 display 속성을 가지고 있습니다
그 기본적인 속성 중 가장 중요한 속성이 block과 inline입니다.
한 층 한 층 쌓이는 레고 블럭처럼....
block
display: block;
div는 대표적인 block-level element
block-level element는
- 기본적으로 (너비를 지정하지 않으면) 좌우로 최대 너비를 차지 한다.
- 수직으로 쌓인다.
- 너비와 높이를 지정 할 수 있다.
- 레이아웃을 잡을 때 사용한다.
p와 form 이 있다. 그리고 HTML5에서 header, footer, section이 새롭게 추가 되었다.
라인 안이라서 인라인...
inline
display: inline;
span는 대표적인 inline-level-element 입니다
- 기본적으로 컨텐츠가 차지하는 영역만 차지 한다.
- 수평으로 쌓인다.
- 너비와 높이를 지정할 수 없다
- 텍스트를 다룰 때, 사용합니다.
a 태그는 가장 흔한 inline 요소이다
inline-block
display: inline-block;
inline과 block의 요소를 모두 가지고 있습니다.
- 수평으로 쌓인다
- 너비와 높이를 모두 조정할 수 있다
]
none
display:none;그 외에 자주 사용되는 다른 display 값으로 none이 있다.
none을 적용하면 그 속성을 적용한 태그가 보이지 않는다.
보이지도 않게 되는데 왜 사용할까?
javascript를 이용해 display 속성값을 바꿔주면서, 사용자의 조작에 따라 그 요소를 숨기거나 보여주거나 할 수 있다.
visibility:hidden과의 차이
visibility: hidden;display를 none을 적용하면, 페이지에 그 태그가 없는 것으로 보인다. (공간을 차지 하지 않는다)
visibility hidden을 적용한 요소는 그 요소가 보이지 않지만, 그 태그가 보였을때 있었을 공간을 차지한다.
position
레이아웃을 유용하기 위해 사용하는 속성,
position 속성값에 따라 어떤 요소를 기준으로 배치할 것인지 결정한다.
하지만 배치를 할 때, position 속성만 부여해서는 안되고
top, left, right, bottom 속성을 부여해서 위치를 조정해 주어야 한다.
top: 기준 위치의 상단과 떨어진 거리
left: 기준 위치의 왼쪽과 떨어진 거리
right: 기준 위치의 오른쪽과 떨어진 거리
bottom: 기준 위치의 하단과 떨어진 거리
static
position: static;요소를 일반적인 문서 흐름을 대로 배치한다.
position 속성값의 기본값으로 따로 position 속성을 지정하지 않으면
position:static을 가진다.
다른 position 속성값을 강제로 되돌리기 위해 position:static 속성을 사용한다.
relative
position: relative;자신의 본래구조에서 있었던 자리를 기준으로 배치한다.
(뒤에 나올 position: absolute를 사용하기 위해 그 부모요소에 많이 사용되는 속성값 매번 사용 하면서도 정작 position: relative가 어떤 요소를 기준으로 배치되는지 몰랐다 ㅠㅠ 반성!!)
absolute
position: absolute;
자신의 부모요소를 기준으로 배치 한다.
단, 단순히 부모요소가 absolute:static이면, position: static 속성이 아닌 조상요소 까지 거슬러 올라가 그 조상 요소를 기준으로 배치한다.
(주로 부모요소를 기준으로 배치시키기 위해, 배치하려고 하는 부모요소에 absolute: relative 속성을 부여한다.)
class가 child인 div태그에 position:absolute 속성이 부여되어 있다.
부모 요소는 parent를 class로 가진 div태그이지만,
position: static이므로 position 속성이 static이 아닌(position: relative)
조상 요소 grand-parent를 class로 가진 div 기준으로 배치 된다.
fixed
position: fixed;요소를 일반적인 문서 흐름을 무시하고, 페이지 레이아웃에 공간도 차지 하지 않는다. 보이는 뷰포트의 초기 컨테이닝 블록을 기준으로 배치 한다. 스크롤을 내려도 그 뷰포트 에 고정되어 있다.
단, 요소의 조상 요소 중 하나가 transform, perspective, filter 속 none이 아닌 속성값을 가지면, 뷰포트 대신 그 조상 요소를 기준으로 컨테이닝 배치 한다.
(perspective와 filter의 경우 브라우저별로 결과가 다름에 유의하자!!)
Author And Source
이 문제에 관하여(display / position 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bufflect/display-position-속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
