CSS그리드

<div>, <span> 태그는 디자인을 위한 태그이다.

태그는 써야 하겟는데 무엇인가 의미를 부여하고 싶지 않을경우 쓰는태그이다.

의미도 없고 기능도 없는데 특정 부분을 묶어주고 싶을때사용한다.

예시.

<그림1>

이렇게 div 안에 다양한 역할을 하는 태그들과 내용들이 한데 어우러져있는데 이것을 하나의 묶음으로 만들기 위해 div태그를 쓰는것이다!

cf)

<div>는 block level 의 속성을 가지고있고

<span>은 inline 의 속성을 가지고 있다. 

display: grid;에서

grid-template-columns =>같은 열에 놓고 싶을때 사용한다.

fr : 간격을 자동으로 조정되는 단위 (비율로)

ex) 2fr 1fr 로 할경우 2:1로 비율로 조정된다.

caniuse.com => html css jsp 기술등 중 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 사이트

#팁

<그림2>

<그림1>에있는 코드중, 조금 간격을 조절 하고 싶을때 이런식으로 코드를 작성하면된다.

여기서 한가지 문제가 생기는데, 지금처럼 코드가 길지 않을때는 ol태그를 한번만 쓸수도 있지만, 코드가 길어질 경우 ol태그가 여러번 쓰일수 있어서, 내가 원하지 않은 부분까지도 영향이 미칠수 있다.

또한 id태그 선택자인 article 은 그냥 그 자체로 1가지만 있기 때문에 고유한 값이긴하나, 나중에 누군가 이 코드를 보게 됐을때 그 article 선택자가 어디에 있는지 알면 좋기때문에,

이런식으로 해놓으면

id 태그 grid 선택자 안에 묶여있는 ol에만 영향을 주도록 한다 라는 의미로 쓰이고

또한 article 선택자가 grid 선택자 안에 있다고 그냥 명시적으로 찾기 편하게 해주는 역할을 해줄 수 있다.