HTML, CSS, JavaScript - 7. 텍스트를 표현하는 다양한 스타일. (CSS)

하쮸·2024년 12월 15일

CSS(Cascading Style Sheets)

HTML_CSS_JavaScript

목록 보기

7/7

1. 글꼴 관련 스타일.

텍스트 스타일은 사용하는 글자의 모양새를 지정하는 글꼴 스타일, 웹 문서에 표시되는 텍스트를 지정하는 문단 스타일이 있음.
- font로 시작하는 속성은 글꼴과 관련이 있음.

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

웹 문서에서 사용하는 글꼴은 font-family 속성으로 지정.
<body>태그, <p>태그, <hn>태그 등 텍스트를 사용하는 요소에서 주로 사용함.

기본형

font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴보다는 글꼴이 없을 경우를 대비해서 추가적인 글꼴까지 생각해야됨.
글꼴 이름을 2개 이상 지정할 때는 사이에 쉼표(,)를 넣어서 구분해줌.

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

웹 문서 전체에 맑은 고딕 글꼴을 적용.
- 해당 글꼴이 없다면 돋움 글꼴 적용.
- 둘 다 없다면 굴림 글꼴 적용.
두 단어 이상으로 되어 있는 글꼴 이름은 ""로 묶어줌.
font-family속성은 <body>태그 스타일에서 일단 한번 정의하면 문서 전체에 적용됨.
- 문서 안의 모든 자식 요소에 계속 같은 글꼴을 사용함.

1-1-1. 기본형 기호 이해하기

기본형의 표기 방식.
- W3C 표준 규약에서도 사용.

1. |는 나열한 옵션 중 하나가 값이 되어야 한다는 의미.

font-size : 값1 | 값2 | 값3

값1이나 값2, 값3 중 하나가 font-size 속성값.

2. 속성값을 나열 할 때 키워드(약속한 값)는 그대로 나열함.

font-variant : normal | small-caps

font-variant 속성은 normal이나 small-caps라는 값을 사용.

3. 속성값을 나열할 때 값이 아니라 유형이라면 < >로 묶음. 이때 다른 속성을 유형처럼 사용할 수 있음.

font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>

<백분율>은 값이 아니라 유형임.
- font-size: 30%라고 사용할 수 있음.

font : <font-style><font-variant><font-weight>

font-style 속성값을 font 속성값으로 사용.
- font-style이라는 키워드를 사용하는 것이 아님.

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

글자 크기는 font-size 속성을 사용해서 조절.

기본형

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

<절대 크기>
- 브라우저에서 지정한 글자 크기.
<상대 크기>
- 부모 요소의 글자 크기를 기준으로 상대적인 크기를 지정.
<크기>
- 브라우저와 상관없이 글자 크기를 직접 지정.
<백분율>
- 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시.

1-2-1. 키워드를 사용해서 글자 크기 지정.

글자 크기로 사용할 수 있게 미리 정해놓은 키워드 중 하나를 택.

xx-small < x-small < small < medium < large < x-large < xx-large

1-2-2. 단위를 사용해서 글자 크기 지정.

CSS에서는 키워드보다는 단위를 사용해서 글자 크기를 직접 지정함.
모바일 기기를 고려해야 하는 최근에는 상대 크기 단위인 em, rem을 주로 사용.
- 1em = 16px, 12pt

css에서 쓰는 단위

종류	설명
em	- 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정.
rem	- 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정.
ex	- 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정.
px	- 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정.
pt	- 포인트라 하고, 일반 문서에서 많이 사용.

1-2-3. 백분율을 사용해서 글자 크기 지정.

백분율은 부모 요소의 글자 크기를 기준으로 계산해서 지정하는 방법.
- 부모 요소의 글자 크기가 단위로 표현되어 있어야 함. (Ex. font-size: 16px)

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

글자를 이탤릭체로 표시할 때는 font-style 속성을 사용.

기본형

font-style: normal | italic | oblique

normal : 기본값. 일반적인 형태로 표시.
italic : 이탤릭체로 표시.
oblique : 이탤릭체로 표시.

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

글자 굵기를 지정하는 속성은 font-weight
- 예약어(normal, bold, bolder) or 숫자값을 사용해서 굵기를 지정.

기본형

font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 900

normal : 기본값. 보통 굴기.
bold : 굵게.
bolder : 원래보다 더 굵게.
lighter : 원래보다 더 가늘게.
100 ~ 900 : 100이 가장 가늘고, 900이 가장 굵게.

2. 웹 폰트 사용.

웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있음.

2-1. 웹 폰트란?

CSS3가 웹 폰트(web font)를 표준으로 채택.
웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 됨.
웹 폰트를 사용한 사이트에 이용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 이용자 시스템으로 다운로드 됨.

2-2. 웹 폰트 업로드, 사용.

컴퓨터에서 사용하는 글꼴은 트루타입(TrueType), 파일 확장자는 *.ttf.
- 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에는 적절하지 않음.
웹에 적합한 글꼴.
- EOT(embedded open type)
- WOFF(web open font format)
- WOFF2
웹 폰트가 준비됐다면 @font-face 속성을 사용해서 웹 폰트를 정의함.

기본형

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

제일 먼저 font-family 속성을 사용해서 글꼴 이름을 만듦.
src속성에서 사용할 글꼴 파일의 경로를 지정함.
- local()문을 사용해서 사용자 시스템에 해당 글꼴이 있는 지 먼저 확인해야함.

@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');
      }

2-3. 구글 폰트 사용.

구글 폰트는 무료로 사용할 수 있는 여러가지 웹 폰트를 제공함.
- 웹 문서에 링크해서 사용할 수 있음.
https://fonts.google.com 접속.

언어를 korean으로 선택하면 제공하는 한글 글꼴만 모아서 볼 수 있음.

Nanum Pen Script 선택 -> 우측 상단에 Get font 클릭.

우측 상단에 Get embed code 클릭.

@import로 선택하고 아래에 있는 코드 2개 복사해서 사용할 곳에 붙여넣으면 됨.

기존 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>구글 폰트 사용하기</title>
    <style>
      h1 {
        font-size:60px;
        font-weight:bold;       
      }
    </style>
  </head>
  <body>
    <h1>HTML+CSS+JavaScript</h1>
  </body>
</html>

수정된 코드.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>구글 폰트 사용하기</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
      h1 {
        font-size:60px;
        font-weight:bold;
        font-family: "Nanum Pen Script", cursive;
      }
    </style>
  </head>
  <body>
    <h1>HTML+CSS+JavaScript</h1>
  </body>
</html>

3. 텍스트 관련 스타일.

텍스트 스타일은 글자, 단어, 글자로 이루어진 문단에서 사용하는 스타일.

3-1. 글자색을 지정하는 color속성.

웹 문서에서 문단 or 제목 등의 텍스트에서 글자색을 바꿀 때 color속성을 씀.
- color를 사용할 수 있는 속성값 : 16진수, rgb(rgba), hsl(hsla), 색상 이름

기본형

color: <색상>

3-1-1. 16진수로 표현.

웹 문서의 CSS에서 색상을 16진수로 표현.
- #기호 다음에 6자리의 16진수로 표시하는 것.
  - 6자리의 16진수는 앞에서부터 두 자리씩 묶어서 #RRGGBB로 표시.
  - 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해당 색이 가득 섞였음을 표시하는 ff까지 사용할 수 있음.
    - 16진수의 색상값은 #000000(검은색)부터 #ffffff(흰색)까지 표현할 수 있음.
- 색상을 나타내는 16진수값은 색상값을 추출해 주는 컬러 피커를 사용함.

3-1-2. hsl, hsla로 표현.

CSS3에서는 hsl을 사용해서 색상을 표기할 수 있음.
- hsl = hue(색상) + saturation(채도) + lightness(명도)의 줄임말.
  - hsla는 hsl에 alpha(불투명도)를 추가한 것.
hue는 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시.

hue(출처)

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

3-1-3. 영문명으로 표현.

색상 이름을 사용하는 것.
- Ex. red, yellow, black 등.

3-1-4. rgb,rgba로 표현.

CSS에서 색상을 지정할 때는 주로 rgb, rgba로 표현함.
- 하나도 섞이지 않았을 때는 0으로 표시, 가득 섞였을 때는 255로 표시.
  - rgba를 사용하면 rgb로 표현한 색상에 불투명도를 줄 수 있음.
  - 맨 끝에 a, α(alpha)는 불투평도 값을 나타냄.
    - 0 ~ 1사이의 값을 사용.
    - 1은 완전히 불투명한 것, 0이 되면 완전히 투명해짐.

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

text-align속성은 문단의 텍스트 정렬 방법을 지정함.
- 왼쪽 정렬, 양쪽 정렬, 가운데 정렬 등을 웹 문서에서 지정할 수 있음.
  - 기본값은 왼쪽 정렬.

기본형

text-align: start | end | left | right | center | justify | match-parent

text-align의 속성값.

종류	의미
start	- 현재 텍스트 줄의 시작 위치에 맞춰 문단을 정렬.
end	- 현재 텍스트 줄의 끝 위치에 맞춰 문단을 정렬.
left	- 왼쪽에 맞춰 문단을 정렬.
right	- 오른쪽에 맞춰 문단을 정렬.
center	- 가운데에 맞춰 문단을 정렬.
justify	- 양쪽에 맞춰 문단을 정렬.
match-parent	- 부모 요소에 따라 문단을 정렬.

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

line-height속성을 사용하면 줄 간격을 원하는 만큼 조절할 수 있음.
- 정확한 단위로 크깃값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수 있음.
줄 간격은 텍스트를 세로로 정렬할 때 유용하므로 세로로 정렬할 때 line-height속성을 사용.
- Ex 세로로 가운데 정렬하려면 영역의 높이를 나타내는 height속성값과 line-height을 똑같은 값으로 지정해주면 됨.

  <style>
    .heading {
      width:100%;
      height:100px;
      background:#222;  		/* 배경 색 */
      color:rgb(255,255,255);  	/* 글자 색 */
      text-align: center;	 	/* 가로 정렬 - 가운데 */
      line-height: 100px;   	/* 세로 정렬 - 가운데. line-height 값과 height 값을 같게 */
    }
  </style>

3-4. 텍스트의 줄을 표시 or 없애는 text-decoration속성.

text-decoration속성은 텍스트에 밑줄을 긋거나 취소선을 표시함.

    <p style="text-decoration:none">none</p>
    <p style="text-decoration:underline">underline</p>
    <p style="text-decoration:overline">overline</p>
    <p style="text-decoration:line-through">line through</p>
    <p style="text-decoration:line-through">삭제된 텍스트.</p>

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

CSS의 text-shadow속성을 사용해서 텍스트에 그림자 효과를 추가할 수 있음.

기본형

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

text-shadow의 속성값

종류	의미
<가로 거리>	- 텍스트로부터 그림자까지의 가로거리. - 필수 속성. - '+'값은 오른쪽, '-'값은 왼쪽에 그림자를 만듦.
<세로 거리>	- 텍스트로부터 그림자까지의 세로 거리. - 필수 속성. - '+'값은 아래쪽, '-'값은 위쪽에 그림자를 만듦.
<번짐 정도>	- '+'값을 사용하면 그림자가 모든 방향으로 퍼져 나감. - '-'값은 그림자가 모든 방향으로 축소되어 보임. - 기본값은 0.
<색상>	- 그림자 색상 지정. - 한 가지 색만 지정할 수도 있고, 여러 색상을 지정할 수도 있음. - 기본값은 현재 글자색.

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

text-transform속성은 텍스트를 대소 문자 or 전각 문자로 변환.
- 전각 문자 : 가로, 세로 길이 비율이 같은 글자, 반각 문자 : 가로, 세로 비율이 1 : 2인 글자

text-transform 속성값.

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

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

letter-spacing속성은 글자와 글자 사이의 간격을 조절.
word-spacing속성은 단어와 단어 사이의 간격을 조절.
- 위 2가지 속성은 px, em과 같은 단위나 % 로 크깃값을 조절함.

4. 목록 스타일.

웹 사이트에서 메뉴 항목은 대부분 목록과 링크를 결합해서 만듦.

4-1. 불릿 모양, 번호 스타일을 지정하는 list-style-type속성.

순서 없는 목록의 경우 : 앞쪽에 다양한 불릿 모양을 넣을 수 있음.
순서 목록의 경우 : 번호 스타일을 지정할 수 있음.

목록 스타일의 속성값

종류	의미	Ex
disc	- 검은 원.	●
circle	- 흰 원.	○
square	- 검은 사각형.	■
decimal	- 1부터 시작하는 10진수.	1, 2, 3...
decimal-leading-zero	- 앞에 0이 붙는 10진수.	01, 02, 03, ..
lower-roman	- 로마 숫자(소문자)	i, ii, iii, ...
upper-roman	- 로마 숫자(대문자)	I, II, III, ...
lower-alpha 또는 lower-latin	- 알파벳 소문자.	a, b, c, ...
upper-alpha 또는 upper-latin	- 알파벳 대문자.	A, B, C, ...
none	볼릿 or 숫자를 없앰.

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

list-style-image속성을 사용하면 불릿을 사용자가 하고 싶은 이미지로 바꿀 수 있음.

기본형

list-style-image: <url(이미지 파일 경로)> | none

위 코드에서 속성값으로 none를 사용하면 이미지는 쓰지 않고 list-style-type속성에서 지정한 형태로 표시됨.

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

list-style-position속성을 쓰면 불릿 or 번호의 위치를 들여 쓸 수 있음.

기본형

list-style-position: inside | outside;

list-style-position속성값.

종류	의미
inside	- 불릿 or 번호를 안으로 들여 씀.
outside	- 기본값.

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

list-style속성을 쓰면 list-style-type, list-style-image, list-style-position 3가지 속성을 한꺼번에 표시할 수 있음.

list-style-type: none;				====>		list-style: none;



list-style-type: lower-alpha
list-style-position: inside;		====>		list-style: lower-alpha inside;

5. 표 스타일.

CSS를 이용하면 표 크기 외에도 테두리, 셀 테두리, 여백 등 표의 스타일을 지정할 수 있음.

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

표의 제목은 <caption>태그를 이용해서 캡션으로 표시함.

기본형

caption-side: top | bottom

caption-side속성값.

종류	의미
top	- 캡션을 표의 윗부분에 표시. (기본값)
bottom	- 캡션을 표의 아랫부분에 표시.

5-2. 표에 테두리를 그려주는 border속성.

표의 테두리는 border속성을 사용.
- 표의 바깥쪽 테두리와 셀 테두리를 각각 지정함.

border 속성값.(출처)

table {
	caption-side: bottom;
	border:1px solid black;
}
td, th {
	border:1px dashed black;
	padding:10px;
	text-align:center;
}

5-3. 셀 사이에 여백을 지정하는 border-spacing속성.

border-spacing속성을 사용하면 셀과 셀 사이에 여백을 조절할 수 있음.

기본형

border-spacing: 수평거리 수직거리

두 값이 같을 경우 1개만 지정해도 됨.
공백으로 값을 구분.

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

5-2의 젤 하단에 있는 이미지를 보면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시되었음.
- 이 두 줄을 그냥 그대로 둘 것인지 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이
  border-collapse속성임.

border-collapse 속성값.

종류	의미
collapse	표와 셀의 테두리를 합쳐서 하나로 표시.
separate	표와 셀의 테두리를 따로 표시. (기본값)

해당 속성은 <table>태그에 적용되는 스타일에만 지정하면 됨.

<style>
	table {
		caption-side: bottom;
		border:1px solid black;
		border-collapse: collapse;
	}
	td, th {
		border:1px dotted black;
		padding:10px;
		text-align:center;
	}
</style>

하쮸

Every cloud has a silver lining.

이전 포스트

HTML, CSS, JavaScript - 7. 텍스트를 표현하는 다양한 스타일. (CSS)

HTML_CSS_JavaScript

1. 글꼴 관련 스타일.

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

1-1-1. 기본형 기호 이해하기

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

1-2-1. 키워드를 사용해서 글자 크기 지정.

1-2-2. 단위를 사용해서 글자 크기 지정.

1-2-3. 백분율을 사용해서 글자 크기 지정.

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

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

2. 웹 폰트 사용.

2-1. 웹 폰트란?

2-2. 웹 폰트 업로드, 사용.

2-3. 구글 폰트 사용.

3. 텍스트 관련 스타일.

3-1. 글자색을 지정하는 color속성.

3-1-1. 16진수로 표현.

3-1-2. hsl, hsla로 표현.

3-1-3. 영문명으로 표현.

3-1-4. rgb,rgba로 표현.

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

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

3-4. 텍스트의 줄을 표시 or 없애는 text-decoration속성.

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

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

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

4. 목록 스타일.

4-1. 불릿 모양, 번호 스타일을 지정하는 list-style-type속성.

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

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

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

5. 표 스타일.

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

5-2. 표에 테두리를 그려주는 border속성.

5-3. 셀 사이에 여백을 지정하는 border-spacing속성.

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

HTML, CSS, JavaScript - 6. CSS의 기본. (CSS)

0개의 댓글