CSS로 HTML태그를 불러오는 방법에 대해 알아보자.

1. CSS에서 HTML불러오기

: 태그명 + {스타일} 의 형태로 불러올 수 있다.
스타일의 위치에 해당 태그를 꾸며줄 수 있는 태그를 넣을 수 있다.

1) ID 불러오기 : #

#article-title {
  font-family: cursive;
  text-transform: capitalize;
}

• ID 값을 불러올 때에는 #을 이용한다.

2) Class 불러오기 : .

.title {
  color: teal;
}

• class 값을 불러올 때에는 .을 이용한다.

3) 태그 불러오기

: 태그를 불러오는 경우 태그명만 작성해주어도 된다.

p {
  font-family: Arial;
}

• 고유 id, class를 설정하지 않은 경우 아무것도 붙이지 않는다.

2. HTML에 2가지 이상 스타일 적용하기

.green {
  color: green;
}

.bold {
  font-weight: bold;
}

: 다음과 같이 2가지 클래스가 존재하고 각각의 스타일이 다르다.
이런 경우 두가지 스타일을 모두 적용하고 싶을때 새로운 클래스를 만들어 두가지 스타일을 담을 필요 없다.
아래와 같은 방법을 이용해보자.

<h1 class="green bold"> ... </h1>

: 위와 같이 고유 class값에 띄어쓰기를 활용하여 두가지 클래스의 스타일을 모두 적용할 수 있다.

2. 동일한 스타일 묶기

input {
  text-decoration: none;
}
a {
  text-decoration: none;
}

• 위와 같이 동일한 스타일을 가진 태그는 한번에 작성할 수 있다.

input, a {
  text-decoration: none;
}

• 이처럼 쉼표를 이용해서 한번에 작성하도록 하자