그리드 소개

이번 글은 본문과 내용이 나란히 위치하게 하는 것이 무엇인지에 대한 소개입니다.

여러가지 방법이 있는데 아주 최신의 방법을 쓰려고 합니다.

바로 '그리드'라는 방법입니다.

우선 파일을 새로 만들어서 그리드라는 것이 무엇인지 알아봅시다.

<grid.html, 코드내용>

이 각각의 문자에다 테두리를 주고 나란히 배치하는 것을 해보겠습니다.

그러기 위해선 각각 어떤 태그로 묶어주어야 합니다.

지금 그냥 디자인을 하려고 태그가 필요한건데 h1같은 태그를 넣게되면 그 태그는 제목이라는 의미가 있어

사용이 애매하다.

이럴 때 사용을 하는 태그가 바로 <div>라는 태그입니다. 아무런 의미가 없고 그저 디자인의 용도로만

사용하는 태그입니다. div 태그는 block level element 입니다.

같은 목적으로 사용하라고 있는 다른 태그가 하나 더 있는데 그것은 바로 <span>태그입니다.

이 태그는 inline element 입니다. 필요에 따라서 둘 중에 하나를 쓰면 되겠습니다.

 

그리드를 알아보기 위해선 우선 각각의 태그의 부피감을 알아두어야 합니다.

그래서 style 태그로 이 웹페이지에 있는 모든 div에 border로 테두리를 만들어 줍니다.

그럼 부피감이 어느정도인지 눈에 보이게 됩니다.

이 Navigation과 article을 나란히 두는 것을 그리드를 통해서 해봅시다.

우선적으로 이 두개의 태그를 감싸는 부모가 필요합니다.

그 다음 부모 태그에다가 id를 줍시다. 그리고 부피감이 눈에 잘 보이게 border를 설정을 해줍니다.

이 두개의 태그를 나란히 배치하고 싶거나 어떤 배치를 하고 싶으면 그것을 감싸는 부모 태그가 필요합니다.

그래서 디자인의 목적만으로 div id = "grid"라는 것을 만든 것입니다.

그 다음 display: 를 통해서 어떤 태그가 표시되는 방법을 완전히 다르게 바꿀 수가 있습니다.

display:grid 라고만 쓰면 아무런 변화가 없습니다.

그 밑에 grid-template-columns를 써주고 속성값을 정해주면 변화가 생깁니다.

ARTICLE에는 1fr을 줘서 홈페이지의 크기가 변할 때마다 그 크기만큼 자동으로 커지게 됩니다.

NAVIGATION은 150px 을 고정적으로 준것입니다.

columns : 2fr 1fr 이라고 뒀을 때 fr이란 값은 화면 전체를 2와 1만큼의 비율로 자동으로 조정되는 단위라고

생각하시면 됩니다.

그리드를 사용하면 좋은 점이 Article위치에 Article말고 다른 의미없는 텍스트를 써도 자동으로 이렇게

변경이 되서 좋다.

이것이 바로 grid라고 하는 것입니다.

최신 기술을 적용해도 되는가를 보기 위해서는 아래 사이트가 아주 좋다고 한다.

https://caniuse.com/

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

여기서 사용하려는 기술의 키워드를 검색해보면 전세계적으로 어떤 상황인지 알 수가 있다.