2025. 1. 15. 17:03ㆍHTML_CSS
안녕하세요. 진득 코딩입니다.
이번 시간에는 텍스트를 다양하게 표현하게 해주는 스타일을 이용하는 방법을 살펴보도록 하겠습니다.
더불어 목록과 표에도 스타일을 지정하여 다양하게 표현하는 방법에 대해서 살펴보도록 하겠습니다.
글꼴 관련 스타일
1. font-family 속성
- font-family 속성으로 웹 문서에서 사용할 글꼴을 지정할 수 있습니다.
- 텍스트를 사용하는 요소에서 주로 사용합니다.
- 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시됩니다.
- 따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만 해당 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 입력하기도 합니다.
- 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표(,)를 넣어 구분합니다.
font-family: <글꼴 이름> ¦ [<글꼴 이름>, <글꼴 이름>]
** 기본형 기호 이해하기
1. ¦는 나열한 옵션 중 하나가 값이 되어야 한다는 의미입니다.
-> font-size: 값1 ¦ 값2 ¦ 값3 -> 값1~값3 중 하나는 값이 되어야 함
2. 속성값을 나열할 때 키워드(약속한 값)은 그대로 나열합니다.
-> font-variant: normal ¦ small-caps
3. 속성값을 나열할 때 값이 아니라 유형이라면 <>로 묶습니다. 이때 다른 속성을 유형처럼 사용할 수 있습니다.
-> font-size: <절대 크기> ¦ <상대 크기> ¦ <크기> ¦ <백분율>
2. font-size 속성
- font-size 속성을 사용하여 글자 크기를 조절할 수 있습니다.
- 글자 크기의 단위는 px(픽셀), pt(포인트), 또는 백분율을 사용할 수 있습니다.
font-size: <절대 크기>(1) ¦ <상대 크기>(2) ¦ <크기>(3) ¦ <백분율>(4)
(1) 브라우저에서 지정한 글자 크기
(2) 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
(3) 브라우저와 상관없이 글자 크기를 직접 지정
(4) 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시
1) 키워드를 사용하여 글자 크기 지정하기
- 글자 크기로 사용하도록 미리 약속해 놓은 키워드 중에서 하나를 사용할 수 있습니다.
xx-small < x-small < small < medium < large < x-large < xx-large
2) 단위를 사용하여 글자 크기 지정하기
- CSS에서는 키워드보다 단위를 사용해서 글자 크기를 직접 지정합니다.
- 사용하는 단위는 px(픽셀)이나 pt(포인트), em 등이며 음숫값은 사용할 수 없습니다.
- 예전에는 절대 크기 단위인 px이나 pt를 많이 사용했지만 모바일 기기까지 고려해야 하는 요즘에는 상대 크기 단위인 em이나 rem을 많이 사용합니다.
- 1em은 16px, 12pt와 같습니다.
| 종류 | 설명 |
| em | 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정합니다. |
| rem | 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정합니다. |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정합니다. |
| px | 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정합니다. |
| pt | 포인트라고 하며, 일반 문서에서 많이 사용합니다. |
3) 백뷴율을 사용하여 글자 크기 지정하기
- 백분율은 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법입니다.
- 단, 백분율로 계산하려면 부모 요소의 글꼴 크기가 font-size: 16px처럼 단위로 표현되어 있어야 합니다.
3. font-style
- font-style 속성을 사용항 글자를 이탤릭체로 표시할 수 있습니다.
- 이탤릭체로 바꾸는 속성값은 italic과 oblique가 있는데 웹에서는 주로 italic을 사용합니다.
- italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면에 oblique는 원래 글꼴을 단지 기울어지게 표시합니다.
- 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있어서 웹에서는 주로 italic을 사용합니다.
font-style: normal(1) ¦ italic(2) ¦ oblique(3)
(1) 기본값으로 일반적인 형태로 표시
(2) 이탤릭체로 표시
(3) 이탤릭체로 표시
4. font-weight 속성
- font-weight는 글자 굵리를 지정하는 속성으로 웹 문서를 작성할 때 자주 사용합니다.
- 예약어(normal, bold, bolder)나 숫자값을 사용해 굵기를 지정할 수 있습니다.
- 100~900 사이에서 400은 normal, 700은 bold에 해당합니다.
- 예약어 대신 숫잣값을 사용하면 글꼴 굵기를 좀 더 세밀하게 조절할 수 있습니다.
font-style: normal(1) ¦ bold(2) ¦ bolder(3) ¦ Lighter(4) ¦ 100(5) ¦ 200(5) ¦ ...(5) ¦ 800(5) ¦ 900(5)
(1) 기본값, 보통 굵기
(2) 굵게
(3) 원래보다 더 굵게
(4) 원래보다 더 가늘게
(5) 100~900 사이의 굵기를 표현하며 100은 가장 가늘게, 900은 가장 굵게를 의미
웹 폰트 사용하기
- 웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있습니다.
- 웹폰트
- 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 합니다.
- 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야 합니다.
- 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운로드됩니다.
- 이때 사용자 시스템에 없는 글꼴이더라도 웹 문서를 만들 때 사용한 글꼴을 내려받은 후 표시하므로 웹 제작자가 의도한 대로 텍스트를 보여 줄 수 있습니다. - 웹 폰트 업로드하고 사용하기
- 요즘에는 인터넷 사이트에서 제공해 주는 경우에는 주로 링크해서 사용하지만, 그렇지 않은 글꼴이거나 자신이 가지고 있는 TTF 폰트를 변환해서 사용한다면 직접 업로드해서 사용해야 합니다.
- 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf입니다.
- 하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기엔 적절하지 않습니다.
- 그래서 웹에서 적합한 여러 글꼴이 등장하였는데 그중에서 EOT(embedded open type)와 WOFF(web open font format), 그리고 최근에는 WOFF2 파일도 많이 사용합니다.
- 웹 폰트가 준비되었다면 @font-face 속성을 사용하여 웹 폰트를 정의합니다.
@font-face {
font-family: <글꼴 이름>;
src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ...];
}
- 먼저 font-family 속성을 사용해 글꼴 이름을 만듭니다.
- src 속성에서는 사용할 글꼴 파일의 경로를 지정합니다.
- 글꼴 파일의 경로를 지정하기 전에 local() 문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인합니다.
- 사용자 시스템에 글꼴이 있다면 그 글꼴을 사용하면 되지만, 만약 없다면 WOFF 포맷으로 된 글꼴을 내려받아야 합니다.
- 또한 TTF 포맷은 다른 파일 형식보다 용량이 커서 대부분의 모던 브라우저에서 지원하는 WOFF 포맷을 먼저 선언하고 TTF 포맷은 그 후에 선언합니다.
구글 폰트 사용하기
- 인터넷에서 무료로 제공하는 웹 폰트를 간단히 링크하여 사용할 수도 있습니다.
- 구글 폰트는 무료로 사용할 수 있는 여러 가지 웹 폰트를 제공하므로 웹 문서에 링크해서 쉽게 사용할 수 있습니다.
1. 구글 폰트 사이트에서 원하는 웹 폰트 찾기
구글 폰트 사이트(fonts.google.com)에 접속합니다.
[Language] 목록에서 [Korean]을 선택하면 제공하는 한글 글꼴만 모아서 볼 수 있습니다.
- 글꼴 목록 중에서 원하는 글꼴을 검색합니다.
- 필자는 'Nanum Pen Scropt'를 예시로 사용하도록 하겠습니다.
- 찾아서 나온 글꼴을 클릭해 줍니다.
- 나온 창에서 오른쪽 상단에 있는 Get font 버튼을 눌러줍니다.
그렇게 해서 나온 창에서 오른쪽에 있는 Get embed code 버튼을 눌러줍니다.
@import 속성이 보이도록 한 후 나온 코드들을 사용하여 웹 폰트를 적용하시면 됩니다.
텍스트 관련 스타일
- 글꼴은 폰트와 관련된 내용이었다면 텍스트 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에서 사용하는 스타일입니다.
1. color 속성
- color 속성을 사용하여 웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 수 있습니다.
- color를 사용할 수 있는 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름입니다.
color: <색상>
1) 16진수로 표현하는 방법
- 웹 문서의 CSS에서 색상을 표현하는 첫 번째 방법은 #ffff00처럼 # 기호 다음에 6자리의 16진수로 표시하는 것입니다.
- 6자리의 16진수는 앞에서부터 두 자리씩 묶어 #RRGGBB로 표시합니다.
- RR 자리에는 빨간색(Red), GG 자리에는 초록색(Green), BB 자리에는 파란색(Blue)의 양을 표시합니다.
- 16진수의 색상값은 #000000(검은색)부터 #ffffff(흰색)까지 표현할 수 있습니다.
- 만약 색상값이 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수도 있습니다.
2) hsl과 hsla로 표현하는 방법
- CSS3에서는 hsl을 사용해서 색상을 표기할 수 있습니다.
- hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말입니다.
- hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미합니다.
- hue는 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시합니다.
- 0 °와 360 °에는 빨간색, 120 °에는 초록색, 240 °에는 파란색이 배치되고 그 사이사이에 나머지 색이 배치됩니다.
- 채도는 퍼센트(%)로 표시하는데 아무것도 섞이지 않으면 채도가 가장 높은 상태입니다.
- 채도에서 0%는 회색 톤이고, 100%는 원래 색으로 표시됩니다.
- 명도 또한 퍼센트(%)로 표시하는데 0%는 가장 어둡고, 50%는 원래색으로, 100%는 흰색으로 나타납니다.
3) 색상을 영문명으로 표현하는 방법
- red, yellow, black처럼 잘 알려진 색상 이름을 사용하는 방법입니다.
4) rgb와 rgba로 표현하는 방법
- CSS에서는 색상을 지정할 때 주로 rgb와 rgba로 표현합니다.
- rgb는 red, green, blue의 줄임말로 앞에서부터 차례대로 빨간색, 초록색, 파란색이 들어있는 값을 나타냅니다.
- 하나도 섞이지 않았을 때는 0으로 표시하고 가득 섞였을 때는 255로 표시하며 그 사이의 값으로 각 색상의 양을 나타 냅니다.
h1{ color: rgb(0,0,255); }
- rgba를 사용하면 rgb로 표현한 색상에 불투명도를 지정할 수도 있습니다.
- rgba에서 맨 끝의 a, 즉 α(alpha)는 불투명도의 값을 나타내며 0~1의 값 중에서 사용할 수 있습니다.
- 1은 완전히 불투명한 것이고 0이 되면 완전히 투명해집니다.
h1{ color: rgba(0, 0, 255, 0.5); }
2. text-align 속성
- text-align 속성은 문단의 텍스트 정렬 방법을 지정합니다.
- text-align 속성을 사용하면 왼쪽 정렬, 오른쪽 정렬, 양쪽 정렬, 가운데 정렬 등을 웹 문서에서도 지정할 수 있습니다.
text-align: start ¦ end ¦ left ¦ right ¦ center ¦ justify ¦ match-parent
| 종류 | 설명 |
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다. |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다. |
| left | 왼쪽에 맞추어 문단을 정렬합니다. |
| right | 오른쪽에 맞추어 문단을 정렬합니다. |
| center | 가운데에 맞추어 문단을 정렬합니다. |
| justify | 양쪽에 맞추어 문단을 정렬합니다. |
| match-parent | 부모 요소를 따라 문단을 정렬합니다. |
- 정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본입니다.
- 왼쪽 정렬에서는 오른쪽에 여백이 생기지만 양쪽 정렬에서는 오른쪽에 여백이 생기지 않는다는 차이가 있습니다.
3. line-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%; }
- 줄 간격은 텍스트를 세로 정렬할 때도 유용합니다.
- 세로로 가운데 정렬하려면 line-height의 속성값을 추가하여 영역의 높이를 나타내는 height의 속성값과 똑같이 지정하면 됩니다.
4. text-decoration 속성
- text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시합니다.
5. text-shadow 속성
- text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체감 나게 보여줄 수 있습니다.
- 사이트 제목처럼 강조해야 할 글자에 사용하면 눈에 띄게 만들 수 있습니다.
text-shadow: none ¦ <가로 거리> <세로 거리> <번짐 정도> <색상>
| 종류 | 설명 |
| <가로 거리> | 텍스트부터 그림자까지의 가로 거리로 필수 속성입니다. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만듭니다. |
| <세로 거리> | 텍스트부터 그림자까지의 세로 거리로 필수 속성입니다. 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만듭니다. |
| <번짐 정도> | 그림자가 번지는 정도입니다. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시됩니다. 반대로 음숫값은 그림자가 모든 방향으로 축소되어 보입니다. 기본값은 0입니다. |
| <색상> | 그림자 색상을 지정합니다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있습니다. 기본값은 현재 글자색입니다. |
- text-shadow 속성 중에서 가로 거리와 세로 거리만 지정하면 나머지 값은 기본값을 사용해 텍스트 그림자를 표시할 수 있습니다.
6. text-transform 속성
- text-transform 속성은 텍스트를 대소 문자 또는 전각 문자로 변환합니다.
- 한글에는 형향을 미치지 않고 영문자에만 적용됩니다.
| 종류 | 설명 |
| capitalize | 첫 번째 글자를 대문자로 변환합니다. |
| uppercase | 모든 글자를 대문자로 변환합니다. |
| lowercase | 모든 글자를 소문자로 변환합니다. |
| full-width | 가능한 한 모든 문자를 전각 문자로 변환합니다. |
7. letter-spacing, word-spacing 속성
- letter-spacing 속성은 글자와 글자 사이의 간격을 조절하고 word-spacing 속성은 단어와 단어 사이 간격을 조절하는데, CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절합니다.
- px, em과 같은 단위나 퍼센트(%)로 크깃값을 조절합니다.
목록 스타일
1. list-style-type
- list-style-type 속성을 사용하여 불릿의 모양이나 번호 스타일을 지정할 수 있습니다.
| 종류 | 설명 | 예시 |
| disc | 채운 원 모양입니다. | ● |
| circle | 빈 원 모양입니다. | ○ |
| square | 채운 사각형 모양입니다. | ■ |
| decimal | 1부터 시작하는 10진수입니다. | 1, 2, 3, ... |
| decimal-leading-zero | 앞에 0이 붙는 10진수입니다. | 01, 02, ... |
| lower-roman | 로마 숫자 소문자입니다. |
ⅰ, ⅱ, ⅲ, ... |
| upper-roman | 로마 숫자 대문자입니다. |
Ⅰ, Ⅱ, Ⅲ, ... |
| lower-alpha 또는 lower-latin | 알파벳 소문자입니다. | a, b, c, ... |
| upper-alpha 또는 upper-latin | 알파벳 대문자이비다. | A, B, C, ... |
| none | 불릿이나 숫자를 없앱니다. |
2. list-style-image 속성
- list-style-image 속성을 사용하여 불릿을 원하는 이미지로 바꿀 수 있습니다.
list-style-image: <url(이미지 파일 경로)> ¦ none
3. list-style-position 속성
- list-style-position 속성을 사용하여 불릿이나 번호의 위치를 들여 쓸 수 있습니다.
- 속상값으로 inside를 지정하면 불릿이나 번호가 실제 내용이 시작되는 위치보다 좀 더 안으로 들여 써진 듯한 효과가 납니다.
list-style-position: inside ¦ outside
| 종류 | 설명 |
| inside | 불릿이나 번호를 기본 위치보다 안으로 들여 씁니다. |
| outside | 기본값입니다. |
4. list-style 속성
- list-style 속성을 사용하면 list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있습니다.
* 불릿 없애기
ul { list-style-type: none;} -> ul {list-style: none;}
* 소문자 목록 만들고 들여 쓰기
ol { ol {
list-style-type: lower-alpha; -> list-style: lower-alpha inside;
list-style-position: inside; }
}
표 스타일
1. caption-side 속성
- 표 제목은 <caption> 태그를 이용해 캡션으로 표시합니다.
- 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 이용하여 표 아래쪽으로 옮길 수 있습니다.
caption-side: top ¦ bottom
| 종류 | 설명 |
| top | 캡션을 표 윗부분에 표시합니다. 기본값입니다. |
| bottom | 캡션을 표 아랫부분에 표시합니다. |
2. border 속성
- border 속성을 사용하여 표 바깥 테두리와 셀 테두리를 각각 지정할 수 있습니다.
3. border-spacing 속성
- border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있습니다.
border-spacing: 수평거리 수직거리
- border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 됩니다.
4. border-collapse 속성
- <table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시됩니다.
- 이때 border-collapse 속성을 사용하면 두 줄로 그냥 둘 것인지 아니면 합쳐서 하나로 표시할 것인지 결정할 수 있습니다.
- <table> 태그에 적용되는 스타일에만 지정하면 됩니다.
| 종류 | 설명 |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시합니다. |
| separate | 표와 셀의 테두리를 따로 표시합니다. 기본값입니다. |
이번 시간에는 스타일을 이용하여 텍스트, 목록, 그리고 표를 다양하게 표현하는 방법에 대해서 알아보았습니다.
CSS를 사용하면 기존에 HTML을 이용할 때보다 확실히 좀 더 자유롭게 표현해 줄 수 있다는 것을 알 수 있었습니다.
이번 시간은 여기까지입니다.
궁금하시거나 문의하실 사항이 있다면 댓글 남겨주시면 열심히 답글을 달도록 하겠습니다.
끝까지 봐주셔서 감사합니다.😊
'HTML_CSS' 카테고리의 다른 글
| HTML/CSS 그룹 프로젝트 1일차 - 페이지 윗부분 완성하기 (0) | 2025.01.17 |
|---|---|
| HTML/CSS로 그룹 프로젝트 시작해보자 (0) | 2025.01.16 |
| 웹 사이트를 꾸며주는 CSS에 대해 알아보자 (0) | 2025.01.14 |
| HTML에서 입력 양식을 작성해보자 (0) | 2025.01.13 |
| HTML에서 미디어와 하이퍼링크를 삽입해보자 (0) | 2025.01.10 |