기획서와
내가만든 웹 페이지랑은 너무 다르다.
리스트와 본문을 나란히 배치하고 싶다. 어떻게 해야할까?
이 배치 방법은 여러가지가 있는데, 우리는 grid를 사용할 것이다.
엘류가 오랜 시간동안 정보를 잘 배치하는, 레이아웃을 잘 짜는 방법을 코드를 통해 효율적으로 하는데 어려움을 많이 겪었다. 여러가지 시행착오를 통해 다양한 방법이 나왔지만 가장 최근에 등장한 grid를 통해 알아보자.
우리는 새로운 html 파일을 만들자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
NAVIGATION ARTICLE
</body>
</html>여기서 NAVIGATION과 ARTICLE을 따로 분류를 하고 싶은데, h1을 사용하기가 부담스럽다. 왜냐하면 h1이라는 정보적 의미로 담을 생각이 없기 때문이다. 단순히 시각적으로만 분리를 하고 싶을 뿐이다.
<div>NAVIGATION</div> ARTICLE이때 <div>태그를 써준다. div는 division의 약자로 단순히 디자인만을 위해 구분하는 태그이다.
div는 기본적으로 block level element이기 떄문에 줄바꿈까지 구현이 된다.
똑같은 목적으로 고안된 태그가 있다. <span>이다.
<div>NAVIGATION</div>
<div>ARTICLE</div>
<span>NAVIGATION</span>
<span>ARTICLE</span>
span은 inline element이다. 블럭의 선택에 따라서 둘의 태그를 구분한다.
div{
border:5px solid gray;
}
자 이제 두 글자의 구분이 명확해졌다. 우리는 저 두 글자를 나란히 놓고 싶다. 어떻게 해야할까? 일단은 이 두 글자를 감싸는 부모태그를 만들어야 한다.
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>이렇게 id가 grid인 부모 태그를 만들어주었다.
<style>태그안에 다음과 같은 코드를 넣는다.
#grid{
border:5px solid pink;
}
자 우리가 다루는 element의 영역이 확실하게 구분되었다. 이제 그리드로 분류를 해보자
#grid{
border:5px solid pink;
display: grid;
grid-template-columns : 150px 1fr;
}
이렇게 구분된다. 하지만 브라우저를 늘려보면 NAVIGATION의 부분은 150px 고정이고 ARTICLE의 부분은 고정이 아닌 것을 확인할 수 있다.
1fr은 나머지의 공간을 다 쓴다는 의미이다.
만일 두가지를 fr로 하면 어떻게 될까?
이렇게 웹브라우저 크기를 늘려도 동률로 늘어난다.
만일 이러한 내용을 넣는다고 했을때
#grid{
border:5px solid pink;
display: grid;
grid-template-columns : 150px 1fr;
} <div id="grid">
<div>NAVIGATION</div>
<div> 돌아가는 시계바늘
찢어지는 하얀 달력
이상은 아주 큰데 현실은 몰라주고
갖은 건 꿈이 전분데.
돌아오지 못할 강물처럼 흘러간다.
다시 오지 않는 아름다운 나의 청춘</div>
</div>
화면을 위와 같이 나타난다. 자유자재로 사용할 수 있다.
grid는 최신 기술이라 이 css 최신 기술을 사용해도 되는지 안되는지를 데이터에 근거해서 알아볼 필요가 있다.
이 사이트를 들어가보자.
HTML, CSS, JavaScript의 기술을 상용화되어있는 웹 브라우저가 얼만큼 채택하고 있는지를 알려주는 사이트이다.
검색해보자.
초록색은 지원하고 있다.
노란색은 부분지원하고 있다.
빨간색은 지원X이다.
> 그리드 활용
<style>
#grid {
display: grid;
grid-template-columns: 150px 1fr;
</style>
</head>
<body>
<h1><a href="index.html">뜨거운 감자 - 노래 </a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class = "saw" id="active">청춘</a></li>
<li><a href="2.html" class = "saw">고백</a></li>
<li><a href="3.html">비눈물</a></li>
</ol>
<div>
콘텐츠 내용
</div>
</div>
</body>
쓸데 없는 코드를 가감한 코드이다.
이렇게 <div>로 묶어놓으면
id가 "grid"인 <div>안에 <ol>과 <div> 총 두가지의 columns이 있는 것이다.
이렇게 적용하면 다음과 같이 나온다.
그런데 뭔가 여백이 마음에 안들 수 있다. 이럴때 개발자 도구를 사용해보자.
우측하단 padding 그림에 숫자를 더블 클릭하고 화살표 방향을 누르면 수치가 조정이 된다. 이것이 좌측 화면에 그대로 나타나므로 마음에 드는 수치를 조정한다. 개발자 도구로 바꾼다고 실제로 바뀌지 않는다.
난 개인적으로
이 정도 여백이 마음에 든다고 판단하였다. 이것을
ol{
border-right: 1px solid gray;
width : 100px;
margin : 0;
padding : 20px;
padding-left: 24px;
padding-bottom: 0;
height: 200px;
}입력해주면 그대로 변경이 된다.
그런데 이제 콘텐츠의 여백도 변경하고 싶다. 이럴 때는 아까 구분했던 <div>에 아이디를 심어주면 된다.
<style>
#contents {
padding: 25px;
}
</style>
<body>
<h1><a href="index.html">뜨거운 감자 - 노래 </a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class = "saw" id="active">청춘</a></li>
<li><a href="2.html" class = "saw">고백</a></li>
<li><a href="3.html">비눈물</a></li>
</ol>
<div>
콘텐츠 내용
</div>
</div>
</body>또한, 콘텐츠 내용에 ol이 들어갈 수도 있다. 하지만 grid안에 있는 리스트랑 그 리스트랑 겹치면 ol에 대한 모든 리스트가 영향을 받게 된다. 따라서 ol도 구분을 해주자.
#grid ol{
border-right: 1px solid gray;
width : 100px;
margin : 0;
padding : 20px;
padding-left: 24px;
}id값과 같이 쓰면 해당 id가 있는 부모의 자손 element를 선택하게 되는 것이다.
'HTML & CSS > 생활코딩 - CSS' 카테고리의 다른 글
| CSS 기초 개념 - CSS 코드의 재사용 #07 (0) | 2020.09.28 |
|---|---|
| CSS 기초 개념 - 반응형 디자인 & 미디어 쿼리 #06 (0) | 2020.09.27 |
| CSS 기초 개념 - 박스 모델 활용 #04 (0) | 2020.09.25 |
| CSS 기초 개념 - 박스 모델 #03 (0) | 2020.09.24 |
| CSS 기초 개념 - 구글링 요령 #02 (0) | 2020.09.23 |
