3(grid)
grid 란?
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
grid의 뜻은 격자이며 간단하게 말해 css에서는 페이지를 정리하는데 사용합니다.
페이지를 정리하기 위해 grid를 사용하며 사용하는 tag는 div 입니다.
div tag
div tag란?
division 의 약자로 레이아웃을 나눌 때 사용합니다.
grid-template-columns - grid 속성의 가로 부분을 조정 할 수 있습니다.
grid-template-rows - grid 속성의 세로 부분을 조정 할 수 있습니다.
코드
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div {
border: 5px solid gray;
}
</style>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
결과
fr 단위 - fraction(분수) unit. 1fr is for 1 part of the available space.
grid 사용하기
- 중복되는 내용을 제거 합니다.
- 필요한 부분에 id 값을 지정해주고 id에 css속성을 넣어줍니다.
(#grid, #grid ol, #grid #article)
코드
<style>
body {
margin: 0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol {
padding-left: 33px;
}
#grid #article {
padding-left: 25px;
}
</style>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
(...생략)
</div>
결과
참고 및 출처: https://opentutorials.org/course/3086/18322
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
https://www.w3schools.com/tags/tag_div.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Author And Source
이 문제에 관하여(3(grid)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sorin44/CSS-3grid저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)