CSS #2: 클래스, 박스모델, 그리드, 미디어 쿼리

CSS의 다양한 기능들을 더 알아보도록 하자.

---

클래스 선택자, ID 선택자

클래스들

 

a와 h1 태그들은 html에 기본적으로 주어진 태그들이다.

하지만 .saw 같은 'class'는 우리가 직접 만들 수 있다.

class와 태그를 구별하기 위해 . (dot)을 사용하기로 하자.

이런 방식으로 어떤 클래스인지를 적어주면, class 안에 decoration이 반영된다.

하지만, 

#active와 같이 id 선택자 또한 존재한다.

ID 선택자는 각 선택자마다 한번만 사용하는 것을 원칙으로 하며, 가장 빠르고 정확하게 꾸밈을 주는 선택자이다.

 

그렇기에,

태그 내에서,  태그 선택자와 클래스 선택자가 동시에 쓰였을 때 클래스 선택자가 반영되고,

클래스 선택자와 ID 선택자가 동시에 쓰이면 ID 선택자가 반영된다.

만약 같은 선택자가 동시에 사용되면, 가장 마지막에 등장하는 선택자가 우선순위가 높게 반영된다.

 

또한, * 은 페이지 전체를 의미한다.

 

 

---

박스모델

앞서 봤던 예시를 다시 보자.

a는 링크를 나타낼 때 사용하는 태그이고, h1은 중요한 글, 제목같은 글에 사용하고는 한다.

그렇기에 a 태그는 링크를 나타내는 부분에서만 영향력을 행사, 즉 자신의 컨텐츠만큼 부피를 사용하는데, 우리는 이를 Inline Element라고 부른다.

이와 반대로, h1 페이지/화면 전체를 부피로 사용하는데, 그렇기에 Block Level Element라고 부른다.

 

하지만 이는 기본적인 default 설정으로, 우리가 display:inline, display:blocklevel와 같이 고칠 수 있다.

 

우리는 또한 다양한 방법으로 컨텐츠를 바꿀 수 있다.

CSS box model

Content는 말 그대로 해당 Text를 나타낸다.

Border는 내용의 테두리이다.

Content와 Border 사이는 Padding이라고 부르고,

Border 밖에 다른 페이지의 내용과 만나기 전 부분을 Margin이라고 부른다.

우리가 해당 내용의 색깔, 크기, 배경 등등 마음대로 바꿀 수 있다.

 

---

Grid

Grid는 글들을 정리하는 Layout들 중 하나다.

Grid를 잘 이용하면 Text들을 순서에 맞게, 가지런하게 정리할 수 있다.

이를 사용하는 방법은 간단하다.

나는 grid를 id 선택자로 설정하여, border를 바꾸고, display를 grid로 설정했다.

그리고 grid-template-columns에서 각자 텍스트의 크기를 바꿀 수 있다.

px를 이용하면 특정 픽셀만큼 화면에서 유지되고, fr을 이용하면 화면의 남은 부분을 채운다.

만약 1fr 2fr 이런식으로 작성했으면, 1대 2 비율로 화면에서 나타난다.

 

아무런 글을 긁어와서, 어떻게 작용되는지 보자.

 

위에 있는 화면은, 풀 스크린으로 화면을 캡쳐한 것으로, 위에 navigation 부분은 700 픽셀을 유지하고, 나머지 부분을 긴 글로 채웠다.

밑에 있는 화면은, 해당 화면의 가로 길이를 줄였다. 700 픽셀은 유지되었지만, 나머지 부분이 줄어들었기에 긴 글이 밑으로 늘어졌다.

 

 

CSS를 이용하면 더욱 다채롭게 웹을 꾸밀 수 있다.