CSS - 6. 그리드의 개념
https://opentutorials.org/course/3086/18322
*생활코딩 강의를 따라가고 있습니다.
1. 그리드가 뭘까?
그리드란 코드로 디자인을 하기 위해 애쓰다가 나온 최신의 결정체이다. 이를 알아보기 위해 일단 연습 삼아 grid.html이라는 파일을 만들고 기본 코드를 입력해준다. 그리고 body에 아무 단어나 두 개의 단어를 입력하였다.
이제 이것을 두 개의 박스로 감싸서 나란하게 놓는 것이 우리의 목표이다.
2. 특별한 의미는 없어 단지 나누고 싶어 - 무색무취의 <div>
일단 평범한 본문 단어에 박스를 씌우기 위해서는 둘을 각각 태그로 감싸서 나눠줘야 한다. 어떻게?
여기에 h1과 같은 제목이라는 의미를 가진 태그를 쓰기는 찜찜하다, 그것은 어디까지나 제목이라는 뜻을 가지고 있으니까.
그럴 때, 그런 애매할 때 쓰는 것이 바로 div 태그다. 이 태그는 division의 약자로 아무런 의미가 없고 그저 디자인의 의미로만 쓰는 태그이다.
참고로 <div>는 박스 타입을 디폴트로 가지고 있기에 자동으로 줄 바꿈이 된다. 부피를 차지하지 않고, 해당 콘텐츠 크기만큼의 부피만을 갖는 inline태그를 원한다면 <span>이라는 태그를 사용하면 된다.
3. 그럼 일단 박스 부피부터 볼까 - border
이제 박스에 테두리 그리는 것은 익숙하다. <head> 태그 아래에 스타일을 열고 익숙한 border 타입으로 박스를 그려보자
<style>
div{
border:5px solid gray;
}
</style>
4. 나란히 두기 위한 발판 - div와 div의 id 부여
이 두 개의 박스를 나란히 두기 위해서는 먼저 이 두 개를 하나의 부모 아래 놓아야 한다. 그리고 나중에 스타일을 적용하기 쉽도록 이 부모 값에 id도 부여해보자.
두 박스를 또 하나의 박스가 감쌌다그리고 구분이 쉽도록 밖의 박스를 핑크로 바꿔 보았다. grid라는 아이디를 부여했으니 스타일에 #gird 값을 넣으면 된다
진리의 핑크5. 그리드의 적용 - display:grid / grid-template-columns:
자 이제 그리드를 만들기 위한 기반 작업은 끝났다. 이제는 진짜 그리드를 적용하기 위해 부모 태그의 스타일 아래에
display:grid;
이것을 입력해보자, 이제 그리드를 시작하겠다는 뜻이다. 하지만 이것만 입력한다고 해서 어떤 변화가 있지는 않다. 그리드를 사용한다고 했지 어떤 그리드를 사용할지는 아직 쓰지 않았으니까.
우리는 두 개의 상자를 나란히 배치할 예정이니 grid-template-columns:라는 것을 쓸 것이다. 표에 두 가지 내용이 나란히 있는 것처럼 칼럼을 이용하는 것이라고 보면 된다. 역시 이것만 써서는 안 된다. 나란히 놓되 각각 칼럼의 크기를 어떻게 잡아 줄지도 넣어야 한다. 나는 강의를 따라 앞에는 150px로 고정시키고 뒤는 나머지를 다 쓰도록 1fr을 사용하였다
grid-template-columns: 150px 1fr;
짜잔, 창을 잡아당겨보면 Navigation이 쓰여 있는 곳은 150픽셀로 고정되어 있고 나머지 뒤의 Article 부분만 길고 짧아지는 것을 볼 수 있다.
*fr이란?
여기서 fr이라는 것은 비율과 같은 느낌이다. 그래서 150px와 1fr대신 2fr과 1fr을 넣으면 두 칼럼의 비율이 2:1로 나뉘는 것을 볼 수 있다. 이렇게 그리드로 만들고 나면 내용이 아주 길어져도 이렇게 변화됨을 볼 수 있다.
이렇게 간단하게 목차와 본문을 넣을 만한 코드를 모두 배웠다.
*짚고 넘어갈 참고 사이트 - caniuse.com
캔아이유즈.com 이다. 여러 CCS와 자바 스크립트가 어떤 컴퓨터 환경에서 호환되는 지를 확인하는 것이다.
특정 코드가 호환이 되지 않으면 열심히 홈페이지를 제작했으나, 어떤 프로그램에서는 돌아가고, 어떤 프로그램에서는 깨져서 나올 수 도 있다. 그것을 알아보기 위해 이 사이트를 이용하면 좋다. grid는 어느 프로그램에서 사용이 가능한지 알아보면 대략 아래와 같다.
빨갛게 표시된 블랙베리 브라우저에서는 grid가 아직 사용이 안되고, 쑥색으로 표시된 IE 즉 인터넷 익스플로러에서는 부분적으로만 호환된다는 것을 알 수 있다.
자 여태까지 배운 grid 내용을 이제 내가 만드는 홈페이지에 직접 적용해보자... 는 다음 시간에 계속된다...!
