-
[생활코딩] CSS GridStudy/HTML & CSS 2019. 11. 26. 21:28반응형
<div>
-
무색무취의 아무 의미도 없는 디자인용 태그
-
block level element
-
css / javascript를 통해서 어떤 정보를 제어하고 싶을 때 그것을 감싸주는 역할을 하는 디자인용 태그
<span>
-
무색무취의 아무 의미도 없는 디자인용 태그
-
inline level element
Grid는 HTML의 디자인을 담당하는 CSS의 기술 중 최신 기술에 속한다.
CSS 속성을 적용시키기 위해서는 '태그'가 반드시 필요한데,
<h1> 또는 <p> 와 같은 태그들은 의미를 가지고 있으므로 남용하면 정보가 꼬일 수가 있다.
따라서 이럴 때 사용하는 태그가 바로 <div> 와 <span> 태그이다.
이 둘은 아무 의미가 없는 태그이기 때문에 디자인에 자유롭게 사용할 수 있다.
Grid를 사용하기 전 선행조건
1. 그리드를 사용하고자 하는 <태그>가 부모 <태그>로 묶여 있어야한다.
2. 부모 태그에 id값을 넣어줘야한다. (혹은 class값)
3. 부모태그에 원하는 grid 속성을 넣어주면 된다.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #grid{ border:5px solid pink; display:grid; grid-template-columns: 150px 1fr; } div{ border:5px solid gray; } </style> </head> <body> <div id="grid"> <div>NAVIGATION</div> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </body> </html>grid-template-columns : grid의 가로값을 지정해주는 속성
=> 예시 코드를 보면 첫번째 자식태그는 150px로 가로길이가 고정되고, 다른 한 태그는 남은 공간을 차지한다.
column은 부모와 자식 태그 한 쌍을 의미한다. 이것이 세 쌍이 되면 컬럼 값을 3개 설정해줘야 한다.
이렇게 Grid는 페이지의 전체적인 '틀'을 잡아주는 기술이다.
전체적인 구조를 Grid로 그리고, '개발자 도구'와 '박스모델' 을 이용해 세부적인 내용을 조절해 웹페이지를 꾸밀 ㅇ수 있다.
반응형'Study > HTML & CSS' 카테고리의 다른 글
[생활코딩] CSS 코드의 재사용 (0) 2019.11.27 [생활코딩] 미디어쿼리 (0) 2019.11.27 [생활코딩] CSS Box model (0) 2019.11.26 CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성 (0) 2019.11.24 [코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, Float (0) 2019.11.23 -