그리드 써먹기

우선 나란히 보이게끔 하고싶은 태그가 어느 부분인지를 파악후

그룹으로 묶어주어야 합니다.

그런데 2개의 독립적인 태그를 의미있는 태그인 h1과 같은 걸로 묶을 수는 없기 때문에

div라는 것을 사용을 합니다.

제일 부모인 div 태그를 grid로 지정하기 위해서 ID값을 줍시다.

그리고 id가 grid인 태그에 대해서 display를 grid로 지정하는 것이 첫번째

그 다음에 grid-template-columns에다가 순서로 봤을때 첫번째가 ol 이므로 150px, 1fr 이런식으로 값을 넣어봅시다.

<캡처를 애매하게 해서 중간이 아니다..>

뭔가 그럴듯한 홈페이지를 만든 것 같아서 기분이 좋다.

이렇게 만든 후 조금씩 디테일을 다듬어 가야겠죠??

검사를 통해 웹페이지에 들어가서 밑의 사진에 있는 숫자들을 더블클릭하면

웹페이지에서 바로바로 수정이 되는 것을 볼 수가 있다.. 물론 코드상으로는 수정이 안된다.

그래도 수치같은 것이 어떻게 적용이 되는가를 바로바로 볼 수 있어서 엄청 편한 것 같다.

<padding의 left값을 30>

이렇게 수정된 값을 Atom으로 style에 써줍시다.

변경을 하고 보니 HTML의 왼편에 여백이 너무 없는 것 같습니다.

div를 박스 모델로 사용하기 위해서는 div에 id값을 지정해주는 것입니다.

id값을 지정해주고 위의 방식과 같이 여백을 본 후 값을 지정해 줍시다.

그러면 이렇게 여백이 더 자연스럽게 생긴 것을 확인할 수가 있습니다.

이 다음 예제를 위해서 saw라는 클래스 값과 관련된 코드들을 다 지워줍시다.

그리고 active라고 되어있는 것도 다 지워줍시다.

그리고 ol이라는 것도 나중에 본문에서도 쓸 수 있기 때문에 style에 ol이라는 선택자를 지정해서 값을

정해주는 것은 좋은 방법이 아닙니다.

그래서 확인해보니 div id = "grid"로 감싸고 있기 때문에 밑에 사진과 같이 해주시면 웹페이지에 있는

모든 ol 중에 그 부모가 grid인 태그를 선택하는 선택자가 되는 것입니다.

필요없는 부분은 지워주시고 변경이 필요한 부분은 변경하면 됩니다.