이 글은 패스트 캠퍼스 HTML/CSS, Javascript 수업 내용을 바탕으로 하여 작성되었습니다.
display: inline-flex
>: 인라인 요소 같은 플랙스.clearfix
클래스 추가.clearfix::after {
content: "";
display: block;
clear: both;
}
display: flex
적용display
flex-flow
flex-wrap
justity-content
align-items
등align-self
order
등nowrap
: 한 줄에 표시(기본값)wrap
: 여러 줄로 표시wrap-reverse
flex-wrap
속성을 통해 2줄 이상이고, 여백이 있어야 사용 가능align-items
속성을 사용atretch
,flex-start
,flex-end
,center
,baseline
baseline
: 문자 기준선에 정렬order: 0
>.info {
flex: 1 1 100px; // 증가너비 감소너비 기본너비
}
flex-grow
flex-grow: 0
>flex-shrink
flex-shrink: 1
>flex-basis
flex-shrink: auto
>.container {
display: grid;
}
display: inline-grid
> 인라인 요소 같은 grid.container {
display: grid;
grid-template-rows: repeat(2, 100px); //100px 크기의 2행
grid-template-columns: repeat(3, 1fr); //1대1대1 비율로 3열
}
.container {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
.item:nth-child(2) {
grid-row: 1 / 3;
}
.container {
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(3, 1fr);
row-gap: 20px; // 행 간격
column-gap: 10px; // 열 간격
}
gap: 20px 10px
> : 행/열 순서로 간격 적용gap: 20px
> : 행/열 동일하게 20px 간격 적용:focus
input
, img
에서 사용 가능)// 바로 밑 자식만을 선택: ">"
.container > div:first-child {
color: red;
}
.container div:first-child {
color: red;
}
:nth-of-type(n)
:nth-child(n)
: 태그 종류가 모두 같아야 사용 가능:nth-of-type(n)
: 태그 종류가 달라도 사용 가능::before
content: "(내용입력 없으면 빈칸)";
반드시 추가::after
content: "(내용입력 없으면 빈칸)";
반드시 추가