1. Grid
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공
→ 전체적인 레이아웃을 그리는 데 사용한다.
2. 태그
1) <div>
- 디자인이라는 목적을 위해 어떠한 의미도 존재하지 않는 태그를 사용해야 될 때가 있다.
그럴 때 사용하는 무색무취와 같은 태그가 <div> 태그
- 아무 의미도 없이 디자인의 용도로만 쓰는 태그
- 태그들을 묶어 그룹화하는 컨테이너로서 전체 문서를 구조화함
- 스타일시트와 결합하면 그룹에 속한 태그들을 한번에 모두 같은 스타일로 적용 가능
- block level element이므로 화면 전체를 쓰기 때문에 줄이 바뀜
<div>NAVIGATION</div>
<div>ARTICLE</div>
2) <span>
- <div>와 똑같은 목적으로 사용하는 태그
- 단, <span>은 inline element이다.
<span>NAVIGATION</span>
<span>ARTICLE</span>
3. Grid 과정
1) 태그의 부피감 확인
<div> 태그에 border 효과를 넣어서 확인
<style>
div{
border:5px solid gray;
}
</style>
2) 2개의 <div> 태그를 감싸는 부모 <div> 태그 만들기
<div>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
3) 부모 <div> 태그에 id 부여하기
2개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요함
디자인의 목적만으로 부모 태그 사용
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
4) id 값이 grid인 태그에 대해서 효과주기
#grid{
border:5px solid pink;
}
5) display를 사용해서 태그가 표시되는 방법 바꿔주기 (부피감 조절)
그리드 형태로 만들기 위해서 display 값을 grid로 선언해줘야 한다.
display:grid;
grid-template-rows: 명시적 행(Track)의 크기를 정의
grid-template-columns: 명시적 열(Track)의 크기를 정의
grid-template-columns: 50px 50px; 는 column을 각각 50px, 50px으로 만들겠다는 의미이다.
6) 하나의 열에 배치
grid-template-columns: 150px 1fr;
※ 150px: 고정 크기 / 1fr: 가변 크기
fr은 유연한 크기를 갖는 단위이다.
그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타낸다.
grid {
display: grid;
grid-template-columns: auto 100px 1fr 2fr;
}- 1번 열은 auto를 사용한다. 해당 Element 내부 콘텐츠에 맞게 사이즈가 조정된다.
- 2번 열은 100px을 할당한다. 100픽셀 크기만큼의 폭을 차지한다.
- 3번 열은 1fr 크기를 할당한다. 1fr이란 남은 자유 공간의 1/3(총fr)만큼의 크기를 할당한다.
- 4번 열은 2fr 크기를 할당한다. 2fr이란 남은 자유 공간의 2/3(총fr)만큼의 크기를 할당한다.
4. 그리드 써먹기
정확히 어떤 태그에 효과를 줄 것인지 의미를 분명히 하기 위해, 선택자 앞에 조상 선택자를 써줘도 된다.
#grid ol{
}
#grid #article {
}