WEB2 CSS- 그리드

그리드에 대해서 배웠다.

 

그리드란?

CSS로 레이아웃을 만드는 기술이다.

 

저번에는 박스모델을 활용하여 이런식으로 만들었는데 그리드를 활용하면 캡처의 목록 아래 위치한 본문 내용을 바로 옆 위치에 위치 시킬 수 있다.

 

우선 그리드를 사용하고자 하는 부분을 <div>태그로 묶어 줘야한다.

이 <div>는 아무런 의미가 없고 단지 디자인 할때만 쓰이는 무색 무취의 태그이다.

위에 캡처는 웹페이지의 목록과 본문을 나란히 위치 시키기 위해 <div>태그로 묶어 준후

id속성을 주고 속성값을 grid로 하였다.

 

그리고 <style> 태그 안에 #.grid 선택자를 적어준 후 그안에 display: grid; 라고 적고

 grid-template-columns라고 적고 값을 지정해주면 되는데

여기서 columns는 열이라는 뜻이고 columns 뒤에 값은 목록과 본문이 나란히 있을 경우에 목록이 앞에 있으니 처음에 값을 지정해주면 되고 그 다음에는 본문의 값을 지정해주면 된다.

나는 150px 1fr;을 정해주었다.

 

느낀 점

CSS로 박스모델의 개념을 익힌 뒤 그리드로 레이아웃도 만들어 보는 등 강의를 통해 점점 웹 사이트를 디자인해보고 있는데 코드만을 활용해서 이렇게 디자인이 된다는 것이 신기하고

앞으로의 강의에는 얼마나 더 많은 디자인 요소들이 있을지 기대가 된다.