그리드의 기본 사용법

기본 html을 세팅합니다.

 

 

**각각의 문자에 테두리를 주고, 그것들을 나란히 배치해보겠습니다.

 

1. 1) <div></div>: division의 약자입니다.

-아무런 의미는 없고 단지 디자인 용도로 쓰입니다.

-block level element여서 화면 전체를 씁니다. => NAVIGATION과 ARTICLE이 줄바꿈이 됩니다.

 

 

2) <span></span>은 <div></div>태그와 똑같은 목적입니다. 

하지만 Inline level element이어서 내비게이션과 아티클의 줄바꿈이 되지 않습니다.

 

 

따라서 <div>냐 <span>이냐는 무엇이 필요한지에 따라 사용합니다.

 

2. 그리드를 알아보기 위해 각각의 태그 부피감을 확실히 알 필요가 있습니다.

 

 

이 웹페이지의 모든 div에

<style>

div{

border : 5px solid gray;

}

</style>

 

이렇게 하면 부피감이 명확해집니다.

 

 

 

3. NAVIGATION, ARTICLE이 나란히 놓이게 하기 위해 최신방법인 그리드를 씁니다.

=>2개의 <div></div>를 감싸는 부모 태그가 필요합니다.

 

 

1) 부모 태그에 id를 줍니다.

 

<div id = "grid">

(id이름은 grid말고 다른 이름으로 해도 상관이 없습니다.)

 

<style></style>로 가서

#grid{

    border : 5px solid pink;

     }

 

*id값이 grid인 태그에서 두 태그를 감싸고 싶으면 두 태그를 묶는 부모 태그가 필요합니다.

 

 

2) NAVIGATION과 ARTICLE을 나란히 배열하겠습니다.

display : grid

를 입력합니다. 이것만으로는 아무런 변화가 없습니다.

(display는 block level element, Inline, none을 통해 어떤 태그가 표시되는 방법을 완전히 바꾸는 매우 중요한 속성입니다.)

grid - template - columns : 150px 1fr;

 

을 씁니다.

 

*150px는 첫번째 컬럼 부피이고 1fr은 나머지 공간을 다 쓴다는 뜻입니다.

 

 

*1fr 1fr라고 하면 두 개는 같은 크기가 됩니다.

 

 

*2fr 1fr는 첫 번째 컬럼이 2/3이고 두 번째 컬럼이 1/3이라는 뜻입니다.

 

 

4. Grid의 좋은 점

-text가 많아짐에 따라 자동으로 커집니다. 왼쪽에 있는 내비게이션 element도, 내비게이션을 감싸는 태그도 자동으로 커집니다. 

-아주 최신 CSS기술입니다.

 

 

5. 어떤 CSS기술을 현재 사용할 수 있는지 아닌지를 데이터에 근거해서 알아볼 필요가 있습니다.

caniuse.com

Can I use... Support tables for HTML5, CSS3, etc

여기로 들어갑니다. 여기에서 html, css, javascript 등의 데이터를 알아볼 수 있습니다.

 

 

빈 칸에 grid를 넣습니다.

 

 

Chrome 57에는 그리드가 지원됩니다.

 

 

IE 11에는 부분적으로 지원됩니다.

 

 

Chrome 4-28에는 그리드가 지원되지 않습니다.

 

이런 표를 통해 최신 기술인 CSS가 지원되는지 안 되는지 알아보고 유용하게 사이트를 선택해서 사용할 수 있습니다.

 

 

오른쪽 상단의 95.47%라는 수치는 전 세계의 그 비율만큼이 그리드를 이용할 수 있다는 의미입니다.