생활코딩 WEB2-10. 그리드 소개

그리드 : 데이터를 엑셀 모양의 정형화된 표 안에 나태내도록 하는 웹 기술

<div id="grid">
  <div>NAVIGATION</div>
  <div>ARTICLE</div>
</div>

NAVIGATION, ARTICLE 두 태그를 나란히 하기 위해, 부모 태그로 감쌈

#grid {
  border:5px solid pink;
  display:grid;
  grid-template-columns :150px 1fr

}

150px 1fr : 첫 번째 태그는 150px라는 사이즈 고정, 두 번째 태그는 나머지 공간 사용
1fr 2fr : 화면 전체를 3fr로 나누고, 첫 번째 태그는 1/3 만큼, 두 번째 태그는 2/3만큼 공간 차지

활용
#grid ol { padding-left : 33px };
조상이 grid인 ol태그 선택하는 선택자가 됨. id선택자를 통해 어떤 태그에 효과를 줄지 분명히 할 수 있음.

<div> : division 약자. 디자인 목적 만을 위한 어떤 의미도 존재하지 않는 태그. block level element(태그) 화면 전체 써서 줄바꿈 됨

<span> : div태그와 같은 목적. inline element

웹 브라우저 최신 웹 기술 적용 여부 확인 사이트
Caniuse.com