CSS 기초 실습하기 (2)
그리드(grid)의 개념과 사용법
* 본 포스팅은 이전 글에서 이어집니다.
CSS 실습 두 번째는, '그리드'에 관한 내용이다. 본 포스팅 역시 생활코딩의 강좌를 공부한 내용을 바탕으로 했다.
그리드란?
목록과 본문을 나란하게 정렬하고 싶다면 어떻게 해야할까?
이를 위한 여러 가지 방법 중, 본 수업에서는 최신 방법인 '그리드'를 사용했다.
<div> 와 <span> 의 이해
본격적인 그리드 사용에 앞서, 아무 의미가 없이 디자인을 위해서만 사용하는 무색무취와 같은 태그 <div>와 <span>를 알고 가야한다.
<div>는 block level element로 화면 전체를 차지하고 <span>은 inline element이므로 줄바꿈이 되지 않는 것으로, 용도에 맞게 사용하면 된다.
grid 이해하기
출처 : 생활코딩, WEB2 CSS - 10. Introduction to GridNAVIGATION 과 ARTICLE을 나란히 정렬하는 작업을 위해 최신 방법인 grid를 사용할 것이다.
우선 <div> 를 사용하여 각각 감싸주고, 부피감을 확인하고자 stlye에서 div선택자에 테두리(border)를 적용해준다.
출처 : 생활코딩, WEB2 CSS - 10. Introduction to Grid다음으로 NAVIGATION 과 ARTICLE을 나란히 정렬하기 위해서는 이 둘을 감싸는 부모태그가 필요하다.
그렇기 때문에, <div>에 id를 grid 값을 넣은 태그로 둘을 감싸주고, 구별을 위해 #grid 선택자에 border를 핑크색으로 효과를 준다.
이 때 <div id="grid">라는 태그는 디자인의 목적만으로 만든 것이다.
출처 : 생활코딩, WEB2 CSS - 10. Introduction to Grid그리고 #grid에 display:grid로 선언해준다. 이 때는 아무 변화가 생기지 않는다.
하지만 grid-template-columns의 효과를 선언하면 이 때는 컬럼의 효과를 통해 나란히 배치되는 것을 알 수 있다.
150px 1fr의 순서로 입력하면, 첫 번째 박스(NAVIGATION)의 크기는 150px로 고정되고, 두 번째 박스(ARTICLE)의 크기는 1fr이 된다.
출처 : https://clay1987.blog.me/221440603630여기서 fr의 의미는, 동일 선상에 존재하는 fr들의 총합을 나눈 결과값이다.
특히 이 부분에서, 그리드의 개념은 매우 중요하기 때문에 잘 정리된 리플러스의 글을 별도로 함께 공부하면 좋을 것 같다.
리플러스, UI 디자인 스터디 : CSS 그리드 레이아웃 / FR유닛과 뷰포트 유닛
출처 : 생활코딩, WEB2 CSS - 10. Introduction to Grid그리드의 장점은, 한 박스의 크기가 커지면 옆의 박스도 같이 조절된 다는 것이다.
두 번째 박스의 임의의 텍스트를 넣어 공간이 커질 시, 옆에 NAVIGATION 박스도 그에 맞게 크기가 조정됨을 확인할 수 있다.
기술에 대해 검증하기 : caniuse.com
생활코딩에서는 매우 유용한 사이트를 소개한다. 바로 www.caniuse.com 이다.
현재 사용하려는 grid의 최신 기술이, 세계적으로 어떻게 통용되고 있는지와 어떤 브라우저세어 허용을 하고 있는지에 대한 정보를 확인할 수 있다.
Can I use grid? 를 입력하면, 각 브라우저 버전에서 어느정도로 지원되는지 컬러로 구분하여 보여준다.
그리고 grid는 전세계적으로 약 90%의 인구가 grid 이용하고 있기때문에, 사용하는데에 거의 지장 없음을 알 수 있다.
그리드 실습하기
부모태그를 통해 그리드 적용하기
출처 : 생활코딩, WEB2 CSS - 11. Using Grid그리드를 사용하여 본격적으로 레이아웃을 구성해 보자.
우선, <ol> 태그로 묶여있는 왼쪽박스와 <div> 태그로 묶여있는 아래 내용 (<h2>, <p>) 을 오른쪽 박스로 옮겨 나란히 정렬해야 한다.
이를 위해서는 이 두 박스 내용들을 묶어주는 부모태그가 필요하여, id를 grid로 명명해주는 <div id="grid"> </div> 로 크게 묶어주었다.
출처 : 생활코딩, WEB2 CSS - 11. Using Grid그 다음, #grid 선택자에 그리드 적용을 위해 display: grid ; grid-template-columns : 150px 1fr로 효과를 적용하면
좌측 화면과 같이 정렬된 것을 확인할 수 있다.
각 박스에 padding 값 적용하기
출처 : 생활코딩, WEB2 CSS - 11. Using Gridpadding 값을 적절히 적용하기 위해서, 먼저 ol 선택자에 padding-left: 33px;을 적용한다.
그리고 오른쪽 박스에 id 값을 article로 명명해주고, #article 선택자에 padding-left: 25px;을 적용한다.
출처 : 생활코딩, WEB2 CSS - 11. Using Grid하지만 선택자를 ol로만 명명할 경우에는 추후에 정보가 많아질 때 혼동이 올 수 있다.
그러므로 #grid 부모태그에 속한 자식인 ol 선택자를 의미하도록, #grid ol 이라고 작성하는 것이 더욱 정확하다.
마찬가지로 #article도 그 의미를 더욱 명확히 정의하기 위해 #grid를 앞에 붙인 선택자를 사용하는 것이 좋다.
