[생활코딩] WEB2 CSS -10강, 11강 (div와 grid)

1. 그리드

디자인을 위해 어떠한 의미도 담지 않은 태그가 필요한 순간이 있다. 

무색무취의 태그
<div> => 블럭 엘리먼트
<span> => 인라인 엘리먼트

 

CSS에도 부모자식 태그가 가능하다

<div id="ㅁ">

<style>
#ㅁ {
}
</style>

id값을 주어 묶을 수 있다!

 

드디어 그리드 사용 등장!

disply: grid;
grid-template-colums: ___ ____

이 전체 문서 중, 이 부분에 주목해보자

일부러 그리드의 영역을 확인하기 위해 solid pink와 gray로 표현했다. 

grid -template-columns을 주었을 때 요렇게 변하는 군!

---

이 내용을 응용해서, 만들던 페이지에도 그리드를 적용해보았다!

바로 이렇게.

그런데 저 <ol> 박스 크기만큼만 내려온 border-right 선을 더 쭈욱 내리고 싶은데 흠.. 어떻게 할 수 있을까? 다음 강의를 다시 play해보았다.

 

 

아하.. 위에서 나는 <ol>태그도 따로 <div>로 한 번 더 묶어줬었는데, 이고잉쌤은 <ol>태그는 냅두고 밑에만 div로 묶어준 다음에 전체를 <div id="grid">로 묶어주었다. 코드가 더 깔끔하고 간소화된 것..! 놀랍게도 그렇게 만드니까 세로줄이 수우우욱 끝까지 늘어났다. 이유는...뭐지..왠지는 모름..