TIL
스타일링을 위해서만 사용하는 태그!
div
division 영역 나눔, 컨텐츠 분할 요소이다.
블록 컨테이너이며, 영역을 구분 짓거나 무리를 짓는 태그로 상당히 광범위하게 사용된다.
공간을 나누는 것 외에 별다른 기능은 없다.
정리를 도와주는 역할 뿐이지만 HTML에 가장 큰 도움을 주며 많이 사용된다.
span
인라인 컨테이너이며, 본질적으로 아무것도 나타내지 않고 스타일을 적용하거나 인라인 요소를 묶을 때 사용한다.
float
float이란?
한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌, 우측에 배치되게 한다.
- left : 왼쪽으로
- right : 오른쪽으로
- none : 기본값
float 해제하기
clear
.box {
clear:both;
}주의 사항
자식 요소들이 모두 float 속성을 가지게 되면,
컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의해야 한다.
해결 방법
부모에게 높이 값을 지정해준다. (overflow-hidden)
.container {
overflow:hidden;
}clear-fix 방법 (부모의 가상 요소 ::after를 사용하는 방법)
.container::after {
content:'';
display:block;
clear:left;
}flex
flex-container에 사용하는 속성
display : flex;
자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법이다.
부모 요소를 flex-container, 자식 요소를 flex-item 이라고 부른다.
1차원적 레이아웃(x축 혹은 y축)을 위해 주로 사용한다.
flex-direction
컨테이너 내 아이템을 배치할 때, 주축 및 방향을 지정한다.
- row : 기본 값, 왼쪽에서 오른쪽 (주 축이 행 방향)
- column : 위에서 아래 방향 (주 축이 열 방향)
- row-reverse : 오른쪽에서 왼쪽
- column-reverse : 아래에서 위 방향
justify-content
주 축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있다.
flex-start, flex-end, center, space-between, space-around, space-evenly
align-items, align-content
align-items : 교차 축을 기준으로 정렬한다.
align-content : 컨테이너의 교차 축의 아이템들이 여러 줄일때, 사용 가능하다.
[이 속성은 flex-wrap: wrap인 상태에서 사용해야 한다.]
gap
아이템 사이의 간격을 설정할 때, 사용할 수 있는 속성이다.
flex-basis
flex-item의 초기 크기를 설정한다.
width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 컨텐츠에 따라 유연한 크기를 가진다는 것이다.
- auto : 기본 값
flex-basis 값이 적용되어 있다면, row일 경우 width 값이 무시하며 column일 경우 height 값이 무시된다.
기본적으로 px이나 em 등의 단위 값을 사용하며, 0외에 다른 상숫값을 사용할 수 없다.
flex-grow
아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정한다.
형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당 받는다.
값을 0을 줄 경우 늘어나지 않는다.
flex-shrink
아이템의 크기를 고정하거나 축소할 때 사용한다.
값을 0을 줄 경우 줄어들지 않는다.
flex
단축 속성이다.
flex-grow, flex-shrink, flex-basis 순이다.
flex: 1 1 100px;grid-item에 사용하는 속성
grid-area
grid-column-start, grid-column-end, grid-row-start, grid-row-end
grid-row-start: 1; /* 1 */
grid-row-end: 2; /* 3 */
grid-column-start: 1; /* 2 */
grid-column-end: 4; /* 4 */
grid-row: 1/2;
grid-column: 1/4;
grid-area: 1/1/2/4;
grid-area: 1/1/1/span 3; grid-template-areas / grid-area
.container {
grid-template-areas:
"header header header"
"section section aside"
"footer footer footer"
}
header {
grid-area:header;
}z-index
z-index 속성을 grid 안에서도 사용할 수 있으며, grid 안에서는 굳이 position 속성을 사용하지 않더라도 화면에 보여지는 우선순위를 설정할 수 있다.
align-self
아이템 개별로 수직(열) 정렬을 지정한다.
stretch, center, start, end
justify-self
아이템 개별로 수평(핼) 정렬을 지정한다.
stretch, center, start, end
place-self
align-self, justify-self 를 함께 적는 단축 속성이다.
/* 수직: 중앙, 수평 : 끝(오른쪽) */
place-self: center end;grid
단축 속성이다.
grid-template-rows, grid-template-columns,
grid-template-areas, grid-auto-rows,
grid-auto-columns, grid-auto-flow
grid: auto-flow / 1fr 1fr 1fr;
grid: auto-flow dense / 40px 40px 1fr;