[HTML/CSS 기초] 웹폰트, 텍스트 스타일, 자간·행간, 목록 디자인까지 총정리

HTML과 CSS를 활용해 텍스트 스타일을 더욱 세련되게 꾸밀 수 있는 방법에 대해 정리해보았습니다. !important 우선순위 설정부터 웹폰트 적용, 텍스트 장식, 그리고 목록 스타일 지정까지 다양한 속성을 알아보았습니다.

 

1. !important 사용법

CSS에서 !important는 스타일 우선순위를 강제로 높이고 싶을 때 사용합니다. 일반적으로 인라인 스타일보다 강력하게 적용됩니다.

h1 {
  color: brown !important;
}

<h1 style="color:green">레드향</h1>

 

위 예제에서는 style 속성으로 green을 지정했지만, !important가 적용된 brown이 우선 적용됩니다.

 

#CSS우선순위 #important사용법
특정 스타일을 강제로 적용하고 싶을 때 사용하는 우선순위 지정 키워드입니다.

 

2. CSS 외부 스타일 불러오기

스타일은 .css 확장자를 가진 외부 파일에 정의해두고, HTML 파일에서는 다음과 같이 불러옵니다.

<link rel="stylesheet" href="CSS/0704-2.css">

 

#CSS링크방법 #스타일시트연결
HTML 파일과 스타일을 분리함으로써 유지보수와 재사용성을 높일 수 있습니다.

 

3. 웹 폰트 적용하기

구글 폰트나 프로젝트눈누 등에서 제공하는 웹폰트를 불러와 사용할 수 있습니다.

 

@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

body {
  font-family: 'Jua', sans-serif;
}

또는 커스텀 폰트도 @font-face를 통해 적용할 수 있습니다.

@font-face {
  font-family: 'CWDangamAsac-Bold';
  src: url('https://.../CWDangamAsac-Bold.woff') format('woff');
}

 

#웹폰트 #폰트적용방법
개성 있는 웹사이트 디자인을 위해 다양한 폰트를 불러올 수 있는 방법입니다.

 

4. 텍스트 밑줄 및 그림자 효과

텍스트에 그림자나 밑줄을 지정하여 강조하거나 꾸밀 수 있습니다.

h2 {
  color: green;
  text-decoration: overline;
  text-shadow: 2px -3px 5px yellow;
}

h3 {
  text-decoration: line-through;
  text-decoration-color: crimson;
}

h4 {
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-color: crimson;
}

 

#텍스트스타일 #밑줄 #텍스트그림자
다양한 시각 효과를 적용하여 강조 및 꾸밈이 가능합니다.

 

5. 자간과 행간 조정

1) 자간(letter-spacing)

.spacing1 {
  letter-spacing: 0.5em;
}

.spacing2 {
  letter-spacing: -0.25em;
}

 

2) 행간(line-height)

.small-line {
  line-height: 0.5;
}

.big-line {
  line-height: 3;
}

 

#자간 #행간 #텍스트간격조정
글자의 가독성을 높이고 레이아웃의 안정성을 확보할 수 있는 핵심 요소입니다.

 

6. 목록 스타일 지정하기

ul, ol 태그를 사용한 목록에도 다양한 스타일을 적용할 수 있습니다.

 

1) 리스트 스타일 종류

• square: ■
• disc: ●
• circle: ○
• decimal: 1, 2, 3
• upper-alpha: A, B, C
• lower-roman: ⅰ, ⅱ, ⅲ
• upper-roman: Ⅰ, Ⅱ, Ⅲ

2) 이미지로 목록 표시

ul {
  list-style-image: url('images/dot.png');
}

 

3) 들여쓰기 위치 조정

ul {
  list-style-position: inside; /* or outside */
}

 

#목록스타일 #리스트디자인
기본 목록의 스타일을 다양하게 꾸며서 콘텐츠를 보다 세련되게 구성할 수 있습니다.