CSS(Cascading Style Sheets)
디자인 기획안을 따라 WEB2 - CSS 9에서 제목과 목차를 가로, 세로줄로 나누어 보았다.
디자인 기획서를 따라 WEB2 - CSS 9에 이어서 내용을 목차 옆으로 나란히 해보자.
내용을 목차 옆으로 나란히 할 수 있는 방법 중에서 최신의 방법(강의기준 2107년)을 살펴보자.
바로 '그리드'이다.
그리드 소개
gird.html 이라는 file을 먼저 만들어서 grid를 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>导引</div>
<div>文章</div>
</body>
</html>- <div> </div>
(division의 약자)
디자인이라는 목적을 위해서 어떠한 의미도 존재하지 않는 태그를 사용해야 할 때가 있다.
그럴 때 사용하라고 존재하는, 무색무취와 같은 태그- 기본적으로 block level element
- <span> </span>
<div>와 동일하나
- 기본적으로 inline element
(block level element가 필요하면 <div>, inline element가 필요하면 <span>)
그리드를 알아보기 위해서는 각각의 태그의 부피감을 확실하게 알아볼 필요가 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 5px solid green;
}
</style>
</head>
<body>
<div>导引</div>
<div>文章</div>
</body>
</html>
부피감이 좀 더 명확해졌다.
그럼 여기에 있는 导引과 文章이라는 두개의 요소를 나란히 놓기 위해서 그리드를 사용할 것이다.
이것을 하기 위해서는 이 두개의 태그를 감싸는 부모 태그가 필요하다.
그리고 이 부모태그에 id값을 준다. (id값은 아무거나 써도 상관없다.)
이 웹페이지에서 id값이 grid인 태그에 대해서 border: 5px solid black;를 줘서 구분하겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px solid black;
}
div{
border: 5px solid green;
}
</style>
</head>
<body>
<div id="grid">
<div>导引</div>
<div>文章</div>
</div>
</body>
</html>
즉, 두개의 태그를 나란히 배치하고 싶거나 다른 어떤 배치를 하고 싶다면 그것을 감싸는 부모 태그가 필요하다.
그래서 오직 디자인의 목적만으로 <div id="gird">라는 태그를 만든 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px solid black;
display:grid;
grid-template-columns:150px 1fr;
}
div{
border: 5px solid green;
}
</style>
</head>
<body>
<div id="grid">
<div>导引</div>
<div>文章</div>
</div>
</body>
</html>display:grid;만 쓰면 아무런 변화가 없다.
이 다음에 grid-template-columns:를 붙여서 하나의 columns에 붙인다.
첫 번째 column은 150px, 두 번째 column은 1fr (여기서 1fr은 나머지 공간을 다 쓴다는 의미)
즉 웹페이지의 크기를 변경하면 导引은 150px을 고정으로 하고 文章은 자동으로 커지고 축소하게 된다.
만약 grid-template-columns: 1fr 1fr; 로 하게 된다면 두 개는 같은 크기가 된다.
grid-template-columns: 2fr 1fr; 화면이 삼등분되서 2导引：文章1 비율로 나뉜다고 일단 생각하면 되겠다.
그리고 grid가 좋은 것은 한쪽 요소에 많은 텍스트를 넣어도 텍스트의 양이 많아짐에 따라 크기도 자동으로 늘어난다.
동시에 왼쪽에 있는 导引 element도 감싸고 있는 태그 역시도 자동으로 커진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px solid black;
display:grid;
grid-template-columns:150px 1fr;
}
div{
border: 5px solid green;
}
</style>
</head>
<body>
<div id="grid">
<div>导引</div>
<div>文章，冠词（Articles）是一种虚词,放在名词的前面,用来说明名词所表示的人或事物。冠词也可以说是名词的一种标志,它不能单独使用,而只能和名词连用。</div>
</div>
</body>
</html>
영상에서 최신CSS의 기능을 사용하기 위해서는 그것을 현재 사용해도 되는지, 되지 않는지를 데이터에 근거해서 판단할 필요가 있다고 말씀하신다. 그래서 소개해주신 유명한 사이트를 들어가 봤다.
여전히 잘 들어가지고 역시나 강의 기준 전세계 인구가 사용하는 비율은 75.15%였지만
현재는 96.22%임을 알 수 있었다.
내가 사용하는 Browser version은 다 가능했고
그냥 전세계 인구가 이미 다 사용할 수 있는 통계라는 것을 보여준다.
(초록색 박스 표시가 해당 Browser version은 지원하기 때문에 동작 가능하다는 것)
이제 Grid를 어떻게 사용하는지 잠시 살펴봤다. 바로 다음에 내 웹사이트에 적용해서 Grid Layout을 완성해보자.
'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글
| WEB2 - CSS 12 (3) | 2021.09.06 |
|---|---|
| WEB2 - CSS 11 (2) | 2021.09.02 |
| WEB2 - CSS 9 (5) | 2021.08.30 |
| WEB2 - CSS 8 (4) | 2021.07.06 |
| WEB2 - CSS 6 to 7 (2) | 2021.07.05 |