프론트엔드 CSS 프로그래밍 기초

2. 셀렉터와 스타일 속성

본 강좌에서는 css에서 가장 중요한 셀렉터(Selector)를 배웁니다. 기본 셀렉터에는 어떠한 것이 있는지 살펴 보고 셀렉터마다 HTML 요소에 접근하는 방법이 어떻게 다른지 차이점에 대해 알아봅니다. 또한 CSS 에서의 다양한 속성 활용 방법을 배웁니다.

이 강의를 통해 CSS 셀렉터의 종류를 배우고 다양한 형태로 HTML문서에 CSS를 적용할 수 있게 됩니다.

Youtube 에서 동영상 강좌 보기

01: 셀렉터란?

스타일은 적용 대상이 있어야 하는데 셀렉터가 바로 그 대상입니다. 기본적으로 태그, 아이디, 클래스를 셀렉터로 사용하며 이들을 조합해서 특정 조건에 맞는 셀렉터를 정의해 사용하게 됩니다.

셀렉터 사용예 사용예 설명
.class .intro html 태그에서 class=”intro”로 된 모든 태그 영역 선택
#id #banner html 태그에서 id=”banner”로 된 태그 영역 선택
* * 문서내 모든 요소를 선택
태그 p 문서내 모든 <p> 태그 영역 선택
태그, 태그 div, p 모든 <div> 와 <p> 태그 영역 선택
태그 태그 div p <div> 태그 안에 있는 모든 <p> 태그 영역 선택


그 외 좀 더 복잡한 셀렉터는 4장 복합 셀렉터에서 살펴 봅니다.

02: 기본 셀렉터

기본 셀렉터에는 태그, 아이디, 클래스 3가지가 있습니다.

1) 태그 셀렉터

p {
  text-align: center;
  color: red;
}

h1,h2,h3,h4 { color: blue; }

경우에 따라서는 태그의 특정 속성에 대해 셀렉터를 지정하는 것이 가능 합니다. 예를 들면 <input> 태그는 type 속성에 따라 다양한 입력양식을 제공하게 되어 있습니다. 이경우 특정 type 에만 배경색이나 크기를 지정하기 위해서는 다음과 같이 태그 셀렉터에 속성을 함께 사용합니다.

input[type=text] {
  background-color: blue;
  color: white;
}

2) id 셀렉터

#id_name { color: blue; }

---
<div id="id_name">
...
</div>

3) class 셀렉터

.class_name1 { color: blue; }
p.class_name2 { color: red; }

---
<div class="class_name1">
...
</div>

03: 기본 셀렉터 조합

기본 셀렉터인 태그, 클래스, 아이디의 조합에 따라 다양한 셀렉터 정의가 가능합니다. 예를 들어 하나의 태그에 대해 어떤 경우에는 적용이되고 어떤 경우에는 적용이 되지 않는 상황을 셀렉터 정의에 따라 만들 수 있습니다.

1) 동시 지정

,를 이용해 셀렉터를 나열하면 해당 셀렉터에 동일한 속성을 부여할 수 있습니다.

h1, h2 {...}
.box, .note {...}

2) 태그와 클래스 결합

태그와 클래스를 ,을 이용해 결합할 수 있습니다. 예를 들면 같은 클래스를 사용 하더라도 h1 과 h2 에 각각 다르게 적용하고 싶은 경우에 사용할 수 있습니다. 다음 예제서는 .header 에 공통된 여러 속성을 적용해 두고 h1, h2에서는 각각 특정 속성만 변경하는 형식으로 많이 사용합니다.

.header { color: red; }
h1.header { color: blue;}
h2.header { color: green;}

3) 기본 셀렉터 조합 사용 예

CSS 가 다음과 같이 작성되었다고 가정 합니다.

.header { color: red; }
div.header { color: blue;}
h1,h2 {color: green}

html 파일은 다음과 같이 작성되어 있을때 각각의 코드는 셀렉터 조합에 따라 스타일이 적용 됩니다.

<p class="header">hello</p>   -> 붉은색 출력
<div>hello</div>    -> 기본색 출력
<div class="header">world</div>   -> 파란색 출력
<div><h1>hello</h1></div>   -> 녹색 출력
<div class="header"><h1>world</h1></div>   -> 녹색 출력
<h2>hello world</h2>   -> 녹색 출력

그 외 좀 더 복잡한 셀렉터 조합에 대해서는 4장 복합 셀렉터에서 살펴 봅니다.

04: 속성 활용하기

셀렉터로 스타일 적용을 원하는 html 문서의 영역을 선택 했다면 다음 단계는 적절한 속성을 활용해 스타일을 정의하는 것입니다.

여기서는 대표적인 속성들을 유형별로 구분해 살펴보도록 합니다. 이번장에서 언급되지 않는 중요한 속성들은 이후 강좌에서 배우게 됩니다.

1) 텍스트 속성

기본적으로 화면에 출력되는 글자와 관련된 속성들입니다. 대표적인 속성은 다음과 같습니다.

- color: 글자색 지정 
- text-align: 주어진 영역에서 글자의 정렬 방식 지정(left/right/center). 
- text-align: justify 의 경우 양쪽 정렬

2) 폰트 속성

기본적으로 화면에 출력되는 글꼴과 관련된 속성들입니다. 폰트 설정의 경우 컴퓨터에 폰트가 설치되어 있어야 하며 설치된 폰트와 상관없이 폰트 적용을 위해서는 web font 라는 것을 사용해야 합니다.

font-family

폰트의 이름과 유형을 지정하는 속성 입니다. 영문을 기준으로 폰트의 유형은 세가지로 구분하며 다음과 같습니다.

h1 {
    font-family: "Times New Roman", verdana, arial;
}

font-style

폰트의 스타일을 지정하는 속성 입니다. normal, italic, oblique 가 있으면 oblique 는 italic 과 유사하며 잘 사용되지 않습니다.

.text1 { font-style: normal}
.text2 { font-style: italic}

font-size

폰트의 크기를 지정하는 속성 입니다. px, %, rem, em 등 여러 단위로 사용할 수 있습니다. 단위는 박스모델에서 자세히 살펴 봅니다.

.text1 { font-size: 10px}
.text2 { font-size: 2em}

font-weight

폰트의 두께를 지정하는 속성 입니다. normal, bold, bolder 등을 사용할 수 있습니다.

.text1 { font-weight: normal}
.text2 { font-weight: bold}

font-variant

폰트의 변형을 지정하는 속성으로 normal, small-caps 를 사용할 수 있습니다. small-caps 는 소문자 크기를 유지하며 대문자로 변형해 주는 속성 입니다.

3) 정렬 속성

일반적인 문서 작성 프로그램에서는 텍스트나 이미지등을 가운데로 정렬하기가 쉽습니다. css 에서 가장 어려운 부분이 원하는 곳에 원하는 텍스트나 박스를 배치하는 것입니다.

기본적인 css 정렬 속성은 다음과 같습니다.

실제 상황에서는 단순한 정렬 속성을 사용하는것 이외에도 여러 주변 요소와의 관계가 고려되어야 하는 문제로 보다 자세한 내용은 3장에서 자세히 다루게 됩니다.

4) 링크 속성

하이퍼링크를 만들기 위한 <a> 태그에 적용할 수 있는 속성 입니다. html 의 기본 특성상 하이퍼링크 텍스트는 기본텍스트와 다른 색상을 가지고 마우스가 올라가면 색상이 변경되고 기본적으로 밑줄이 그어져 있습니다. 방문했던 사이트의 색상은 다르게 나와 디자인적인 일관성을 유지하려면 귀찮지만 관련된 속성을 모두 지정해 주어야 합니다. 다음은 <a> 태그에 적용되는 가상 셀렉터 입니다.

가상 셀렉터는 4.복합 셀렉터에서 보다 자세하게 배웁니다.

각각의 가상 셀렉터에는 color, background-color, text-decoration 등의 속성이 사용 됩니다.

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: hotpink;
  text-decoration: underline;
}

a:active {
  background-color: blue;
  text-decoration: underline;
}

5) 컬러 속성

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

컬러속성

CSS Color

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

rgba, hsla

#text1 { color: rgba(255, 99, 71, 0.5) }
#text2 { color: hsla(9,100%, 64%, 0.5) }

7) 배경 속성

색상이나 이미지를 배경으로 지정하기 위한 속성 입니다. 대표적인 속성들은 다음과 같습니다.

body {
  background-image: url("back_img.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

참고 자료