STS 122::CSS 기초

2. 셀렉터와 컬러


본 강좌에서는 스타일 시트의 가장 기본적인 내용인 선택자를 다룹니다. 기본 선택자에는 어떠한 것이 있는지 살펴본 후 각각의 선택자를 비교해봅니다. 각각의 선택자마다 HTML 요소에 접근하는 방법이 어떻게 다른지 차이점에 대해 알아봅니다. CSS 색상을 표현하는 방법들을 배웁니다. 표현 방법의 원리에 대해 학습하고 같은 색상을 각각의 색상코드로 어떻게 나타내는지 연습해봅니다.

이 강의를 통해 CSS 선택자의 종류를 배우고 다양한 형태로 HTML문서에 CSS를 적용하는 방법을 배우게 됩니다.


01: 셀렉터란?

스타일은 적용 대상이 있어야 하는데 선택자가 바로 그 대상입니다. 선택자는 기존에 HTML 문서에서 사용되는 태그에 대해서 속성과 값을 정의하는 방식으로 별도의 적용 코드 없이 선언과 동시에 해당 태그에 스타일이 적용됩니다. 스타일을 선언할 때 주의사항은 HTML에서 기존에 사용하던 태그만 사용가능하다는 점입니다.

Selector Example Example description
.class .intro Selects all elements with class=”intro”
#id #firstname Selects the element with if=”firstname”
* * Selects all elements
element p Select all <p> elements
element, element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element > element div > p Selects all <p> elements where the parent is a <div> element


동영상 강좌

참고 자료

퀴즈

1) 선택자의 개념을 쓰시오.

해답보기

CSS가 어떤 태그에 스타일을 정의할 때, 어떤 태그에 정의할 지에 대한 문법이 필요하게 되는데 그것을 선택자라고 합니다.

2) 다음 코드에서 선택자는 무엇입니까?

h1 { color: red; }
해답보기

  • h1

02: 기본 셀렉터

기본 선택자에는 태그, 아이디, 클래스 3가지가 있습니다.

css_2-2

1) 태그 선택자

2) 아이디 선택자

3) 클래스 선택자

동영상 강좌

참고 자료

퀴즈

1) 선택자 종류 3가지를 쓰고, 각각의 표현을 쓰시오.

해답보기

1. 태그 
h1 { color: red; }

2. 아이디
#id { color: red; }

3. 클래스
.class { color: red; }

2) 다음 코드의 폰트 색상을 빨강색으로 설정하는 2가지 방법을 모두 쓰시오.

<h1 class="box">Hello world</h1>
해답보기

.box { color: red; }
h1 { color: red; }



3. 컬러

컴퓨터에서 사용하는 색상은 빛의 삼원색인 빨강색(Red), 초록색(Green), 파랑색(Blue)입니다. 이를 보통 RGB Color라고 부르는데, 각각의 색상은 0 ~ 255까지의 단계로 표현할 수 있습니다. 0부터 255를 16진수로 표현하면 00 ~ FF로 표현됩니다. CSS는 140개 이상의 색상이름, 16진수(HEX) 값, RGB 값 , RGBA 값, 불투명도를 지원합니다.

css_2-3

1) CSS Color

#text1 { color: red; }
#text2 { color: #FF0000; }
#text3 { color: rgb(255, 0, 0); }

2) CSS Background-color

#box { 
  background-color: green;
  background-image: url("/img/img.png"); 
  background-repeat: repeat-x;
}

동영상 강좌

참고 자료

퀴즈

1) CSS color 표현방법 3가지를 쓰시오.

해답보기

  • 색상 이름
  • HEX code
  • RGB code

2) 배경에 이미지를 설정하는 코드를 작성하시오. (image01.png)

해답보기

{ background-image: url("image01.png"); }

04: 실습 예제

기본 실습은 통합실습페이지에서 한꺼번에 다루고 있습니다. 아래의 링크를 클릭하면 새창(탭)이 열리고 해당 예제로 이동하게 됩니다.

05: 참고 자료