▶생활코딩 WEB2 CSS - 10. 그리드 소개
매우우우우우 중요! 헷갈려서 정리할 겸 기록해 둠.
대체 화면 분할은 어떻게 하고, 선는 또 어떻게 넣는 건지 궁금했는데
css 역할이 이리 중할 줄이야....
일단 css가 활약할 수 있는 토대를 마련하려면
먼저 html에서 레이아웃을 나눠야 하는데, 이를 위해서는 각각의 영역 설정이 중요하다.
해서 영역을 설정하기 위한 <div>, <span>태그들과
설정시킨 영역에 속성값을 부여시키기 위한 id, class 등의 속성의 역할이 크다.
그러니까 html에서 <div>, <span>태그를 통해 영역을 구분하고 → 이를 css에서 활용함!
html의 태그들이지만 css로 분류해 정리하는 이유는,
<div>, <span> 모두 자체만으로는 큰 영향력이 없고, css와 결합했을 때 존재 의의가 극대화되기 때문.
▶id, class속성 참조
[css] id, class속성
html의 class속성 ≠ 자바스크립트의 class 보면 사용되는 곳이 엄밀히 다른데, 명칭이 같아 헷갈리는 것들이 있다. 말 나온김에 몇 가지 정리해보자면, (html의) 태그 · anchor의 약자 · 링크 역할 (css
vvvictory2.tistory.com
<div>, <span>태그
▶영역 분할하기
| <div>태그 | <div></div> | · block eliment이기 때문에, 기본적으로 화면 전체를 사용함 |
| <span>태그 | <span></span> | · inline eliment이기 때문에, 기본적으로 화면의 일부분만을 사용함 |
html에서,
전체적인 틀을 나누는데는 <div>태그를 이용하고,
텍스트의 일부만을 지정하는 등 부분을 선정해 꾸미고자 할 때는 <span>태그를 이용한다.
▶참고로
<div>, <span>태그 자체가 박스 영역을 얼마나 차지하는지 보여주자면...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greed</title>
<style>
div {
border:5px solid gray;
}
span {
border:5px solid red;
}
</style>
</head>
<body>
<div>HONG</div>
<div>GILDONG</div>
<span>HONG</span>
<span>GILDONG</span>
</body>
</html>
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드01</title>
<Style>
#grid1 {
display: grid;
grid-template-columns: 150px 1fr;
}
#grid1 #grid2 {
padding-left: 35px;
}
body {
margin:0;
}
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 100px;
text-align: center;
border-bottom: 5px solid gray;
margin:0;
padding:20px;
}
#grid1 ol {
border-right: 3px solid gray;
width:100px;
margin:0;
padding:20px;
padding-left: 40px;
}
</Style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid1">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="grid2">
<h2>CSS</h2>
<P>
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</P>
</div>
</div>
</body>
</html>
여기서 포인트는
<div>로 분할시킨(묶은) 영역을 → id를 이용해 속성값을 부여시킴.
<div id="grid1"></div>
<div id="grid2"></div>
<div id="grid1">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="grid2">
<h2>CSS</h2>
<P>
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</P>
</div>
</div>
이후, css(html의 <style>태그 내)에서 → id 속성값을 불러와 해당 영역을 꾸몄다.
#grid1 {
display: grid;
grid-template-columns: 150px 1fr;
}
#grid1 #grid2 {
padding-left: 35px;
}
#grid1 ol {
border-right: 3px solid gray;
width:100px;
margin:0;
padding:20px;
padding-left: 40px;
}
▶여기서,
#grid1 {
display: grid;
grid-template-columns: 150px 1fr;
}150px 1fr;이 뭔고 하면...
fr은 화면비율을 의미함. 예를 들어,
150px 1fr → 150px와 나머지화면
1fr 1fr → 화면비율 1:1
2fr 1fr → 화면비율 2:1
▶요 부분의 경우,
#grid1 #grid2 {
padding-left: 35px;
}#grid1 #grid2의 경우,
(#grid1의 휘하에 있는) #grid2 ← 요걸 의미한다.
▶여기서의
#grid1 ol {
border-right: 3px solid gray;
width:100px;
margin:0;
padding:20px;
padding-left: 40px;
}#grid1 ol은,
(#grid1의 휘하에 있는) ol ← 요걸 의미함.
어디 밑에 있는 누구라고 명확하게 명시해 주는 편이 좋다.
만약 구분하지 않고 그냥 ol ← 요것만 적는다면,
컴퓨터는 ol전체를 지정한 것으로 인식한다.
만약 코드가 길어질 경우 수정할 생각을 하면 끔찍함. 혼선을 피하기 위해 명확하게 구분 해두자.
'1-2 css' 카테고리의 다른 글
| [css] 의사 클래스(가상 클래스, pseudo-class) (0) | 2021.08.06 |
|---|---|
| [css] 폰트 (0) | 2021.07.11 |
| [css] Block level element, Inline element_박스 기본 영역 (0) | 2021.07.08 |
| [css] id, class속성 (0) | 2021.07.07 |
| [css] 속성 간략하게 쓰기 (0) | 2021.07.05 |