TIL # 36 : [CSS] Layout
Display
Display 속성은 element의 render block type을 결정한다. 가장 대중적인 값은
block
,inline
및inline-block
이다.
1. block
block
level인 element는 컨텐츠 뿐만 아니라 자기 container의 전체 너비를 차지한다. 그리고 높이와 너비를 수동으로 조정할 수 있다. 항상 줄발꿈이 일어난다!
2. inline
inline
element는 block
과 다르게 컨텐츠 자체만 꾸며주기 때문에 최소한의 공간을 차지하며 수평으로 흐른다. 또한 높이와 너비를 수동으로 조정할 수 없고, margin padding-top, padding-bottom, line-height도 사용할 수 없다.
3. inline-block
inline-block
element는 서로 옆으로 나열 가능하며, 높이와 너비를 수동으로 조정할 수 있다. margin padding-top, padding-bottom, line-height도 적용 가능하다.
Position
Position 속성은 element가 배치되는 방법을 설정하며 top, left, bottom, right이 position의 최종 위치를 결정한다. Position의 value는 총 5개다.
1. static
static
은 기본 설정값이다.
2. relative
relative
는 자신이 담겨있는 부모 안에서 T/L/B/R 띄울 수 있다.
3. absolute
absolute
는 담겨있는 부모 공간을 침범하며 자식 관계를 무시하고 옮겨다닌다. 또한 position: static
속성이 없는 부모를 기준으로 움직인다. 부모 중에 relative
, absolute
, fixed
값이 없다면 바로 body
태그가 그 기준이 된다. 그리고 absolute
가 되면 div여도 width:100%가 아니다.
4. fixed
fixed
는 어떤 주어진 영역에 fixed
되며 부모가 아닌 window page에서 움직인다.
5. sticky
sticky
는 scrolling 해도 안 없어지고 원래 자리에 붙어있다.
** 호환성 여부를 꼭 확인하고 써야한다.
float
특징
-
전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고 더 이상 자리가 없으면 아래로 자리잡게 된다.
-
float 속성을 이용해 구조를 잡고 싶으면
block
속성을 가지고 있어야 한다.block
속성을 갖고 있는 요소는 높이와 너비를 지정할 수 있기 때문이다. -
크게 3가지로 나뉜다
- left : 왼쪽부터 순서대로 부유
- right : 오른쪽부터 순서대로 부유
- none : float 속성 해제
- 빈공간이 없을 때까지 계속 다른 객체가 따라 올라온다.
div
에 float 속성을 주면div
다음에 있는 요소가 그 자리가 비었다고 생각하고 그 자리로 올라온다.
속성 clear하기
1.clear: left, clear: right, clear: both
clear: left -> float: left 해제
clear: right-> float: right 해제
clear: both -> 양쪽 해제
float 된 요소 밑에 빈 임의의 요소를 만들어 clear
를 준다. 이 속성은 float를 취소시킨다. 그러나 마크업의 흐름도 깨고 HTML 코드양도 많아진다.
2.clearfix
요소에 float를 적용하고 요소의 container(부모)에 미리 설정한 clearfix를 적용한다.
.clearfix::after {
content: "";
clear: both;
display: block;
}
3. overflow: hidden
부모에 overflow: hidden
을 줄 수 있다. 그러나 부모의 높이, 너비값보다 자식이 높이, 너비값이 더 크면 곤란하다.
4. 부모도 float하기
block
요소의 속성이 없어지며 width: 100%
를 추가하거나 해야 한다.
Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://www.codecademy.com/learn/learn-css/modules/learn-css-display-positioning/cheatsheet#:~:text=Positioning%20in%20CSS%20provides%20designers,specific%20spot%20on%20a%20page.
https://heropy.blog/2018/11/24/css-flexible-box/
https://www.youtube.com/watch?v=jWh3IbgMUPI
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://takeknowledge.tistory.com/128
Author And Source
이 문제에 관하여(TIL # 36 : [CSS] Layout), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mjhuh263/TIL-36저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)