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

이번 장에서 사용자가 내용을 쉽게 이해할 수 있도록 하려면 글꼴과 텍스트의 스타일을 어떻게 지정하면 효과적일지 알아보자.

07-1 글꼴 관련 스타일

텍스트 스타일 = 글꼴 스타일 + 문단 스타일

글꼴 스타일 : 글자의 모양새
문단 스타일 : 웹 문서에 표시되는 텍스트

글꼴을 지정하는 font-family 속성

웹 문서에서 사용할 글꼴은 font-family 속성으로 지정, 이러한 속성은 <body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용
기본형: font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
사용자 시스템에 설치되어 있지 않는 글꼴을 사용할 경우 예기치 못한 글꼴이 표시되기도 한다.
그렇기에 한 가지 글꼴만 선택하지 말고 두 번째, 세 번째 글꼴을 선택하는 것이 좋다.

body { font-family: "맑은 고딕", 돋움, 굴림 }

글자 크기를 지정하는 font-size 속성

개념 : 글자크기를 지정하는 속성, px나 pt등으로 단위를 지정할 수 있으며 백분율도 가능
기본형 : font-size: <절대크기> | <상대 크기> | <크기> | <백분율>

키워드를 사용하여 글자 크기 지정하기

글자 크기를 미리 약속해둔 키워드로 설정할 수 있습니다.

단위를 사용하여 글자 크기 지정하기

px나 pt를 많이 사용하였지만 요새는 모바일 기기까지 고려하여 상대 크기 단위인 em이나 rem을 많이 사용한다.(1em = 16px, 12pt)

백분율을 사용하여 글자 크기 지정하기

백분율은 부모 요소의 글자 크기를 기준으로 계산한다.
부모 요소의 글꼴 크기가 단위로 표현되어 있어야 한다.

이탤릭체로 글자를 표시하는 font-style 속성

개념 : 글자를 이탤릭체로 표시할 때 사용한다. 이탤릭체로 바꾸는 속성값은 italic과 oblique가 있으며 웹의 경우 주로 italic을 사용합니다.
기본형 : font-style: normal | italic | oblique

글자 굵기를 지정하는 font-weight 속성

개념 : 글자 굵기를 지정한다. 미리 만들어진 예약어(normal, bold, bolder)나 숫자를 사용하여 굵기를 지정한다.
(normal = 400, 700 = bold)
기본형 : font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900

07-2 웹 폰트 사용하기

웹 폰트 사용 시 사용자 시스템에 없는 글꼴도 사용할 수 있습니다.

웹 폰트란

사용자 시스템에서 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주는 방법은 없는가? 이에 대한 것으로 CSS3 에서 웹 폰트^{web font}를 표준으로 채택하면서 번거롭게 폰트를 여러개로 대응하도록 하거나 웹 페이지 다운로드 시키도록하는 작업등을 하지 않아도 되게 되었습니다.

웹 폰트를 사용한 사이트에 사용자가 접속하면, 웹 문서를 내력 받으면서 웹 폰트도 사용자 시스템으로 다운로드 됩니다. 사용자 시스템에 없는 글꼴이라도 제약없이 사용이 가능해지며, 웹 제작자가 의도한대로 텍스트를 보여줄 수 있습니다.

웹 폰트 업로드하고 사용하기

구글과 같이 인터넷에서 제공해주는 경우가 아닌 경우 사용자가 가지고 있는 TTF 폰트를 변환해서 사용해야 한다면 직접 업로드하여 사용해야 합니다.
*.ttf의 경우 파일 크기가 커서 웹에서 사용하기 적절하지 않다 그래서 EOT_{embedded open type}과 WOFF_{web open font format}, 그리고 WOFF 파일이 등장하였다.

웹 폰트가 준비되어 있다면 @font-face속성을 통해 웹 폰트를 정의할 수 있습니다.

@font-face {
  font-family: <글꼴 이름>;
  src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, .....];
}

webfont.html을 통해 웹 폰트에 대해 알아보자.

...
<style>
  @font-face {
    font-family: 'Ostrich';
    src: local('Ostrich Sans'),
          url('fonts/ostrich-sans-bold.woff') format('woff'),
          url('fonts/ostrich-sans-bold.ttf') format('truetype'),
          url('fonts/ostrich-sans-bold.svg') format('svg');
  }
  .wfont {
    font-family: 'Ostrich', sans-serif; /* 웹 폰트 지정 */
  }
  p {
    font-size: 30px; /* 글자 크기 지정 */
  }
</style>
  ...
  <p>Using Default Fonts</p>
  <p class ="wfont>Using Web Fonts</p>
  ...

이 처럼 직접 웬 폰트 파일을 준비해서 업로드한 후 사용할 수도 있지만 인터넷에서 무료로 제공하는 웹 폰트를 링크하여 사용할 수도 있다.

07-3 텍스트 관려 스타일

글자색을 지정하는 color 속성

글자색을 바꿀 때는 color 속성을 이용한다.
color의 속성값으로는 "16진수 | rgb(rgba) } | hsl(hsla) | 색상 이름"을 사용한다.
기본형 : color: <색상>

16진수로 표현하는 방법

6자리로 #RRGGBB로 표시한다.

hsl과 hsla로 표현하는 방법

hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말이다.
hsla의 경우 alpha(불투명도)를 추가한 것을 의미한다.
hue(색상) : 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시

saturation(채도) : 퍼센트(%)로 표시, 아무것도 섞이지 않으면 채도가 가장 높은 상태이다. (0% - 회색 톤, 100% - 원래 색)
lightness(명도) : 퍼센트(%)로 표시 (0% - 가장 어두움, 50% - 원래색, 100% - 흰색)

색상을 영문명으로 표현하는 방법

자주 사용하는 색상의 경우 색상 이름을 그대로 사용하기도 한다.

rgb와 rgba로 표현하는 방법

표기법 예시: h1{ color: rgb(0, 0, 255); }
표기법 예시: h1{ color: rgba(0, 0, 255, 0.5); }

텍스트를 정렬하는 text-align 속성

text-align 속성을 통해 텍스트 정렬을 합니다.
기본형 : text-align: start | end | left | right | center | justify | match-parent

match-parent 속성값을 사용하는 이유는 무엇일까? match-parent라는 속성값을 부여함으로써 개발자에게 보다 명확히 지시를 내려주고 이를 통해 수정, 업데이트 시 편리하게끔 해주기 위해 사용하는 것으로 생각된다.

줄 간격을 조절하는 line-height 속성

개념 : line-height 속성을 이용하여 줄 간격을 원하는 만큼 조절한다.
기본형

p ( fint-size: 12px; line-height: 24px; )
p ( fint-size: 12px; line-height: 2.0; )
p ( fint-size: 12px; line-height: 200%; )

줄 간격은 텍스트를 세로 정렬할 때도 유용하다. <center>의 경우 좌우로 가운데 정렬이 이루어지지만 세로로 가운데 정렬이 이루어 지지 않는다. 이때 line-height 속성을 통해 세로 가운데 정렬을 할 수 있다.
height 속성값과 text-align 속성값을 동일하게 맞추어 주면 세로 정렬을 만들 수 있다.

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

개념 : text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시합니다.
또한 하이퍼링크로 인해 생기는 텍스트의 밑줄을 없앨 수 있다.

텍스트에 그림자 효과를 추가하는 text-shadow 속성

개념: 텍스트에 그림자 효과를 줄 수 있다.
사이트의 제목과 같이 강조해야 할 글자에 사용
기본형: text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> < 색상>

종류	설명
<가로 거리>	텍스트로부터 그림자까지의 가로 거리로 필수 속성입니다. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만듭니다.
<세로 거리>	텍스트로부터 그림자까지의 세로 거리로 필수 속성입니다. 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만듭니다.
<번짐 정도>	그림자가 번지는 정도입니다. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시굅니다. 반대로 음숫값은 그림자가 모든 방향으로 축소되어 보입니다. 기본값은 0입니다.
<색상>	그림자 색상을 지정합니다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있습니다. 기본값은 현재 글자색입니다.

텍스트의 대소 문자를 변환하는 text-transform 속성

개념 : 영문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 바꿀 수 있습니다.
text-transform 속성을 통해 텍스트의 대소 문자 또는 전각 문자로 변환하며, 이 속성은 영어에만 영향을 줍니다.

종류	설명
capitalize	첫 번째 글자를 대문자로 변환합니다.
uppercase	모든 글자를 대문자로 변환합니다.
lowercase	모든 글자를 소문자로 변환합니다.
full-width	가능한 모든 문자를 전각 문자로 변환합니다.

글자 간격을 조절하는 letter-spacing, word-spacing 속성

letter-spacing

개념 : 글자와 글자 사이의 간격을 조절

word-spacing

개념 : 단어와 단어 사이 간격을 조절

2가지 속성 모두 px, em과 같은 단위나 퍼신트(%)로 크기값을 조절합니다.

07-4 목록 스타일

웹 사이트의 경우 메뉴 항목을 목록과 링크를 결합하여 만들게 되는데 목록 스타일을 줌으로써 이쁘게 사이트 메뉴를 만들 수 있다.

불릿 모양과 번호 스타일 지정하는 list-style-type 속성

개념 : 순서 없는 목록의 경우 다양한 불릿 모양, 순서 있는 목록의 경우 번호 스타일을 지정한다.

<ol>, <ul> 상관없이 list-style-type을 적용하여 목록의 스타일을 바꿀 수 있다.

불릿 대신 이미지를 사용하는 list-style-image 속성

개념 : 불릿을 원하는 이미지로 표현할 수 있다. 대신 이미지의 크기가 불릿만큼 작아야 좋습니다.
기본형 : list-style-image: <url(이미지 파일 경로)> | none

목록을 들여 쓰는 list-style-position 속성

개념 : 불릿이나 번호의 위치를 들여 쓸 수 있다.
inside 속성값 : 불릿이나 번호가 실제 내용이 시작되는 위치보다 좀 더 안으로 들여써진 듯한 효과를 부여한다.
위 속성을 통해 텍스트 문단 사이에 있는 목록을 더 쉽게 구분해 줍니다.
기본형 : list-style-position: inside | outside

종류	설명
inside	불릿이나 번호를 기본 위치보다 안으로 들여 씁니다.
outside	기본값입니다.

목록 속성을 한꺼번에 표시하는 list-style 속성

개념 : list-style을 통해 앞서 배웠던 list-style 속성들을 한꺼번에 표시할 수 있다.

07-5 표 스타일

표의 테두리, 셀의 테두리, 여러 가지 여백 등의 표 스타일을 지정할 수 있다..

표 제목의 위치를 정해 주는 caption-side 속성

기존에 표 제목은 <caption> 태그를 이용해 캡션으로 표시한다.
기본적으로 표 위쪽에 캡션이 표시되지만 caption-side 속성을 통해 아래쪽으로 옮길 수 있다.

종류	설명
top	캡션을 표 윗부분에 표시합니다. 기본값이빈다.
bottom	캡션을 표 아랫부분에 표시합니다.

표에 테두리를 그려 주는 border 속성

개념 : 표 바깥 테두리와 셀 테두리를 각각 지정합니다.

셀 사이의 여백을 지정하는 border-spacing 속성

개념 : 표와 셀에 테두리를 지정할 경우 셀과 셀 사이에 여백이 생기는데 이때 생기는 여백을 조절한다.
기본형 : border-spacing: 수평거리 수직거리
border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 된다.

표와 셀 테두리를 합쳐 주는 border-collapse 속성

개념 : 셀과 셀 사이의 여백이 생길 때 두 줄로 표시되는데 이러한 줄을 하나로 표시할지를 결정
<table> 태그에 적용되는 스타일에만 지정

종류	설명
collapse	표와 셀의 테두리를 합쳐 하나로 표시합니다.
separate	표와 셀의 테두리를 따로 표시합니다. 기본값입니다.

Files

07.md

Latest commit

History