HTML & CSS - 2. CSS 기본

HTML & CSS 기본 - CSS란?

1. CSS가 무엇인가요?

CSS : Cascading Style Sheet  == 상위 스타일이 하위 스타일에 영향을 주는 스타일 시트

Cascading의 뜻은 폭포수가 흐르는 모양이다. 그런 것처럼 css에서는 상위 스타일이 하위 스타일에 영향을 끼친다. 간단히 예를 들자면, body 요소 안의 스타일들은 body 요소의 영향을 받게 된다는 것이다. 

  문법  

body {

 /* body 안에 스타일을 정해 준다는 것은 결국 이 웹 페이지 전체에 영향을 주는 스타일을 적용하겠다는뜻이다. 

/* 앞서 말했듯이 body 요소 안에는 유저들에게 보여질 모든 내용이 들어가게 되니까! 

/* 전체 스타일에 영향을 주는 스타일에는 폰트, 배경, 문서의 너비 등등이 있게 된다. 

}

" 폰트 " 에 관해 알아보자.

먼저, CSS의 기본 폰트 사이즈는 16px로 정해져 있다. 

우리가 자주 쓰게 될 단위 두 가지에 대해 잠깐 언급하자면, px과 em이 있다.

px는 pixel을 뜻하며, 표시장치(모니터)에 따라 상대적인 크기를 가진다. [절대 단위]

em은 해당 element의 font-size에 대한 비율이고, 일반적으로 해당 font의 대문자 "M" 의 너비를 기준으로 한다. 일반적으로 웹 브라우저에서 1em = 16px이다. [상대 단위]

em 단위를 사용하게 되면, 부모 요소(parent element)에서 지정한 글자 크기를 기준으로 비율을 조정하게 된다. (2em =  부모요소 font-size의 2배)

https://www.w3.org/TR/css3-values/#lengths 

위의 링크에서 distance unit을 보면, px는 절대 단위,  em은 모두 상대 단위라고 나와있다.

하지만 pixel은 보여지는 기기(표시장치)에 따라 상대적인 크기를 가지기도 한다. 

-> 이 말이 헷갈릴 수도 있는데, 어쨌든 px는 어디서 선언하든 1px는 모두 1px의 크기라는 것이 달라지지는 않기 때문에 절대 단위이다.

그런데 웹 사이트는 user가 편하게 사용할 수 있어야 하기 때문에, 폰트의 크기를 px로 지정해버리는 것은 user의 선택권을 박탈하는 일이라고 할 수 있다. 

" 절대크기의 폰트 지정은 유저의 선택권을 박탈하는 일 중 하나이다. "

그러므로 상대크기의 폰트 크기 지정이 굉장히 중요하다. em을 잘 사용하도록 하자

앞서 잠깐 언급했듯이, em은 유저가 정해 놓은 font-size나 부모요소의 font-size를 따라가게 된다.

" 행간, 자간, 폰트 패밀리 " 에 대해 알아보자.

행간은 line-height으로 지정해 줄 수 있다.

자간은 letter-spacing으로 지정해 줄 수 있으며, 많이 쓰이지는 않는다. 

폰트 패밀리는 내가 어떤 폰트를 쓸 것인지 지정해주는 것이다.

그런데 여기서, 우리나라의 언어, 한국어를 사용하려면 11376자 정도가 필요하다. 

즉, 용량이 디~게 크다!

근데 OS를 만드는 회사들은 거의 모두가 외국 회사다. 그래서 한국어 폰트는 1~3개 정도밖에 없다..

윈도우 : 맑은고딕, 돋움, 굴림, 바탕 

애플 : 나눔고딕, 산돌 고딕 네오, 애플 명조

안드로이드(모바일) : 제조사 별로 달랐지만 지금은 Noto Sans KT, 본고딕

하지만 기본 폰트가 제어 범위에서 벗어난 게 많다.

  

여기에서, 내가 html에서 폰트를 정하려고 할 때, 세 가지 방법이 있다. 

첫 번째, 나는 그냥 맘 편하게 그냥 OS별 기본 고딕을 쓰는게 좋다! 

기본 폰트에 관해 조금 알아보자면, 

sans-serif 는 삐침 없는 문자이다.

sans 는 없다는 뜻이고, serif 는 삐침이 있는 폰트를 의미하기 때문이다.

  font-family: sans-serif;

/*  font-family: serif; /* 명조 */

/*  font-family: cursive; /* 손글씨 */

/*  font-family: fantasy; /* 특이한 폰트 */

/*  font-family: monospace; /* 고정 폭 폰트 */ 

이 정도가 있다. 

두 번째, 나는 내가 직접 폰트를 정하겠다! (이 경우에는 내가 폰트 이름을 알아야 한다.)

  font-family: "나눔 고딕", "Nanum Gothic", sans-serif; 

  font-family: "Nanum Gothic", sans-serif; 

뭐 이런 것들이 있다. 

예전OS를 쓰는 곳은 첫 번째 예시처럼한글 이름도 맨 앞에 써 주어야 한다.

만약 내가 찾는 폰트인 나눔 고딕이 없으면, 뒤의 sans-serif 폰트가 적용돼서 나온다.

세 번째, 내가 정한 폰트만 써라! (웹 폰트)

한국어 전체를 표현 가능한 폰트를 다운받아서 웹에 구현하려면 기본적으로 3~4메가가 필요하다.

네이버 메인 페이지를 로딩하는 데 필요한 용량이 7~8메가니까, 굉장히 무거운 편인 거다.

그래서 구글 폰트를 쓴다! 얼마 전부터 한국어 지원도 하고, 꽤 다양한 폰트들이 들어와 있다.

https://fonts.google.com/?subset=korean

폰트 패밀리의 색상을 지정해 주려면 그냥 color 속성을 정해주면 된다.

" 문서 너비 제한 " 에 대해 알아보자. 

문서 너비를 제한하는 것은 장려하지 않는다.

앞서 말했듯, body 는 사용자에게 보여주는 모든 것에 영향을 끼치기 때문에, "막는다", "제한한다" 등의 값은 넣어주지 않는 게 좋다.

정 제한을 걸고 싶으면 contents를 가지고 있는 refer에 넣어주는 게 좋다. 

예를 들어, 

article {   max-width: 960px;/* 최대 너비 */   margin: auto; /* 중앙으로 감 */   padding: 30px; /* 사면에 빈 공간을 넣음으로서 가독성 up! */ }

요렇게! 

헤헤 

이번에 CSS 에 관한 대략적이고 기본적인 내용은 일단 여기서 끝