3. 폰트

글꼴 관련 속성

• font-family - 글꼴 종류를 지정합니다. 기본값은 웹브라우저 기본 글꼴이며 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 사용할 수 있습니다. 적용은 웹 폰트 사이트에 방문하여 <link> 또는 @import 문을 사용하여 웹 폰트를 적용합니다.
• font-size - 글자 크기를 지정합니다.
• font-style - 글자를 주로 이탤릭체를 설정하기 위해 사용합니다.
• font-weight - 글자 굵기를 지정합니다.
• font-variant - 소문자를 작은 대문자로 바꾸는 속성

<!-- HTML -->
<h3 id="title">CSS</h3>
<p class="style">글꼴 속성1</p>
<p class="weight">글꼴 속성2</p>
<p class="variant">글꼴 속성3</p>

/* CSS */
@import url('https://fonts.googleapis.com/css2?family=Moirai+One&display=swap');
* {
  /* Noto Sans KR 폰트 다운로드 */
  font-family: serif;
}

#title {
  font-size: 50px;
}

.style {
  font-style: italic;
}

.weight {
  font-weight: bold;
}

.variant {
  font-variant: small-caps;
}

 

 

속성값 단위

• px - 픽셀 단위
• rem - 최상위 요소의 글꼴 크기에 몇 배
• em - 자신의 요소의 글꼴 크기에 몇 배

<!-- HTML -->
<p class="px">글자 단위1</p>
<p class="rem">글자 단위2</p>
<p class="em">글자 단위3</p>

/* CSS */
.px {
  font-size: 15px;
}

.rem {
  font-size: 2rem;
}

.em {
  font-size: 2em;
}

 

 

글자 색상

• 글자 색상은 color 속성으로 지정하며 속성 값으로는 4가지가 있습니다.
• 색상 키워드, RGB/RGBA, 16진수, hsl/hsla 방법이 있습니다.

 

색상 키워드

• 색상 키워드는 대소문자를 구분하지 않는 식별자로 특정 색상의 명칭으로 나타냅니다.
• 예) blue, red, yellow

RGB/RGBA

• RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.
• 예) rgb(0,0,0), rgba(0,0,0,0)

16진수

• # 뒤의 16진수 표기법으로 표현할 수 있습니다.
• 예) #ff0000, #ff00ff, #808000

hsl/hsla

• HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.
• 예) hsl(H, S, L[, A]), hsla(H, S, L, A)

<!-- HTML -->
<p class="color">글자 색상</p>

/* CSS */
.color {
/*   color: red; */
/*   color: rgb(0,255,0); */
  color: #0000ff;
}

 

 

그 외 글자 관련 속성

• text-align - 블록 요소나 테이블 셀 박스안에서 글자를 가로 정렬 하는 데 사용합니다. 값은 start, end, left, right, center, justify, justify-all, match-parent 키워드가 올 수 있습니다.
• line-height - 줄 간격 높이를 설정합니다. default는 1.25이고 1.5이상 주면 글을 읽기가 용이해집니다.
• letter-spacing - 글자 사이의 간격입니다.
• word-spacing - 단어 사이(띄어쓰기)의 간격입니다.
• text-indent - 들여쓰기입니다.
• text-transform - 대문자로 또는 소문자로 바꾸는 속성입니다. 값은 uppercase, lowercase 키워드가 올 수 있습니다.
• text-decoration - 글자를 장식하는데 사용합니다. 주로 <a>태그에 밑줄을 없앨 때 사용합니다.
• text-shadow - 글자에 그림자를 넣을 수 있습니다. 값은 가로, 세로, 번짐, 색상 순입니다.
• list-style - 리스트의 글머리기호 스타일을 변경합니다. 값은 circle, square, upper-alpha, none 키워드가 올 수 있습니다.

<!-- HTML -->
<p class="textalign">글자정렬</p>
<p class="lineheight">1949년 10월 1일 제정된 
<span class="shadow">「국경일에 관한 법률」</span>에 의거, 
<a href="#">광복절</a>이 국경일로 제정되었다. 이 날은 경축행사를 전국적으로 거행하는데 중앙경축식은 서울에서, 지방경축행사는 각 시·도 단위별로 거행한다.
이 날의 의의를 고양하고자 전국의 모든 가정은 국기를 달아 경축하며, 정부는 이 날 저녁에 각계각층의 인사와 외교사절을 초청하여 경축연회를 베푼다.
광복회원을 위한 우대조치의 하나로, 광복회원 및 동반가족에 대하여 전국의 철도·시내버스 및 수도권전철의 무임승차와 고궁 및 공원에 무료입장할 수 있도록 하고 있다.
<span class="transform">www.NAVER.com</span>
</p>
<hr>
<ul>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
</ul>

/* CSS */
.textalign {
  border: 1px solid black;
  text-align: center;
}

.lineheight {
  line-height: 30px;
  letter-spacing: 1px;
  word-spacing: 2px;
  text-indent: 100px;
}

.transform {
  text-transform: uppercase;
}

.lineheight > a {
  text-decoration: none;
}

.shadow {
  text-shadow: 5px 5px 3px black;
}

ul {
  list-style: none;
}