[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 07

07-1 텍스트를 표현하는 다양한 스타일

글꼴 관련 스타일 (앞에 font 로 시작함)

font-family : 글꼴 종류를 지정

font-size : 글자 크기를 지정

font-style : 글자를 이탤릭체로 표시할 것인지를 지정

font-weight : 글자의 굵기 지정

 

<style>

  h1 {

    font-family: 바탕; <-바탕체는 거의 윈도우 컴퓨터에는 다 깔려있으므로 대부분의 사람에게 잘 보이게됨. 사용자에게 없는 폰트를 지정하면 안됨. 폰트 파일도 다운 받을수 있게 해주는 등 처리해줘야함

    font-size: 20px <-픽셀 단위로 지정할 수도 있고, em이라는 단위(해당 폰트의 'M'의 폭을 말함. 1em=16px)도 사용가능

  }

  .italic {

    font-style: italic;

  }

  .accent {

    font-weight: 700; <-100~900 사이의 숫자로 조절. 400이 가장 기본, 숫자 커지면 굵어지고, 작아지면 가늘어짐. bold 라는 키워드를 사용할 수도 있음. 700 정도면 적당히 굵은 글씨

    font-size: large;

  }

</style>

 

웹 폰트

사용자 시스템에 설치되지 않은 폰트를 내가 사용하려 할때 폰트에 대한 정보를 웹 서버에 올려놓고 사용자가 웹사이트에 접속했을때 폰트 정보까지 함께 다운로드하게 하는 방법. 폰트를 가지고 있다면 서버에 업로드할 수도 있고, 이미 웹상에 올라온 폰트를 사용할 수도 있지만 이는 네트워크의 속도 영향을 많이 받음.

독특한 폰트를 사용하고자 하는 경우, 구글 웹폰트를 많이 사용함

 

구글 폰트 사용하기

language 옵션에서 한국어 선택하면 한글 글꼴 나옴

나눔펜스크립트 폰트를 적용해보자. 글자 사이즈(px)를 설정하고, 'select this style' 클릭 -> 'use on the web'에서 <link>를 이용할 수도 있고, 'import'를 이용할 수도 있음.

import문을 사용해보자. 안의 내용을 복사해서 style 태그의 제일 윗줄에 붙여넣기.

 

@import url('http://fonts.googleapis.com/css?~~~~~~~~');

 

복사한 import문 밑에 보면 family에 넣어줄것도 적혀있음. 이것도 복붙.

 

font-family: 'Nanum Pen Script', cursive;

 

만약 네트워크가 끊기거나 저 글꼴을 가져오지 못하는 경우 이 글꼴 대신 바탕체를 사용하겠다=> cursive 대신 바탕 써줌

font-family에 두 개 이상의 글꼴을 써주는 것은 맨앞의것 못쓰는 경우 대체할 글꼴을 의미함.

 

웹에서 색상 표현하기

-색상 이름 표기법

 blue, red 등 잘 알려진 기본 색상 16가지+모든 브라우저에서 표현할 수 있는 색상 총 216가지 

-16진수 표기법

 # 뒤에 6자리의 16진수. 000000(검정) ~ ffffff(흰색). 앞에서부터 두자리씩 Red, Green, Blue의 양을 의미.

 하나도 안섞였으면 00, 가득 섞였으면 ff로 표시.

ffff00 = 빨, 초 가득, 파 안들어감

두자리씩 중복되는 경우엔 줄여서 쓸수도 있음(#ffff00 -> #ff0)

-hsl/hsla 표기법

세 자리 숫자로 표시. 앞에서부터 삭생, 채도, 밝기의 양을 의미함.

-rgb/rgba 표기법

16진수와 마찬가지로 red, green, blue의 양을 각 세자리 숫자로 표시(255,0,0)

hsl과 rgb는 끝에 알파값을 이용해 불투명도를 나타낼 수 있음(1:불투명, 0:완전투명)(255,0,0,0.3)

 

color 속성

글자색 바꿀때는 color 라는 속성을 이용함

vs code에서는 color: 입력하면 색상명과 색깔 목록을 직접 보여줌

*색깔이 있는 네모칸에 마우스를 가져가면 해당 색깔의 rgb 값이 표시됨, rgb 값을 클릭하면 16진수 표기법으로 바껴서 표시됨, 한번 더 누르면 hsl 표기법으로 바뀜. 막대 부분을 움직이면 투명도가 조절됨.

---

07-2 텍스트를 표현하는 다양한 스타일

텍스트 스타일 속성

종류	설명
color	글자색을 지정함
text-decoration	텍스트에 밑줄이나 취소선을 표시할지 여부를 지정함 underline - 밑줄, overline - 윗줄, line-through - 취소선 none - 밑줄이 없어짐(링크에 생기는 밑줄 없앨때 사용)
text-transform	텍스트 전체 또는 첫 글자를 대문자로 표시함
text-shadow	텍스트에 그림자를 추가함 그림자의 가로 및 세로 거리(양수 값은 오른쪽/아래쪽을 의미), 그림자가 번지는 정도, 그림자 색깔 지정 5px 5px 3px #ccc = 오른쪽 아래로 생기는 그림자, 3픽셀 번짐, 색깔은 회색
letter-spacing	글자 사이의 간격을 지정함
word-spacing	단어 사이의 간격을 지정함
text-align	텍스트의 정렬 방법을 지정함 center - 가운데 정렬, right - 오른쪽 정렬 등
line-height	줄 간격을 조절함 픽셀 단위로 지정 or 퍼센트 단위도(글자크기 기준) 가능 보통 1.5~2를 많이 씀

 

목록 스타일

가장 많이 사용하는 것이 불릿을 조절하는 것임. 불릿을 어떤 형태로 바꿀것인가(제일 많이 쓰는건 디스크 형태(속이 찬 검은 원-disc), 속이 빈 원-circle, 사각형-square, 순서목록-decimal, 소문자-lower-alpha 등으로 바꿀 수 있음)

list-style-type: 으로 지정할 수 있음(줄여서 list-style: 로 써도 됨)

square는 순서가 없는 목록(<ul>에 사용)

불릿을 없앨 때 list-style: none; 으로 주면 불릿 없어짐. 네비게이션 만들 때 많이 사용됨.

 

표 스타일

<table>, <caption(표이름)>, <th>, <tr>, <td> 등으로 표를 처음 만들면 표 형태가 제대로 만들어지지 않음

 

-캡션 위치 바꾸기 (caption-side)

caption-side: top이 기본으로 지정되어 있음, bottom으로 바꾸면 캡션이 표 아래로 내려감

 

- 표 전체 테두리

table {

  border: 1px solid #222;

}

- 셀 테두리

th, td {

  border: 1px solid #222;

}

=> 이렇게 하면 테두리가 2겹으로 그려지게 됨

 

==> 두 겹이 된 테두리를 합치기 위해 border-collapse 를 이용,

table {

  border: 1px solid #222; <- border는 th, td에 상속 안됨

  border-collapse : collapse; <-테두리 겹치면 하나만 생기게 함. 상속되어 th, td에도 자동 적용됨

}

th, td {

  border: 1px solid #222;

}

 

셀 제목(th)에만 색깔 넣어주고 싶으면

th {

  background-color: #ccc;

}

 

셀 안의 여백을 주기 위해서는 padding 을 이용