5일차 : 그리드

5일차 : 그리드

 

 

그리드 하니까 서강준이랑 김아중 나오는 드라마가 생각나네요.

저도 유튜브에서 드라마 리뷰로 간단히 본거긴 한데.. 이 드라마 보신 분은 그리드의 뜻을 아실겁니다.

그리드는 greed 가 아니라 grid 이고, 격자무늬라는 뜻입니다.

 드라마에서도 태양풍으로부터 지구를 보호하기 위해 이시영이 그리드라는 촘촘한 방어막을 설치하죠.

 

아무튼! 그래서 그리드는 어디에 사용되는 것일까요?

웹페이지에서 페이지 레이아웃을 쉽게 설정하기 위해 사용하는 방법입니다.

 

그리드를 어떻게 사용하는지 알아보기 위해 그리드 파일을 새로 만들어 보겠습니다.

 

 

1) div 태그로 여러가지  영역 만들기

 

일단 아무 의미 없는 첫번째 영역와 두번째 영역를 div를 이용해 넣어보겠습니다.

 

 

☆ 여기서 잠깐! div란?

 

div는 division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용되는 태그입니다.

웹 페이지에서 논리적 구분을 정의하는 태그인데요.

이게 무슨말인가 싶은데.. 가장 작은 블록(공간)이라고 생각하면 됩니다.

 

요새는 레이아웃 배치를 거의 div를 활용해서 구성하여 그 쓰임새가 더 중요하다고 하니 잘 알아둡시다.

 

 

2) style 태그로 div 태그의 스타일을 정해주자!

 

위의 div는 겉으로 보기에는 그냥 문자만 두 줄 적어준 것 같은데요.

가시적으로 영역을 확인하기 위해서 style 태그를 사용해 봅시다.

 

 

테두리 그리는 것 잊어버리지 않았죠?

두가지 영역에 예쁜 테두리가 생겼습니다.

 

 

3) 그리드로 영역을 묶어준 후, style 태그로 나타내기

 

첫번째영역과 두번째영역을 div id="grid" 로 묶어줍니다.

그리고 스타일 태그에서 # grid 를 적고 핑크색으로 나타내줄게요.

그리고 그 아래 display:grid; 까지 적어줍니다.

 

display:grid 의 효과는 무엇인지 여기서는 확인할 수 없는데요.

 

 

4) grid template 설정하기

 

grid-template 를 이용해 두 가지 div 를 하나의 column 에 배치해 보도록 할게요.

grid-template-columns: 1fr 1fr 로 설정하여 화면 전체를 두 개로 나눠봅시다.

 

 

100px, 150px 처럼 특정한 값이 아니라 fr을 사용하면 화면을 일정 비율로 나누는 것이 가능합니다.

 

예를 들어 1fr 2fr 을 적는다고 하면, 화면 전체는 3fr이 되고 1:2의 비율로 나눠지겠죠.

바로 아래 처럼요.

영역을 하나 더 추가해서 3등분을 할 수도 있습니다.

 

여러분 그리고 또 한가지 신기한걸 배웠는데요.

지난번에 웹사이트에서 오른쪽버튼을 누르고 검사를 하면 그 웹사이트의 생김새를 볼 수 있다고 했죠.

 

여기서 박스 부분을 선택하고 숫자를 더블클릭하면, 숫자를 변경할 수 있습니다.

그리고 변경한 것을 바로 옆에서 확인할 수도 있죠.

 

저는 첫번째영역의 보더 부분에 100을 넣어보았는데, 왼쪽 회색 부분이 엄청 두꺼워 진 것을 알 수 있죠.

 

물론 여기서 수정한다고 해서 값이 변경되는 것은 아니고, 직접 코드를 수정해 주어야 합니다.

미리보기라고 생각하면 쉬워요.

 

적절하게 값을 변경해 본 다음, 이정도가 보기에 좋겠다 싶은 값이 있으면 원본 파일에서 수정해주면 됩니다!

 

 

☆ can i use 사이트 (caniuse.com)

 

구글에 can i use grid 라고 검색하면 can i use 라는 사이트가 나오는데요.

아래와 같이 표를 통해 grid 를 어디서 사용할 수 있는지 확인할 수 있습니다.

 

 

초록은 사용가능하다는 뜻이고, 빨강은 사용 불가, 노랑은 일부분만 사용 가능하다는 뜻입니다.

같은 크롬이나 파이어폭스라도 버전에 따라서 어떤건 가능하고 어떤건 불가한 걸 알 수 있죠.

 

내가 만든 코드가 어떤 브라우저에서든 잘 읽히는 것은 아니기 때문에 이 can i use 라는 사이트는 개발자들에게 매우 중요한 사이트라고 하네요.