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

Preface

 

이번 장에선 CSS의 다양한 속성들을 공부했다.

 

알아야 할 속성들이 너무 많아서 머리가 아플 지경이다.

 

아, 그리고 HTML의 태그들 중 기억이 잘 나지 않는 태그들이 많아 이들을 따로 정리하려고 카테고리를 하나 만들었다.

 

HTML, CSS, JS의 태그와 속성 들을 한 눈에 보기 좋게 정리해 놓고 필요할 때마다 볼 생각이다.

---

 

1. 글꼴 관련 스타일

 

 

- font-family 속성: 웹 문서에서 사용할 글꼴을 지정한다.

1) 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다.

→ 1번 째 설정한 글꼴을 가져올 수 없을 때(네트워크 상의 문제 등) 2번째 설정한 글꼴을 지정한다.

2) 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶어서 표현한다.

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

 

 

- font-size 속성: 글자 크기를 조절한다.

1) 키워드를 사용하여 글자 크기를 지정하는 방법

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

2) 단위를 사용하여 글자 크기를 지정하는 방법

→ px(픽셀), pt(포인트), em 등이며 요즘엔 em이나 rem을 많이 사용한다.

→ 1em = 16px = 12pt

3) 백분율은 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법이다.

→ 부모 요소의 글꼴 크기가 단위로 표현되어 있어야 한다.

 

 

- CSS에서 사용하는 단위

1) em: 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정

2) rem: 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정

3) ex: 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정

4) px: 모니터의 1 픽셀을 기준(1px)으로 한 후 비율값을 지정

5) pt: 포인트라고 하며, 일반 문서에서 많이 사용

 

 

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

 

 

- font-weight 속성: 글자 굵기를 지정한다.

1) 미리 만들어진 예약어로 지정하는 방법

→ normal ¦ bold ¦ bolder ¦ lighter

2) 100~900 사이의 숫자로 지정하는 방법

→ 400은 normal, 700은 bold에 해당한다.

 

---

 

2. 웹 폰트 사용하기

 

 

- 컴퓨터에서 사용하는 글꼴:  트루타입(TrueType)

1) 확장자: *.ttf

→ 파일 크기가 커서 웹에서 사용하기 적절하지 않다.

 

 

- 웹에 적합한 글꼴

1) EOT

2) WOFF

3) WOFF2 etc.

 

 

- 구글 폰트를 통해 다양한 웨베 폰트를 웹 문서에서 링크하여 쉽게 사용할 수 있다.

1) 구글 폰트 사이트에서 원하는 웹 폰트 찾기

2) 폰트 스타일 복사하기

3) 웹 문서에 스타일 소스 넣기

 

---

 

3. 텍스트 관련 스타일

 

 

- color 속성: 문단이나 제목 등의 텍스트에서 글자 색을 지정한다.

 

 

- color 속성의 종류

---

1. 16진수: # 기호 다음에 6자리의 16진수로 표현한다.

1) 앞에서부터 두 자리씩 묶어 #RRGGBB로 표시한다.

2) 00은 각 색상이 하나도 섞이지 않았음을, ff는 해당 색이 가득 섞였음을 표시한다.

3) 색상값이 두 자리씩 중복될 경우 줄여서 표기할 수 있다.

→ 컬러 피커를 사용하여 색상값 추출이 가능하다.

 

 

2. hsl과 hsla: hue(색상), saturation(채도), lightness(명도), alpha(불투명도)로 표현한다.

1) 채도에서 0%는 회색 톤, 100%는 원래 색으로 표시된다.

2) 명도에서 0%는 가장 어두운 색, 50%는 원래 색, 100%는 흰색으로 나타난다.

 

 

3. 색상을 영문명으로 표시하는 방법

→ vscode에선 'color:'만 쳐도 다양한 색상이 나열되어 필요한 색상을 고를 수 있다.

 

 

4. rgb와 rgba: red, green, blue, alpha로 표현한다.

1) 각각 하나도 섞이지 않았을 댄 0으로, 가득 섞였을 땐 255로 표현한다.

2) alpha는 0~1의 값 중에서 사용하며, 1은 완전히 불투명한 것, 0은 완전 투명한 것을 나타낸다.

 

 

※ 각 색상 위에 마우스 커서를 입력하면 색상표 창이 뜨는데 상단 바를 클릭하면 속성 종류가 변경된다.

→ 색상표에서 오른쪽 두 번째 세로 막대는 불투명도를 조절하는 부분이다.

---

 

 

- text-align 속성: 문단의 텍스트 정렬 방법을 지정한다.

1) start: 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬

2) end: 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬

3) left: 왼쪽에 맞추어 문단을 정렬

4) right: 오른쪽에 맞추어 문단을 정렬

5) center: 가운데에 맞추어 문단을 정렬

6) justify: 양쪽에 맞추어 문단을 정렬

7) match-parent: 부모 요소를 따라 문단을 정렬

 

 

- line-height 속성: 줄 간격을 조절한다.

→ 텍스트를 세로로 정렬할 땐 영역의 높이를 나타내는 height의 속성값과 line-height의 속성값을 동일하게 설정하면 된다.

p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0; }
p { font-size: 12px; line-height: 200%; }
/* 모두 동일한 값이며, 하위 두 값을 주로 사용한다 */

 

 

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

→ 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데, 이를 없앨 수 있다.

<p style="text-decoration:none">none</p>
/* 텍스트에 줄을 표시하지 않음 */
<p style="text-decoration:underline">underline</p>
/* 밑줄 표시 <u> */
<p style="text-decoration:overline">overline</p>
/* 윗줄 표시 */
<p style="text-decoration:line-through">line through</p>
/* 취소선 표시 <s> */

 

 

- text-shadow 속성: 텍스트에 그림자 효과를 추가한다.

1) 가로 거리: 텍스트부터 그림자까지의 가로 거리로 필수 속성이다. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만든다.

2) 세로 거리: 텍스트부터 그림자까지의 세로 거리로 필수 속성이다. 양숫값은 글자의 아래쪽, 음숫값은 글자위 위쪽에 그림자를 만든다.

3) 번짐 정도: 그림자가 번지는 정도이다. 양숫값을 사용하면 그림자가 크게 표시되고, 기본값은 0이다.

4) 색상: 그림자 색상을 지정한다. 기본값은 현재 글자색이다.

※ 가로 거리와 세로 거리만 지정하면 나머지 값은 기본값을 사용해 그림자를 표시할 수 있다.

 

 

- text-transform 속성: 텍스트를 대소 문자 또는 전각 문자로 변환한다.

1) capitalize: 첫 번째 글자를 대문자로 변환한다.

2) uppercase: 모든 글자를 대문자로 변환한다

3) lowercase: 모든 글자를 소문자로 변환한다.

4) full-width: 가능한 한 모든 문자를 전각 문자로 변환한다.

 

 

- 전각 문자와 반각 문자

1) 전각 문자: 가로와 세로의 길이 비율이 같은 글자

2) 반각 문자: 가로와 세로의 길이 비율이 1:2인 글자

 

 

- letter-spacing: 글자와 글자 사이의 간격을 조절한다.

→ px, em, %로 크깃값을 조절한다.

 

---

 

4. 목록 스타일

 

 

- list-style-type 속성: 불릿의 모양이나 번호 스타일을 지정한다.

1) disc: 채운 원 모양

2) circle: 빈 원 모양

3) square: 채운 사각형 모양

4) decimal: 1부터 시작하는 10진수입니다.

5) decimal-leading-zero: 앞에 0이 붙는 10진수

6) lower-roman: 로마 숫자 소문자

7) upper-roman: 로마 숫자 대문자

8) lower-alpha(latin): 알파벳 소문자

9) upper-alpha(latin): 알파벳 대문자

10) none: 불릿이나 숫자를 없앤다.

 

 

- list-style-image 속성: 불릿을 원하는 이미지로 바꾼다.

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

 

 

- list-style-position 속성: 불릿이나 번호의 위치를 들여쓴다.

1) inside: 불릿이나 번호를 기본 위치보다 안으로 들여쓴다.

2) outside: 기본값이다.

 

 

- list-style 속성: 리스트 관련 속성을 한꺼번에 표시할 수 있다.

 

---

 

5. 표 스타일

 

 

- caption-side 속성: 캡션(표 제목)의 위치를 조정한다.

1) top: 캡션을 표 윗부분에 표시한다. (기본값)

2) bottom: 캡션을 표 아랫부분에 표시한다.

 

 

- border 속성: 표 바깥 테두리와 셀 테두리를 각각 지정한다.

<style>
	table {
		caption-side: bottom;  /* 표 캡션 위치 */
		border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
		border-collapse: collapse;  /* 테두리 한줄로 표시 */
	}
	td, th {
		border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 */
		padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
		text-align:center;  /* 셀 내용 가운데 정렬 */
	}
</style>

 

 

- border-spacing 속성: 셀과 셀 사이의 여백을 조절한다.

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

 

 

- border-collapse 속성: 두 줄로 표시된 표를 그대로 둘 것인지, 합쳐서 하나로 표시할 것인지 결정한다.

1) collapse: 표와 셀의 테두리를 합쳐 하나로 표시한다.

2) seperate: 표와 셀의 테두리를 따로 표시힌다. (기본값)