7) CSS의 class와 id

최종적으로 만들어 낼 웹사이트

저번 글에서는 CSS의 주된 특징과 선택자와 속성을 이용하는 방법에 대해서 배웠다. 이번 글과 다음 글에서는 위의 그림과 같은 웹페이지를 만들어볼 것이다. 이번 글에서는 클래스와 id라는 아주 중요한 개념을 배운다.

---

목차

1. 인라인 속성 적용

2. 클래스

3. id

---

1. 인라인 속성 적용

저번에 만들어 낸 웹사이트와 이번에 만들 웹사이트

저번에 만든 웹사이트와 이번에 만들 웹사이트와 대조해보자. 무엇이 다를까? 뭔가 많은 것이 바뀌었다. 내용은 모두 같지만 디자인 적인 요소가 많이 다르다. 일단 Web의 글자색이 바뀌었다. 그리고 내용마다 배치가 달라졌고 사각형 모양으로 구획 같은 게 생겼다. 글자 크기도 좀 달라졌다. 리스트 하이퍼텍스트에서는 원래는 있어야 할 밑줄도 없다. 차근차근 바꿔 나가 보자.

 

인라인으로 "Web"의 글자색을 바꿨다.

인라인(Inline) 속성 적용

먼저 글자색을 바꿔보자. 우리는 지금 Web이라고 써진 글자의 글자색만 검은색으로 바꾸고 싶다. 그럼 어떻게 해야할까? 그 방법은 직접적으로 여기는 이렇게 써라 속성을 지정해주는 것이다. 내가+- 바꾸고자 하는 태그 안에 일단 style이라는 HTML속성을 쓰고 그 뒤에 들어가는 “ ”안에 CSS속성을 정의해주면 된다.

 

이러면 웹 브라우저가 HTML파일을 읽다가 style이라는 속성을 만나면 그 뒤의 속성값은 CSS방식으로 해석해낸다. (참고로 HTML과 CSS의 속성 정의 방법을 헷갈리지 말자. HTML의 속성은 =과 “”로 정의하지만 CSS는 :과 ;로 정의한다.) 그럼 <a href=”” style=”CSS속성:CSS속성값;”>이런 식으로 위 그림과 같이 써주면 된다.

 

여기서는 CSS를 사용할 때 선택자를 사용하지 않는 것을 알 수 있는데, 이는 어디의 스타일을 바꿀 것인지 명확하기 때문이다. 때문에 선택자를 쓰지 않는다. 이런 식으로 CSS속성을 HTML소스코드 중간에 직접적으로 작성하는 방식을 속성을 인라인(inline)으로 적용했다고 말한다. inline은 말 그대로 ‘줄 안에’라는 뜻이다.

---

리스트 decoration

글자색을 바꿨다면 두번째로 이제 리스트에 해당하는 부분의 밑줄을 빼보자. 저번에 배운대로 선택자를 활용해서 a태그 안에 들어간 내용의 디자인을 바꿔보자. CSS속성은 text-decoration속성을 활용하면 된다. a {text-decoration:none;} 이렇게 작성하자. 그럼 위와 같이 싹 사라진다. 근데 문제는 원치 않게도 Web이라는 글자의 밑줄까지 다 사라져 버렸다.

 

그럼 방금 활용한 방법(인라인 속성 적용)으로 Web의 부분만 다시 text-decoration:underline; 을 추가해주면 될 것이다.

 

여기서 한번 생각을 해보자. 우리는 어떤 태그의 스타일을 일괄적으로 수정하고 싶을 뿐만 아니라, 한 태그 안에서도 스타일을 다양한 분류로 나누고 싶을 수 있다. 예를 들어 아까의 경우처럼 <a>태그에 들어간 내용, 그러니까 Web 부분과 리스트 부분의 스타일을 달리하고 싶다고 하자. 이 경우 방금 전에 배운 인라인 방식으로 속성을 일일이 바꿔주면 될 것이다. 문제는 현재는 간단한 웹페이지라서 일일이 바꾸는데 큰 어려움이 없지만, 복잡한 웹페이지의 경우 인라인으로 속성을 바꿔주는 것은 상당히 힘든 일이다.

 

그래서 혁명적인 문법을 하나 도입한다. 한 태그 안에서도 스타일을 나누어서 적용할 수 있도록 스타일마다 이름을 붙여 놓는 것이다. 그래서 도입한 것이 클래스와 id라는 것이다. 말만 들어서는 감이 잘 안 올테니 한번 직접 실습을 해보자.

---

2. 클래스

main_title 클래스를 적용하였을 때

 

웹페이지에서 Web이라는 글은 웹페이지 화면에서 제목이 될 요소이다. 그래서 나는 얘한테 main_title이라는 이름을 붙여주고 싶다. 기존에 썼던 CSS속성을 다 지우고 class라는 html속성을 추가하고 위 그림과 같이 class=”main_title”을 써주자. 이것은 그럼 main_title이라는 이름을 갖게 된 것이다. 이것을 우리는 클래스라고 부른다. (클래스라는 이름은 다른 프로그래밍 언어에서도 많이 보게 될 것인데 개념이 제법 유사하다.)

 

그럼 이제 선택자를 이용해 클래스를 선택한다. 클래스를 선택하기 위해서는 클래스 이름 앞에 마침표를 붙여주면 된다. 그리고 text-decoration: underline으로 속성을 정의해주자. 그럼 결과는?

 

Web만 밑줄이 생긴 것을 알 수 있다. 근데 글자색을 따로 정의하지 않았는데 글자색까지 빨간색으로 변화했다. 어떻게 된 일일까? 그것은 a태그의 글자색을 이미 빨간색으로 정의해 놓았기 때문이다. 따라서 a태그의 하위 스타일 항목인 .main_title은 글자색을 따로 정의하지 않았으면 a태그의 속성을 그대로 가져가게 된다. 이런 특성을 상속이라고 한다.

 

*추가 지식

1. 클래스가 상위 클래스, 하위 클래스로 나뉘어진다면 상위 클래스를 부모 클래스, 하위 클래스를 자식 클래스라고 부른다.

2. CSS에선 부모 클래스의 모든 속성이 상속되는 것은 아니다. 상속되는 속성이 따로 있다. 방금 사용한 color속성은 상속된다.

 

main_title 클래스의 color를 black으로 맞춰주자.

그렇다면 글자색을 따로 검은색으로 정의해주자. 그럼 위와 같이 의도한대로 나오게 된다.

---

 

3. id

추가적으로 id에 대해서도 배워보자. class대신 쓸 수 있는 것이 바로 id이다. id의 선택은 id앞에 #을 붙여서 할 수 있다. CSS에서 id대신 class로 대체해서 써도 똑같이 동작한다. 이렇게만 말하면 class와 id는 동일하게 느껴질 것이다.

 

그럼 차이점이 무엇일까? 스타일의 적용 순위가 class보다 높다. 즉 id->class->tag순서로 우선적으로 스타일이 적용되게 된다. 그래서 id는 말 그대로 identification인 것에서 알 수 있듯, id는 유일한 특성을 나타내야 할 때만 쓴다. 따라서main_title이란 이름으로 하나는 class, 다른 하나는 id로 선언해주고 동시에 사용해주면 id로 만든 스타일이 우선적으로 적용되는 것을 확인할 수 있다.

---

지금까지 선택자와 속성, 그리고 자유자재로 이용하는데 중요한 class와 id라는 것을 배웠다. 이것들을 이용해서 글자색과 밑줄을 조정하는 것까지 성공했다. 이제는 전반적인 위치를 수정하는 것이 남았다. 글들도 정렬을 해주고 내용마다 네모로 구획을 나눠서 이쁘게 배치를 해주어야한다. 다음 글에서 이와 관련된 것들을 알아보자

 

*생활코딩 학습일기 카테고리의 글들은 모두 2021년, 제 이전 블로그에서 작성한 글입니다.

*정확한 정보를 전달하기 위해서 일부 내용은 수정하였습니다.