Part 01_웹 프로그램 언어의 기초_16

Naver BoostCourse Full-Stack Developer Course

Part 01 웹 프로그래밍 기초

15. CSS 기본 Style 변경하기

※ Intro

- 글자색, 배경색, 글꼴 바꾸기

- 텍스트 속성 및 옵션값을 변경하기

※ 핵심 개념

* font-size

* background-color

* font-family

※ CSS 기본 스타일 변경하기

- CSS style 적용은 글자색, 배경색 등이 가장 자주 사용됨

- 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여함

- 색상 관련 값은 주로 16진수 표기법을 사용함

※ font 색상 변경

* color : red;

* color : Reba(255, 0, 0, 0.5);

* color : #ff0000;     // 16진수 표기법

※ font 사이즈 변경

* font-size : 16px;

* font-size : 1em;

※ 배경색

* background-color : #ff0;

* background-image, position, repeat 등의 속성이 있음

* background : #0000ff url(".../gif") no-repeat center top;    // 한 줄로 정의 가능

※ 글씨체/글꼴

* font-family : "Gulim";

* font-family : monospace;

※ 웹 폰트

- 웹 폰트 : 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용하는 방법

- 다양하고 예쁜 폰트들을 웹 폰트로 사용할 수 있음. 그러나 다운로드받아야 한다는 단점이 있음

- 다운로드 시간이 오래 걸리면 화면에 노출되는 시간이 느려져 오히려 사용자에게 불편함

- 또한 다양한 해상도에서 깨지는 문제도 발생함

※ 웹 폰트 종류

- 웹 폰트는 수많은 종류가 있음

- 대표적으로 구글 웹폰트가 있음. 최근에는 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장 (unicode 영역 중 Private Use Area (PUA) 영역을 활용해서 제작)

※ unicode를 사용하여 아이콘 표현하기

- 웹폰트 방식 말고 기본 unicode를 사용해서 간단한 아이콘을 표현할 수 있음

<div> 안녕하세요 &#x263a; </div>    // 웹 화면에는 웃음 표시가 표현되는 코드