책 씹어먹는 즐거움

바로 앞의 0038 클래스(class) 속성 포스팅에서 클래스(class) 속성에 대해서 알아보았으니 이제 이를 간단하게 사용해보자. 

다음은 같이 전 세계의 주요 여행지들 중에서 가고 싶은 곳을 추려 가나다순으로 나열해 놓은 0039_1.html

실행한 결과는 다음과 같다. 

여행지를 찾기 좋게 가나다순으로 나열해 놓았지만 조금 심심해 보인다. 만일 여행지를 고른다면 각 여행지가 도시인지 아니면 아름다운 자연과 전통적인 문화를 즐길 수 있는 시골인지에 따라 다를 것 같다. 

따라서 일단 도시인 "urban"과 시골인 "rural"로 나누어 나타내고 싶다. 그렇다면 이를 어떻게 HTML 요소에 반영할 수 있을까?

단순히 HTML로만 만든다고 한다면 중첩된 목록(nested list)을 이용하여 전체 여행지들을 도시인 "urban"과 시골인 "rural"로 나누어 다음과 같이 만들어 볼 수 있을 것이다. 0039_2(중첩된목록).html 참조

그런데 이렇게 분류해보니 조금 부족해 보인다. 일단, 가나다순으로 나열하겠다는 원칙이 무너진 것도 그렇고, 시골(rural)인 곳도 3군데 밖에 없어 좋은 분류가 아닌 것 같다. 차라리 원래의 가나다순으로 돌려놓고 각각의 여행지들 별로 특색을 표시해보는 것이 좋을 것 같다. 

바로 이런 경우에 필요한 것이 클래스(class) 속성이다. 전체 여행지들을 urban 클래스(class)와 rural 클래스(class)로 분류하여 다음과 같이 0039_3.html을 만들어 보자. 

아직, CSS를 만들지 않았으므로 바로 다음과 같이 0039.css 파일을 작성하여 0039_3.html 파일과 같은 디렉터리에 저장한다.

CSS는 간단하게 도시(urban)는 파란색 글씨로, 시골(rural)은 녹색 글씨로 스타일을 적용해보았다. 

이제 실행해보면, 경주, 교토, 오사카의 글자색이 녹색(green)으로 바뀐 것을 확인할 수 있다. 

구별해놓고 보니 온통 파란색으로 여행지가 전부 도시(urban) 일색이다. 그렇다면 도시의 종류를 조금 나누어 보자. 도시 중에는 각국의 수도인 서울, 워싱턴 같은 곳들도 있고, 그저 번화한 도시인 곳들도 있다. 이번에는 각국의 수도에 경계선(boder)을 주어 다른 도시와 구별해보도록 하자. 

우선, 각국의 수도인 여행지는 "main" 클래스(class)에 속하도록 다음과 같이 0039_4.html 파일을 작성한다. CSS를 적용할 파일도 변경할 것이므로 <link /> 요소의 href 속성도 "0039_1.css"로 수정한다. 

그리고 다음과 같이 0039_1.css 파일을 작성하여 0039_4.html 파일과 같은 디렉터리에 저장한다. 

실행 결과는 다음과 같다.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0039 클래스(class) 속성 사용해보기.apkg

이제 클래스(class)를 다루어보자. 

1. HTML에서 클래스(class)

클래스(class)는 요소(element)들을 특정 클래스(class)로 묶는 속성(attribute)이다. 

HTML에서 클래스(class) 속성(attribute)은 주로 동일한 클래스에 속한 요소들에게 동일한 스타일을 적용하는 용도로 사용된다. 

HTML 요소(element)에 클래스(class)를 부여하는 형식은 다음과 같다. 

실제 사용례는 다음과 같다.

클래스(class) 속성은 아이디(id) 속성처럼 모든 요소에 부가될 수 있는 전역 속성(global attribute)이므로 <p>와 <li>와 <h2> 요소 등 서로 다른 요소들이 동일한 클래스로 묶일 수 있다. 

그런데 이렇게 요소들을 클래스로 묶다 보면 하나의 요소가 여러 클래스에 속할 때가 있기 마련이다. 그런 경우 해당 요소의 클래스는 여러 개의 클래스명을 속성값으로 갖는다. 이런 경우에는 순서에 상관없이 클래스명을 공백으로 띄어서 구분해주기만 하면 된다. 

2. CSS에서 클래스(class)

CSS에서 클래스(class)에 따라서 요소를 선택하려면 요소와 클래스를 점(.)으로 이어 다음과 같은 형식으로 클래스 선택자를 만들면 된다. 

클래스(class)에 속한 요소 중에서 특정 요소만 선택할 경우에는 요소명.클래스명 형식으로 선택하고, 특정 클래스에 속한 요소들을 모두 선택할 경우에는 앞의 요소명을 생략하여 .클래스명 형식으로 작성하면 된다. 

실제 사용례는 다음과 같다.

클래스(class) 속성(attribute)은 아이디(id) 속성과 마찬가지로 대소문자를 가리므로 선택자를 작성할 때는 대소문자를 정확하게 기입해주어야 한다. 

3. 클래스(class)와 아이디(id)의 차이

아이디(id)와 클래스(class)는 모두 HTML 요소(element)들을 구분하고 분류하여 특정하는 용도로 사용되는 속성들이지만 두 가지 큰 차이점이 있다는 점을 다시 한번 상기하도록 하자. 

첫 번째는 아이디(id)는 요소 1개만 고유하게 특정하지만 클래스(class)는 여러 요소들을 묶는다는 것이다.

두 번째는 요소는 단 한 개의 아이디(id)만 가지지만 여러 개의 클래스(class)를 가질 수 있다는 점이다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0038 클래스(class) 속성.apkg

앞서, 요소 선택자(element selector)를 이용하여 CSS 규칙을 요소에 적용시켜 보았다. 하지만 이러한 요소 선택자는 해당 요소들을 가리지 않고 일괄적으로 모두 선택하는 문제가 있다. 

다음과 같이 0037_1.html 파일을 작성하여 실행해보자.

이것을 실행하면 다음과 같이 나타난다. 

요소 선택자로 <p> 요소를 선택하여 스타일을 적용했기 때문에, 4개의 <p> 요소 모두 동일한 스타일의 적용을 받는다.

하지만 우리는 동일한 요소들에게 각각 서로 다른 스타일을 적용하고 싶다. 어떻게 해야 하나?

이때, 각각의 요소를 고유하게 만들어주는 아이디(id) 속성을 이용하면 된다. 

아이디(id) 속성에 대해서는 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성에서 <a> 요소를 이용하여 특정 아이디(id)를 가진 요소로 이동할 수 있다는 내용으로 다룬바 있다. 

아이디(id) 속성(attribute)은 HTML 요소에 고유한 아이디(id)를 부여하는 속성이다. 따라서 그 속성상 당연히 하나의 웹페이지에서 각각의 아이디(id)는 중복되지 말고 고유해야 한다. 아이디(id)가 하나의 웹페이지에서 중복되면 웹 표준 위반이다. 

이러한 아이디(id) 속성을 이용하여 요소(element)가 고유해지면 CSS는 이 고유한 요소(element)를 선택하여 꾸미거나 필요한 작업을 수행할 수 있게 된다.

CSS에서는 특정 아이디(id)의 요소를 선택하기 위해서는 해쉬(#) 문자를 아이디(id) 속성값 앞에 붙여 해당 아이디(id)를 가진 요소를 선택하는 선택자를 만들 수 있다.

이제 다음과 같이 수정해서 0037_2.html보자. 

처음 작성한 0037.html 파일과 달리 각각의 <p> 블록에 아이디(id) 속성들이 주어졌고, 이러한 아이디(id)를 가진 요소를 선택하기 위하여 CSS에서는 #first, #second, #third, #fourth로 각각의 아이디(id) 속성을 가진 요소들에게 개별적으로 스타일을 적용하고 있다.

실행해보면 다음과 같이 동일했던 <p> 블록들이 각자 서로 다른 <p> 블록들로 나타난다.

아이디(id) 속성은 모든 HTML 요소에 사용할 수 있는 전역속성(global attribute)이다. 아이디(id)의 속성값은 최소 1개의 문자가 있어야 하며 스페이스나 탭 등의 공백(whitespace)은 허용되지 않는다. 이 때, 아이디(id)의 속성값은 대소문자를 가리므로 선택자를 작성할 때 주의해야 한다. 

2019. 1. 2일 아이디(id) 속성값에 대하여 다음과 같은 내용을 추가함. 

HTML 5 이후로 아이디(id) 속성값은 은 상기와 같은 규칙으로 바뀌었다고 W3C 튜토리얼에서 확인했으나 실제 아이디(id)를 숫자로 시작하거나 하이픈, 밑줄, 콜론, 마침표가 아닌 특수 문자를 쓸 경우 아이디(id) 속성이 작동하지 않는 것을 확인하고 아래와 같은 HTML 4.01 기준이 여전히 작동하고 있는 것을 확인함

다음은 아이디(id)의 속성값이 잘못 기입된 사례이다. 

아이디(id)와 비슷한 것으로 클래스(class)가 있다. 아이디(id)는 오직 하나의 고유한(unique) 요소를 식별하기 위하여 부여하는 속성이라면 클래스는 다양한 요소들을 묶어서 특정한 클래스(class)로 만들기 위한 속성이다. 클래스(class)에 대해서는 다음에 알아보도록 하자.

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택.apkg

2019/01/02 1:19 AM 아이디(id) 속성값 작성 규칙 수정 및 Ankilog 파일 수정

선택자는 CSS의 규칙(Rule)에서 어떤 HTML 요소(element)에 규칙을 적용할지 지정하는 역할을 하는 것으로 CSS 뿐만 아니라 jQuery에서도 사용하고 있어 알아두면 매우 유용하다.

선택자는 요소의 이름, 아이디(id), 클래스(class), 속성(attribute) 등 그 외에 수많은 방식으로 HTML 요소(element)를 선택하지만 이번에는 가장 기본적인 요소 선택자(element selector)를 살펴보자. 

요소 선택자(element selector)는 요소의 이름으로 해당 요소를 선택한다. 가령, <p> 요소는 p로 <body> 요소는 body로 <h1> 요소는 h1으로 선택한다. 

규칙의 선택자를 요소로 하면 해당 웹페이지의 모든 요소들은 일괄적으로 CSS 규칙이 적용을 받는다. 동일한 요소에서 스타일을 다르게 하는 방법은 나중에 논하도록 하자. 

우선, 다음과 같이 0034_1.html을 작성해보자. 

<head> 섹션 내의 <style> 요소에는 어떤 CSS 규칙도 없는 상황이다. 실행해보면 다음과 같다.

CSS 규칙이 전혀 없어도 브라우저가 자체적인 기준으로 HTML 문서를 최소한으로 스타일링하고 있다. 즉, 글꼴(font)과 글자 크기 등이 설정되어 있다.

이번에는 요소를 선택하여 CSS 규칙을 적용해보자. 

HTML 문서에서 눈에 보이는 부분을 담당하는 영역인 <body>도 HTML의 요소이므로 이에 적용하는 CSS 규칙을 만들어 볼 수 있을 것이다. 그렇다면 요소 선택자는 body가 될 것이다. <style></style> 사이에 다음과 같이 넣고 이름을 바꿔 0034_2.html로 작성하여 실행해보자. 

위의 구문을 말로 옮기면 이렇다. <body> 요소에 배경색(background-color)은 검게(black), 글자색(color)은 하얗게(white), 글꼴(font-family)은 Arial로 적용한다.

0034_2.html 파일을 실행한 결과를 처음의 0034_1.html과 같이 놓고 비교해보았다.

<body> 요소가 보이는 영역 전체이므로 웹페이지의 모든 배경색이 전부 검게 칠해진다. <h1>, <h2>, <p> 요소 모두 배경색(background-color)이 검게(black) 칠해지고 글자색(color)은 하얗게(white) 글꼴(font-family)은 Arial로 변경되었다. 

이는 <body> 요소에 적용된 규칙이 <body> 요소 내에 중첩(nesting)된 <h1>, <h2>, <p> 요소들에게 상속되기 때문이다. 자세하게 살피면 상속되는 속성이 있고 상속되지 않는 속성이 있지만 일단, 위의 예문에서 <body> 요소에 적용된 규칙은 모두 상속되고 있다.

만일, 상속된 속성을 사용하지 않고 각각의 <h1>, <h2>, <p> 요소들을 <body> 요소와 다르게 스타일링을 하고 싶다면 해당 요소를 선택자로 가진 규칙을 작성하여 상속을 재정의 하면 된다. 

이번에는 <h1>, <h2>, <p> 요소에 CSS 규칙을 작성하여 <style></style> 사이에 다음과 같이 넣고 0034_3.html로 작성하여 실행해보자. 

실행 결과는 다음과 같다. 

<h1>과 <h2> 요소는 배경색(background-color)이 검은색에서 하얀색(white)으로 바뀌었고 글자색(color)은 흰색에서 검은색(black)으로 변했다. 글꼴(font)은 별도로 지정한 바가 없으므로 <body> 요소의 Arial을 그대로 유지하고 있다. 

<p> 요소는 배경색(background-color)이 노랗게(yellow) 바뀌었고 글자색(color)은 파랗게(blue) 변했으며 글꼴(font)은 serif로 변경되었다. 

즉, <body> 요소에 적용된 규칙이 <body> 요소 내부의  <h1>, <h2>, <p>에 적용된 규칙과 같은 속성(property)에서 서로 다른  속성값을 갖는 경우 각각의 요소에 적용된 규칙의 속성이 우선적으로 적용되는데 이것을 이용하여 상속을 재정의 한다.

위에서 <h1>과 <h2> 요소의 CSS 규칙이 동일하다. 이런 경우에는 다음과 같이 요소들끼리 쉼표로 구분하여 규칙을 한꺼번에 작성할 수 있다. 

CSS에서 border 속성(property)은 블록 주위에 경계선을 넣는 속성으로 다음과 같이 쓴다.

작성한 0034_4.html파일을 실행하면 다음과 같다. 

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0034 CSS 요소 선택자(element selector).apkg