안녕하세요 ~
인포돈 입니다~!!
이번 시간으로 CSS를 마무리하려고 합니다. 이전까지 배운 것들로 충분히 저의 홈페이지를 만들 수 있다는 생각이 들고 있기 때문입니다.
이전까지 CSS의 기본을 배웠다면, 이제는 CSS에서 저희가 가장 원하는 바로 배치에 대해서 알아볼 겁니다.
이전에 배웠었던 CSS의 속성들을 잊지 않고 있다면, 머지않아 저희가 목표로 한 홈페이지를 각자의 힘으로 제작하실 수 있을 것입니다.
1. grid
이번에 알아볼 문법은 바로 grid!! 이 grid는 앞서 배웠던 속성과 태그와는 다르게 바로 값에 해당하는 문법입니다.
왜 이것만 따로 빼와서 배우냐?? 바로 엄청 중요하고 유용한 값이기 때문이죠.
우선 grid를 배우기 앞서서 <div>와 <span> 태그에 대해서 배워야 합니다.
앞서 배운 태그들은 <h1> <a> <style> <link> 등의 태그들이 있었죠.
이러한 태그들의 공통점을 아시나요?? 바로 각각의 태그들은 기능을 가지고 있다는 것이죠.
그러나 저희가 배울 <div> <span>은 아무 기능이 없는 태그입니다. div, span 태그들은 바로 grid 즉, 배치를 만들어내기 위해 임의로 묶어주는 의미를 가집니다. 즉, 아무런 기능이 없이 그냥 쓰이는 태그를 의미합니다. 이러한 태그의 활용도는 무궁무진하니 다른 것은 몰라도 div와 span 태그는 꼭 기억해 두시길 바랍니다~!
그럼 이제 grid의 사용법을 바로 알려드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#grid{
border:5px solid pink;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id=grid>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>우선 배치를 각각 다르게 할 두게의 텍스트를 <div> 태그를 이용하여 묶어둡니다. 그 후 그 문장 모두를 묶는 div태그를 하나 더 만듭니다. 그 후 가장 크게 묶은 div에 id값을 주어 가시적으로 볼 수 있게 border값을 할당해 줍니다.
그러면 이제 아래와 같은 결과가 나오게 됩니다.
그러면 이제 여기서 저희는 grid라는 값을 사용해 봐야겠지요??
(앞서 id에서의 grid는 그저 텍스트입니다. 따른 기능이 있는 게 아닙니다)
<!DOCTYPE html>
<html>
<head>
<style>
#grid{
display:grid;
border:5px solid pink;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id=grid>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
자 이번 코드에서 새롭게 추가된 것은 2가지입니다. display:grid; 와 grid-template-columns:150px 1fr;
하나씩 살펴보도록 합시다.
display:grid; 이 문장의 의미는 바로 gird 즉 그리드 형태로 보여달라는 겁니다. 앞서서 저희가 살펴보았던 display:block, display:inline을 해석하는 것처럼 이문장은 grid형태로 우리에게 보여달라는 속성입니다. 여기서 grid는 값으로 쓰였다고 볼 수 있습니다.
그렇다면 grid-template-columns:150px 1fr 이문장은 무엇을 의미할까요?
바로 grid에 있는 template 중에 columns이라는 기능을 이용하겠다. 여기서 columns은 "열"이라는 의미를 가지죠
그러면 grid를 열 형식으로 보고 싶다는 의미가 됩니다. 뒤에 있는 150px과 1fr은 어느 정도의 비율인지를 의미하죠.
왼쪽에 있는 것은 150px크기 오른쪽에는 남은 영역을 표시한다는 의미입니다.
그렇다면 앞선 코드의 결과는 아래와 같게 됩니다.
저희가 원했던 가로로 텍스트가 구분되어있음을 알 수 있습니다.
여기서 태그 속 태그를 따로 선택자로 지정하는 방법도 있습니다.
자, 앞 코드에서 <div id=grid>라는 큰 태그 안에 <div>라는 태그가 있습니다.
그렇다면 <style> 태그 안에서 선택자를 쓸 때
<style>
#grid div{
~~~~~
}
</style>이와 같은 형식으로 지정한다면 뒤에다 아무리 <div> 태그를 사용해도 id가 grid인 태그 안에 있는 div만 값 및 속성들을 할당할 수 있게 됩니다. (참고 바랍니다)
2. media query
이제 저희가 CSS에서 마지막으로 배울 것은 바로 미디어 쿼리!라는 기능입니다. 음... 제 개인적인 생각이지만, 일종의 조건문이라고 생각이 듭니다. 왜 그런지는 같이 배우면서 알려드리겠습니다.
옛날의 웹에 있어서 모든 엔지니어들이 곤욕을 치렀었던 부분이 이었습니다. 그것은 바로 화면의 크기였습니다. 지금은 노트북, 데스크톱, 휴대폰, 태블릿 등 수많은 기기들에서 웹을 사용합니다. 그렇게 되면 화면의 크기가 전부 제각각이어서 웹의 이미지 및 텍스트들이 엔지니어 의도대로 보이지가 않았기 때문이죠.
이러한 문제점에고 고안이 되어 만들어진 것이 바로 반응형 디자인입니다. 뭐 들어보신 분들도 있겠지만, 현재 모든 웹들은 대부분 반응형 디자인으로 만들어져 어디서 보든 그 화면에 최적화된 웹 페이지를 보여줍니다.
이러한 반응형 디자인을 구현하기 위해서 필요한 것이 바로 "미디어 쿼리"라는 기능입니다.
이 기능은 속성(?) 정도로 정의해도 되는지 모르겠네요.
우선 활용 방법을 살펴보겠습니다.
만약에 우리의 웹이 800px보다 작이 지면 웹에 있는 글씨가 사라지게 해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#grid{
display:grid;
border:5px solid pink;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
@media(max-width:800px){
div{
display:none;
}
}
</style>
</head>
<body>
<div id=grid>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
여기서 추가된 코드는 바로 @media 부분입니다.
그 부분의 코드를 살펴보면 width 즉, 넓이가 800px 보다 줄어들 시 div태그를 display:none; 웹에서 보이지 않게 하는 코드입니다.
이제 해당 코드를 웹브라우저에 열어놓고 크기를 좌우로 줄여보시면 어느 순간 글씨들이 사라지는 게 보일 겁니다.
신기하지 않으신가요 ~?
저는 처음 접할 때 넋 놓고 쳐다봤었거든요 ㅋㅋ
3. link
추가적으로 하나의 태그를 더 알려드리도록 하겠습니다.
<link>라는 태그입니다. 우리가 지금까지 css를 배워왔는데요 대부분의 css동작들은 <style> 태그 안에서 이루어지게 됩니다. 만약 이 <style> 태그의 길이가 너무 길 어제 게 되면 html 코드와 css코드들이 뒤섞여 헷갈릴 수 있는 경우가 발생합니다.
이러한 문제를 해결하기 위해서 개발자들은 css파일을 다른 파일로 관리하자!라는 아이디어에서 <link> 태그를 고안해 냈습니다.
이제 여태까지 저희가 <style> 태그에 있었던 모든 코드들을 다시 style.css 파일을 만들어 복사 + 붙여 넣기를 해봅시다.
그러면 이제 1.html 파일에는 따로 , style이란 게 없겠죠?
그러면 이제 <head> 태그 안에다가 아래 코드를 입력하시면 됩니다.
<link rel="stylesheet" href="style.css">
그러면 앞서 저희가 작성했었던 코드들이 다 정상적으로 작동이 되게 됩니다.
코드 하나의 힘이 대단하지요?
오늘까지 해서 html, css에 대해서 모두 어느 정도 알아보았습니다.
물론 저희가 html, css에 대해 전부를 파악하고 고수가 되었다고 할 수는 없습니다.
그 러 나 저희는 이미 한 발을 떼어 일반인들보다는 html, css에게 친숙해졌다고 할 수 있죠.
이제 저희는 배운 것들을 토대로 저희만의 홈페이지를 제작해 볼 것입니다.
물론 제작하면서 많은 벽들이 또 있겠지만, 하나하나 해결하다 보면 어느새 멋있는 홈페이지가 제작되어 있을 것입니다.
함께 가보도록 해요~
'토이 프로젝트 > HTML로만드는 홈페이지' 카테고리의 다른 글
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 8(홈페이지 주소, web hosting, 깃허브 홈페이지생성) (0) | 2021.03.09 |
|---|---|
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 7(홈페이지제작) (0) | 2021.03.08 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 5(CSS) (0) | 2021.03.04 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS) (0) | 2021.03.03 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 3(태그, 속성) (0) | 2021.03.02 |
