인터넷활용 9 - 1 색과 텍스트 꾸미기

용어체크

1.Color

• 글자 색상을 변경할 때 사용하는 속성

2. Font

• 글자 크기를 변경할 때에는 font-size, 글꼴 속성은 font-family, 글자 굵기는 font-weight 이용

3. Background

• 배경을 변경할 때 사용하는 속성
• background-color는 단색으로, background-image는 이미지를 이용하여 배경을 변경하는 속성

 

학습내용 1. css의 표현 단위 2. 텍스트 꾸미기 속성 3. 배경 속성 실습 작성한 문서의 텍스트에 사용될 폰트 변경 및 꾸미기 해당 영역에 배경삽입 학습목표 1. css의 표현 단위를 설명할 수 있다. 2. 텍스트 요소의 꾸미는 방법을 설명할 수 있다. 3. 선택한 요소에 색상과 배경 등을 삽입할 수 있다.

 

 

 

---

Quiz 01글꼴을 변경할 때 사용하는 속성은 font-family이다.

• 1 O
• 2 X

정답 :1

해설 :font-family는 글꼴을 변경할 때 사용하는 속성이다.

 

 

 

Quiz 02배경을 이미지로 변경할 때 배경의 반복을 결정하는 속성값은?

• 1 background-size
• 2 background-repeat
• 3 background-attachment
• 4 background-position

정답 :2

해설 :background-repeat 속성을 이용해 배경의 반복을 결정한다.

 

 

 

Quiz 03텍스트의 꾸미는 기능 중 밑줄 여부를 결정하는 속성은?

• 1 letter-spacing
• 2 text-align
• 3 font-style
• 4 text-decoration

정답 :4

해설 :text-decoration은 텍스트에 선을 추가해 장식을 추가하는 속성이다.

 

 

---

학습정리

1. css의 표현 단위

• 색상 표현 방법: 16진수 표기법, rgb/rgba 표기법, 색상명
• 크기 표현 단위: px, %, em

2. 텍스트 꾸미기 속성

• 글꼴을 표현하는 font-family, 기울림꼴을 표현하는 font-style, 글자 크기를 설명하는 font-size, 글자 색상을 표현하는 color를 이용하여 표현

3. 배경을 다루는 속성

• 단색일때에는 background-color, 배경이미지를 넣을때는 background-image 속성을 사용하며, 이미지 삽입시 크기 조절은 background-size, 이미지 위치는 background-position, 이미지 반복 여부는 background-repeat등을 이용하여 다양하게 표현