우선 그리드 개념을 이해하기 위해
아래 코드를 입력하고 결과를 확인한다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px pink solid;
}
div{
border: 5px gray solid;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ACTICLE</div>
</div>
</body>
</html>
그리드를 사용하기 위해서는 style 태그안에 있는 #grid에 코드를 추가해야한다.
<style>
#grid{
border: 5px pink solid;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px gray solid;
}
</style>위 코드의 grid-template-columns: 150px 1fr의 의미는
첫번째 컬럼인 NAVIGATION은 150px의 공간을 가지고
두번째 컬럼인 ACTICLE은 150px을 제외한 나머지 공간을 가진다는 의미이다.
그래서 결과를 보게 되면 잘 나온 것을 확인할 수있다.
만약 grid-template-columns: 2fr 1fr이라면
첫번째 컬럼인 NAVIGATION은 2fr과 1fr을 합친 3fr 중 2fr의 비율(2/3fr)을 갖는다라고 생각하면 된다.
두번째 컬럼인 ACTICLE은 2fr과 1fr을 합친 3fr 중 1fr의 비율(1/3fr)을 갖는다라고 생각하면 된다.
그리드의 장점은 ACTICLE에 의미없는 많은 내용을 넣었을 때
이 내용을 감싸는 태그가 자연스럽게 커지는 것은 물론이고
NAVIGATION 태그도 같이 커진다는 것이다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px pink solid;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px gray solid;
}
</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>
그리드에 대해 알게되었기 때문에
만들던 웹페이지에 적용해 볼 차례이다.
body태그 안에 있는 h2 태그와 p태그를 div 태크로 묶어주고
ol태그와 h2 태그와 p태그를 묶은 div 태그를 div태그로 묶어 준 후 id값으로 grid를 준다.
<body>
<h1><a href = "index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href = "1.html">HTML</a></li>
<li><a href = "2.html" style = "color: black; text-decoration:underline;">CSS</a></li>
<li><a href = "3.html">JavaScript</a></li>
</ol>
<div>
<h2>CSS이란 무엇인가?</h2>
<p>
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로
작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다.
CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정합니다.
CSS는 오픈 웹의 핵심 언어 중 하나이며, W3C 명세가 다양한 브라우저의 표준으로 작동하고 있습니다.
과거에는 CSS 명세의 다양한 부분을 순차적으로 개발했으므로 CSS1, CSS2.1, CSS3처럼
버전을 붙이는 것이 가능했습니다. 그러나 공식 버전이 CSS4로 올라가지는 않을 것입니다.
CSS3 이후, CSS 명세의 범위가 엄청나게 넓어짐에 따라 여러 CSS 모듈 사이의 차이도 너무나 커졌습니다.
그래서 이제는 권고안을 모듈별로 개발하고 공개하는 것이 더 효과적인 상황입니다.
이제 W3C는 CSS 명세의 버전을 올리지 않고, 대신 주기적으로 CSS 명세 안정판의 스냅샷을 생성하고 있습니다.
</p>
</div>
</div>그 후 스타일 태그로 넘어와서 id값이 id인 곳 아래 있는 ol태그에 위에서 연습했던거와 같이 작성을 해주면 된다.
<style>
#grid ol{
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
참고한 생활코딩 자료
https://opentutorials.org/course/3086/18322
그리드 - 생활코딩
그리드의 기본 사용법 강의 caniuse 홈페이지 소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid
opentutorials.org
'WEB' 카테고리의 다른 글
| [WEB/JS] 웹페이지 주/야간 모드 설정1 (0) | 2022.07.07 |
|---|---|
| [WEB/JS] 출력/이벤트 처리 (0) | 2022.07.06 |
| [WEB/CSS] 박스 모델 이해하기 (0) | 2022.07.01 |
| [WEB/CSS] 정렬, 폰트 크기 조절하기 (0) | 2022.06.30 |
| [WEB/CSS] 글자 색 바꾸기, 밑줄 없애기 (0) | 2022.06.29 |
