1차원 레이아웃 flex속성(수직, 수평중 택1)와 다르게 grid는 2차원 레이아웃(수직, 수평 둘다 가능) grid는 두 방향으로 레이아웃 할 수 있음
grid는 flex와 같이 container(부모요소)와 item(자식요소)으로 구분이 됨
용어정리
Grid Track(그리드 트랙): grid의 행(row) 또는 열(column)
Grid Line(그리드 라인): 행과 열 사이사이에 있는 너비. gutter라고도 함
Grid Cell(그리드 셀): grid 하나의 칸. 아이템들이 들어갈 수 있는 하나의 공간
Grid Area(그리드 여역): 셀로 이루어진 영역(셀들의 집합)
Grid Gap(그리드 갭): grid 셀 사이의 간격
Grid Container
grid는 컨테이너에 display: grid; 를 주면서 시작됨
.container {
display: grid;
}
그리드 트랙의 크기들을 지정해 주는 속성. 단위는 px, fr(=fraction으로 숫자 비율대로 트랙의 크기를 나눠줌) repeat함수: repeat(개수, 비율)반복되는 값을 자동으로 처리할 수 있음 minmax함수: 최솟값과 최댓값 지정 auto-fill, auto-fit: column개수를 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채우는것. auto-fit은 그리드 컨테이너 내부에 공간이 남을 경우, 그 공간을 각 셀들이 나눠 갖는다
grid-template-rows: 그리드 행 배치
grid-template-columns: 그리드 열 배치
//고정크기와 가변크기를 섞어 쓸 수 있음
grid-template-columns: 200px 2fr 1fr;
//repeat(반복횟수, 반복값)
grid-template-columns: repeat(5, 1fr);
//minmax
grid-template-row: repeat(3, minmax(100px, auto);
최소100px는 확보하며, 100px넘거나면 auto처리
가상클래스는 HTML에 이미 존재하는 클래스를 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것
(:)세미클론 한개 사용
* :link
방문하지 않은 링크에 스타일 적용
* :visited
방문한 링크에 스타일 적용
* :hover
특정 요소에 마우스 포인터 올려놓으면 스타일 적용
* :active
마우스를 클릭했을 때
* :focus
마우스를 클릭하고 입력하는 동안 적용
* :first-child
첫번째 자식
* :last-child
마지막 자식
* :nht-child(2n+1)
홀수 번째 자식
가상 요소(pesudo-element)
HTML에 존재하지는 않지만 가상의 요소를 생성하여 스타일을 주는 것
(::)세미클론 두개 사용(세미클론이 하나며도 작동은 되지만 이중클론 권장)
content=""; 가 있어야 가상요소가 만들어지므로 필수 속성
* ::before
요소의 콘텐츠 시작 부분에 생성된 콘텐츠 추가
* ::after
요소의 콘텐츠 마지막 부분에 생성된 콘텐츠 추가
Phark Method 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 하는 방법
배경
background-image: url("경로") 상대경로: index파일을 기준으로 지정하는 바법 절대경로: http://가 포함되어 있는 경로.이미지 가져올때에는 우클릭 이미지보기를 한 후 '이미지 주소 복사'를 하면 된다
background-color default value: transparent(투명한)
background-size default value: auto
cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain: 비율을 유지. 요소의 더 짧은 너비에 맞춤
background-repeat 배경 이미지의 반복 방법 지정 가로축이나 세로축을 따라 반복할 수도 있고 반복하지 않을 수도 있음
repeat: default value
no-repeat: 반복하지 않음
repeat-x: x축으로 반복
repeat-y: y축으로 반복
background-position 배경 이미지 시작 위치 지정 기본적으로 왼쪽 상단 꼭지점부터 시작함
top left, top center, top right: 왼쪽 상단, 가운데 상단, 오른쪽 상단
center left, center center, center right: 왼쪽 중앙, 중앙, 오른쪽 중앙
bottom left, bottom center, bottom right: 왼쪽 하단, 가운데 하단, 오른쪽 하단
background-attachment 배경 이미지의 스크롤 여부를 정함 default value: scroll
fixed: 요소가 스크롤 될때 배경 이미지가 뷰포트에 고정되는 속성 값
배치
position 요소의 위치 지정 기준 default value: static
relative: 요소를 원래 위치를 기준으로 상대적으로 배치
absolute: 위치 상 부모 요소를 기준으로 잡고 설정(부모요소에 relative를 심어줘야함)
fixed: 뷰포트를 기준으로 고정된 위치에 배치
요소의 쌓임 순서(stack order)
요소에 position 속성의 값이 있는 경우 위에 쌓임
1번의 조건의 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
1,2번의 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임
z-index 요소의 쌓임 정도를 지정 default value: auto 숫자가 높을수록 위에 쌓임
position 속성을 사용하면서 요소의 display가 변경됨 relative, static는 변경되지 않지만 absolute, fixed는 display가 block요소로 바뀌기 때문에 따로 display: block을 안해줘도 됨 (inline요소는 가로세로 값을 같지 못하는데 값이 변경됐을 경우 위와같은 상황 잘 살펴보기)
플렉스(flex)
flex-container (플렉스 컨테이너)
flex-direction: 아이템들이 배치되는 축의 방향을 결정하는 속성
row: default값. 가로(행) 방향으로 배치
row-reverse: 아이템들이 역순으로 가로 배치
column: 세로(열) 방향으로 배치
column-reverse: 아이템들이 역숙으로 세로 배치
flex-warp: 컨테이너가 더 이상 아이템들을 한 줄에 담을 공간이 없을 때 아이템 줄바꿈 여부
wrap: 줄바꿈
no-wrap: default값. 줄바꿈을 하지 않음
flex-flow: flex-direction과 flex-warp을 한번에 지정할 수 있는 단축 속성. 순서는 direction, warp
justify-content: 메인축 방향으로 아이템 (수평)정렬
flex-start: default값. 아이템 시작점 정렬
flex-end: 아이템 끝점 정렬
cneter: 아이템 가운데 정렬
space-between: 아이템들 사이에 균일한 간격을 만들어줌
space-around: 아이템들 둘레에 균일한 간격을 만들어줌
space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어줌
align-content: flex-wrap: wrap; 이 설정된 상태여야 하며, 아이템들의 행이 2줄 이상일때 (수직)정렬
stretch: default값. 아이템이 수직축 방향으로 끝까지 늘어남
flex-start: 아이템 시작점 정렬
flex-end: 아이템 끝점 정렬
cneter: 아이템 가운데 정렬
baseline: 아이템들이 텍스트 베이스라인 기준으로 정렬
align-items: 수직축 방향으로 아이템들을 정렬
stretch: default값. 아이템이 수직축 방향으로 끝까지 늘어남
flex-start: 아이템 시작점 정렬
flex-end: 아이템 끝점 정렬
cneter: 아이템 가운데 정렬
baseline: 아이템들이 텍스트 베이스라인 기준으로 정렬
flex item에 적용하는 속성들
flex-basis: flex 아이템의 기본 크기 설정
flex-basis: auto(default);, 단위는 %, px, em, rem으로 표현갸능
flex-grow 아이템들의 증가 너비 비율 default값은 0 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가짐. 즉 여백의 비
flex-shrink 아이템들의 감소 너비 비율 default값은 1 감소너비를 적용하고 싶지 않으면 flex-shrink: 0;으로 부여해 주변 적용된 크기 그대로 유지
flex flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성
align-self: align-items의 아이템 버전. 해당 아이템의 수직축 방향 정렬
order 각 아이템들의 시각적 나열 순서를 결정 숫자가 작을수록 앞에 적용됨 default값은 0
1차원 레이아웃 요소의 부모요소에 display: flex를 주면 수평정렬이 됨 flex-container는 부모요소가 되고 flex item은 자식요소가 됨 justify-content: center; align-item: center; 를 해주면 한가운데 정렬 가능
가상 요소(pesudo elemnet) 가상 요소 섵낵자는 앞에 콜론이 두개 붙는게 웹 표준 항상 content: ""; --> 항상 넣어줘야함 ::before,::after는 inline 요소기 때문에 display:block;을 해줘야 가로세로값이 적용됨 ::after
