CSS : font background, inheritance

Text

---

font-family

글꼴을 지정하는 속성!!

이는 값이 하나 이상의 속성값을 지정할 수 있다. 이는 글꼴이 없을 때를 대비해서 상황에 맞게 써주기 위함이다.

만약에 글꼴에 띄어쓰기가 없다면 그냥 적어주면 되고, 있다면 "" 안에 넣어주어야 에러가 나지 않는다.

font-family: Arial, Georgia, Times, "Times New Roman", serif;

serif, sans-serif, monospace 등 위에 글꼴이 정말 없을 경우, 컴퓨터가 가지고 있는 font 중 해당 스타일을 써달라는 것이다.

 

나중에 사용자 컴퓨터에 없는 웹폰트를 사용하는 웹폰트 기법도 있는데 나중에 포스팅!!

 

font-size

글자 크기를 지정하는 속성!!

- font-size는 절대적인 수치로 px 이라는 수치를 써서 표현한다.

- em은 만약 html 전체적인 글자를 10px로 하였고, body 태그의 글자를 1.5em, 그리고 다른 태그의 글자를 1.5em이라 했다면? -> 글자크기는 10px * 1.5 * 1.5 = 22.5px이 된다.

즉, em은 그 태그의 상위 태그의 글자크기를 따른다. 여기서는 body가 상위태그이기 때문에 중복됨을 알 수 있다.

- rem에서는 10px * 1.5 = 15px로 즉, rem은 최상위 구조의 글자크기를 따르고, 여기서는 html의 글자크기를 받는다.

font-size: 15px
font-size: 1.5em;
font-size: 1.5rem;

따라서 글자크기를 정할 때는 em보다는 rem으로 정해서 확실하게 기준점을 잡는 것이 매우 중요하다!!!

 

 

font-style

글씨 스타일 지정하는 속성!!

font-style은 italic, normal처럼 글씨의 스타일을 나타냅니다.

font-style: italic;

 

font-weight

글자 두께를 지정하는 속성!!

bold, normal 같은 키워드로도 가능하고 100~900 사이의 숫자로도 가능합니다.

font-weight: 900;
font-weight: bold;

 

line-weight

줄간격입니다. 

줄간격을 표시할 때는 단위가 없는 숫자만 사용하는 것이 가능하고 가급적 그렇게 하는 것이 좋습니다.

이때 숫자는 font-size의 배율입니다. 브라우저에서의 line-height는 기본적으로 1 혹은 1.2입니다.

line-height: 1.5rem;
line-height: 12;

 

text-align

글자 정렬과 관련이 있습니다. 

가운데정렬(center), 왼쪽정렬(left), 오른쪽정렬(right), 양쪽정렬(justify) 등이 가능합니다.

text-align : center;
text-align : left;
text-align : right;

 

 

color

---

color name

120개의 키워드가 지정되어 있어 영어를 그대로 사용하면 됩니다. 

우리가 흔히 아는 red, yellow, blue 같은 색상부터 aliceblue, palegreen, papayawhip 같은 생소한 이름도 있습니다.

밑에서 색상을 찾아볼 수도 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords

 

- 16bit RGB

RGB 값은 빨강, 초록, 파랑 세 종류의 광원을 혼합해서 색상을 만드는 방식입니다. 예를 들어 #f1359b 라는 16진수 색상 코드가 있다고 해봅시다. 16진수 f1은 빨강, 16진수 35는 초록, 16진수 9b는 파랑을 나타냅니다. 16진수 두 자리는 00부터 ff까지, 총 16\*16 = 256가지의 값을 표현할 수 있습니다. rgb(255, 255, 0) 이렇게 10진수 형태로 표현하는 방법도 있습니다. 여기에 투명도를 표현하는 alpha값을 더하여 rgba(255, 255, 255, 0.5) 형태로 나타날 수 있습니다. alpha 값은 완전 투명한 색상이 0, 완전 불투명한 색상이 1입니다.

우리는 위와 같은 과정은 몰라도 된다. 하지만 알아야 할 것은 rgba, a는 alpha로 투명도를 얘기한다.

나중에 알아두면 편할 기능이다.

color: rgba(0, 0, 0, 0.5);
color: #fff;
color: yellow

 

background-color

배경 색상을 지정하는 방법을 알아 보겠습니다. 

배경색의 속성명은 background-color입니다. 색상값을 지정하여 사용할 수 있습니다. 

배경이미지를 지정하는 background-image 속성도 적용이 가능합니다.

background-color: red;

색이 칠해지는 (혹은 이미지가 적용되는) 영역은 요소의 콘텐트, 그러니까 내용이 있는 영역과 안쪽의 여백인 패딩 영역입니다. 다음 강의인 box model에서 조금 더 상세히 배울 것입니다.