책 씹어먹는 즐거움

Anki의 기본(Basic) 노트는 앞면에 질문이 있고, 뒷면에 답이 있는 간단한 질의/응답 형식이다. 당연히 다음과 같이 질문과 답을 만들어야 한다. 

보면 알겠지만 질의/응답 형식은누구나 쉽게 만들 수 있는 간단한 방식이다. 

그런데 이 질의/응답 형식을 사용하다 보니 몇 가지 문제점을 깨닫게 되었다.

다음은 font에서 세리프(serif) 그룹을 설명한 내용의 일부이다. 

여기에서 몇 개의 질문과 답을 생각해볼 수 있을까? 가능한 만큼 만들어보자.

저 짧은 3개의 문장만으로 8개의 질의/응답 카드가 만들어진다. 저 짧은 3개의 문장을 공부하기 위해서 8가지의 문항을 생각해야 하는 부담과 그 문항을 일일이 작성해야 하는 부담이 발생한다. 물론, 이런 부담은 나중에 조금씩 여러 가지 요령이 생기면서 어느 정도 편해지기는 한다. 그런데 문제는 맥락이다. 

위의 3개의 문장은 하나로 어우러져서 일정한 지식체계를 구축하고 있는데, 질문과 답 형식으로 되어있는 간단한 카드는 그렇게 어우러져서 만들어지는 통합적인 지혜나 지식을 보장해주지 못한다. 그러다 보니 암기를 진행하다 보면 가끔 어떤 문항들은 너무나 생뚱맞게 느껴지기도 하고 맥락 없이 무의미하게 느껴질 때가 있다. 그렇다고 모든 맥락을 보충하기 위해서 카드를 만들다 보면 지나치게 카드가 많아지고 질문도 번잡해지게 된다.

이 때, 사용할 수 있는 방식이 바로 전체 문장을 통으로 암기하는 것이다. 8개의 카드를 볼 필요 없이 전체 문장을 통으로 외우면 지식의 손실도 없고 오히려 축약하여 농축된 지식을 학습할 수 있기 때문이다. 

다시 위의 문장을 살펴보면 전체 문장은 3개의 문장으로 나누어진다. 그러면 다음과 같이 3개의 카드를 만들어 볼 수 있다. 

이런 식의 문제를 전통적으로 “완성형” 문제라고 한다. 즉, 빈 칸을 완성할 수 있는지 물어보는 형태의 질문 형식이다. 원래는 특정 맥락에 들어갈 단어를 맞추는 것을 요구하는 방식이지만 나의 경우는 아예 문장을 외우기 위하여 문장을 빈칸으로 묶어버렸다. 따라서 원하는 사람은 주요한 단어만을 빈칸으로 만드는 완성형 문제를 만들 수 있다. 

주요 단어를 빈칸으로 만드는 방식으로는 수많은 카드를 수월하게 만들 수 있다. 위의 경우에도 더 나열하지는 않았지만 단어의 수만큼 빈칸을 만들어 카드를 만들 수 있을 것이다. 나도 처음에 빈칸을 만들어 카드를 만들 때에는 정말 많은 카드를 만들곤 했다. 위와 같은 3개의 문장이라면 거의 15개 정도의 카드를 만들어서 반복에 반복을 했었다. 하지만 카드가 너무 많아지는 문제가 있고, 문제가 너무 쉬어서 문장을 읽지도 않고 답을 떠올린 후 넘어가는 경우가 많아 학습을 한다기 보다는 순발력 게임을 하는 느낌을 받고 문장 단위로 완성형 카드를 만들게 되었다. 

여튼 문장 단위로 완성형 카드를 만들게 되면 지식은 유기적으로 결합되어 농축되고 카드의 수는 줄일 수 있게 되어 상당히 효율적이 된다. 게다가 머리 아프게 문제를 만들기 위하여 끙끙댈 이유가 없게 된다. 그저 심금을 울리거나 새로운 통찰을 제공하는 글을 만나면 해당 문장을 통으로 Anki에 옮겨 빈칸을 만들고 완성형으로 카드를 만들어 문장을 통째로 외우면 되기 때문이다. 이 완성형 카드 만들기를 깨닫고 카드 만들기가 너무 쉬어지자 개인적인 공부에 효율이 더 붙기 시작했다.

물론, 이 완성형 카드를 이용한 학습에 대해서는 할 말이 많다. 오랜 기간 하다 보니 몇 가지 장단점을 체감할 수 있었고 여러가지 깨닫는 바도 많게 되었지만 조금 다른 주제와 연계되어 있으므로 이에 대해서는 다음에 이야기하도록 하자.

폰트는 흔히 글꼴, 서체 등으로 불리는 것이지만 최근에는 폰트로 쓰는 경우가 많으므로 그냥 폰트라고 지칭한다. 

폰트는 그 종류가 수백 가지가 넘지만 그 일반적인 특성에 따라서 몇 가지 그룹으로 나뉘는데 이 그룹들을 generic family(일반 그룹)라고 한다. 보통 세리프(serif), 산세리프(sans-serif), 모노스페이스(monospace), 흘림체(cursive), 판타지(fantasy)가 자주 제시되는 generic family들이다.

세리프(serif)는 원래 ‘가는 장식 선’을 지칭하는 말이다. 이것이 폰트로 오면서 문자 끝부분에 장식용 가시와 고리 모양이 있는 폰트를 통칭하는 용어로 사용된 것이다. 세리프(serif) 폰트는 고상하고 고전적인 느낌을 주기에 적합하다.

한국에서는 세리프(serif)를 ‘명조’ 계열이라고 부른다.

다음의 폰트들이 세리프(serif)다.

산세리프(sans-serif)는 serif(장식)이 없다는 의미이며 획의 시작부터 끝까지 굵기가 변하지 않는 글꼴이므로 매우 깔끔한 느낌을 주고 가독성을 좋게 하기 위하여 주로 사용된다. 

한국에서는 산세리프(sans-serif)를 ‘고딕’ 계열이라고 부른다. 

이 폰트는 보통 세리프(serif) 폰트보다 컴퓨터 화면에서 가독성이 좋다. 

다음의 폰트들이 산세리프(sans-serif)다.

모노스페이스(monospace)는 폭이 일정한 폰트들의 그룹이다. 

이는 M과 I가 차지하는 공간의 폭이 똑같다는 것으로 타자기로 타이핑한 것 같이 기계적이고 투박한 느낌을 준다. 

주로 글자를 정확히 구분할 필요가 있는  소프트웨어 코드에서 자주 사용된다. 

다음의 폰트들이 모노스페이스(monospace)다.

흘림체(cursive)는 손으로 쓴 것 같은 폰트들이다. 

판타지(fantasy)는 Last Ninja, Impact 등 눈에 확 띄는 양식의 폰트다.

앞서 폰트로 제시된 Times New Roman, Georgia, Verdana, Arial Black, Trebuchet MS, Arial, Courier New, Monospace, Comic Sans MS, Impact  같은 개별 글꼴을 font family라고 한다. 

이는 해당 폰트의 기본 글자와 그 글자에 굵기(boldness), 너비, 이탤릭 등의 변화를 준 글자들이 하나의 집합체로 묶여 개별 글꼴이 되므로 font family라고 지칭하는 것이다.

※ Tistory 블로그에서 사용 가능한 폰트가 많지 않아서 일부만 제시함

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

Ankilog 파일:   0040 글꼴, 서체, 폰트 개요.apkg

바로 앞의 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 파일 수정

이제 <link /> 요소에 대해서 알았으니 외부의 CSS 파일을 HTML 페이지에 링크하는 External 방식의 CSS 적용을 시도해보도록 하자. 

우선, 우리가 할 일은 HTML 문서를 만들고 해당 문서에 스타일을 적용하기 위한 외부의 CSS 파일을 만드는 것이다. 

우선 사용할 HTML 파일은 앞서 만든 0034_1.html과 거의 유사하지만 <head> 영역에 <style> 요소 대신에 다음과 같은 <link /> 요소를 넣어 0036.html 파일을 만들도록 하자.

0036.css 는 우리가 앞으로 만들 외부 CSS 파일 이름이다. 해당 파일을 만들고 0036.html 파일과 0036.css 파일을 같은 디렉터리에 두면 정상적으로 웹페이지에 스타일이 적용될 것이다. 

물론, <title> 요소를 수정하여 웹페이지 제목도 변경한다.

다음과 같이 0036.html을 작성해보자. 

<head> 영역 내의 <link /> 요소에서 외부 CSS 파일을 링크하고 있지만 아직 해당 CSS 파일이 만들어지지 않았으므로 어떤 CSS 규칙도 HTML에 적용되지 않은 상황이다. 실행 결과는 다음과 같다.

이젠 외부(external) CSS 파일을 만들 차례다. 

메모장이나 텍스트 에디터를 열어 다음과 같이 작성하고 0036.css 파일로 저장해보자(0036.html 파일과 같은 디렉터리에 두어야 한다.).

그리고 다시 0036.html을 새로고침 하거나 재실행해보면 그 결과는 다음과 같다. 

아래와 같이 CSS에서 주석(comment)을 다는 방법은 HTML과 다르다. 

위의 실행 결과에서 보듯이 주석은 웹페이지에 어떤 영향도 미치지 않는다. 그리고 여러 줄에 걸쳐서 주석을 달 수 있다. 

CSS의 border 속성(property)이 경계선을 주는 속성이라면 border-bottom은 밑줄을 주는 속성이다. 속성을 정의하는 방식은 border와 동일하다.

위의 boder-bottom 선언(declaration)으로 1픽셀 두께의 빨간 실선으로 밑줄이 생김

그리고 text-align 속성은 텍스트의 정렬을 설정한다. 속성값을 center로 하면 텍스트가 가운데로 정렬된다.

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

Ankilog 파일:  0036 External 방식의 CSS 적용.apkg

앞에서 Inline 방식과 Internal 방식을 모두 사용해봤다. 마지막으로 External 방식을 사용해보아야 하는데 그 전에 <link /> 요소에 대해서 간단히 알아볼 필요가 있다.

<link /> 요소는 내용(content)이 없는 빈요소(empty element)이고 <head> 영역에 위치한다. CSS 파일 뿐만 아니라 다른 외부 소스(source)들을 HTML 문서에 링크하는 역할을 하기 때문에 <img /> 요소처럼 <link /> 요소도 여러 번 계속 사용할 수 있다. 하지만 주로 CSS 파일을 연결하는데 사용된다.

이번에는 아래와 같이 작성된 CSS 파일에 링크하는 <link />경우에 한정해서 살펴보자.

1. rel 속성(attribute)

rel 속성은 현재 문서와 링크된 자료 사이의 관계(relationship)를 특정하는 속성이다.

rel의 속성값 "stylesheet" 는 <link>된 외부 자료가 HTML 웹페이지에 적용될 스타일 시트(stylesheet)라는 뜻이다.

2. type 속성(attribute)

type 속성은 링크로 연결된 자료의 인터넷 미디어 타입을 특정하는 속성이고 이러한 type에 속성값을 "text/css"로 주면 연결 링크된 외부 자료의 미디어 타입이 외부의 스타일 시트라는 것을 의미한다. 

type 속성은 앞서 공부한 순서가 있는 목록 요소 <ol>의 글머리 기호를 설정하는 type 속성과는 전혀 다르다(0028 HTML 순서가 있는 목록의 글머리 기호 바꾸기 참조 ).

<link /> 요소에 type 속성을 사용할 때는 반드시 href 속성을 설정해 주어야 한다.

3. href 속성(attribute)

href 속성은 링크로 연결할 외부 자료의 위치를 명시하는 속성이다. 속성값은 <img /> 요소의 src 속성과 마찬가지로 절대 경로(URL)와 상대 경로(relative path)이다. 이에 대해서는 0015 URL 간략하게 이해하고 연습하기와 0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성을 참조하기 바란다. 

주의할 점은 <a> 요소에서 href 속성을 사용할 때, 아이디(id) 이동이 가능했는데 <link /> 요소의 href 속성은 그 특성상 아이디(id) 이동이 허용되지 않는다는 점이다.

href의 속성값으로 상대경로(relative path)인 "myStyle.css"가 주어졌으므로 외부(external) CSS 파일은 myStyle.css라는 파일명으로 스타일이 적용될 HTML 웹페이지 파일과 동일한 디렉터리에 있어야 한다.

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

Ankilog 파일:  0035 External CSS 적용을 위한 link 요소.apkg

선택자는 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

CSS를 HTML 문서에 적용하는 방법은 다음의 3가지 방식이다. 

인라인(inline) 방식은 HTML의 style 속성에서 다루었기 때문에 0025 HTML style 속성(attribute) 및 배경색 설정을 참조하자. 

CSS를 HTML 문서에 적용할 때 가장 자주 사용하는 방법은 외부에 CSS 파일을 만들어서 이를 HTML 문서에 링크하는 External 방식이다. 하지만 External 방식은 나중세 살펴보고 이번에는 우리는 주로 보기 쉽고 이해하기 편한 Internal 방식으로 기본적인 CSS 문법을 익혀보자. 

Internal CSS를 사용하는 경우는 하나의 HTML 페이지를 꾸미는 경우다. 이는 하나의 요소만을 대상으로 꾸미는 Inline CSS와 대조된다. 

Internal CSS를 사용하기 위해서는 <head> 섹션에 <style> 요소를 중첩시킨다. 

다음과 같이 0033.html 파일을 만들어 실행해 보자. 

위의 예문은 <style></style> 요소 내에 CSS를 집어넣어 사용하는 Internal CSS 사용방식을 보여준다. 작성한 예문을 실행해보면 다음과 같이 나타난다. 

위에서 작성한 CSS가 어떻게 작성되었는지 기본적인 내용들을 살펴보자.

다음은 <p>요소를 선택하여 배경색(background-color) 속성(property)을 빨간색(red)으로 선언한 규칙이다. 

이 전체를 하나의 규칙(Rule)이라고 부른다. 그리고 규칙(Rule)은 어떤 요소에 어떤 속성을 적용할지 결정한다. 

CSS에서 작성된 규칙이 어떤 HTML의 요소에 적용되는지 나타내는 것을 선택자(selector)라고 한다. 위의 예문에서는 선택자로 <p> 요소를 선택하여 모든 <p> 요소가 해당 규칙의 적용을 받아 서로 다른 2개의 <p> 요소 블록에 동일한 CSS 규칙이 모두 적용되는 것을 확인할 수 있다. 

현재는 <p> 요소를 선택하고 있지만, <body> 요소, <h1> 요소 등 다른 요소를 선택할 수 있고 그 외에도 id 속성, class 속성 등 굉장히 다양한 방식으로 선택이 가능하다(나중에 자세히 살펴보자.). 

중괄호({ })로 감싸져 있는 부분 안에는 속성(property)과 속성값(value)이 위치한다. 속성과 속성값은 콜론(:)으로 연결되어 있고 여러 개의 속성값이 하나의 속성(property)에 적용되는 경우는 다음과 같이 공백으로 속성값을 구분한다. 

속성(property)과 속성값(value)은 합쳐서 하나의 단위를 이루고 이 단위를 선언(declaration)이라고 한다. 

그리고 선언(declaration)은 반드시 세미콜론(;)으로 마무리 한다. 

※ 이어지는 다음 선언이 없는 마지막 선언은 세미콜론(;)을 쓰지 않아도 되지만 그런 습관으로 오류가 발생할 수 있으므로 세미콜론(;)으로 마무리하는 것을 습관으로 하자.

여러 개의 선언(declaration)을 한 줄에 또는 여러 줄에 걸쳐서 한 번에 작성할 수 있다.

하나 또는 여러 개의 선언(declaration)들은 중괄호({ })로 둘러싸이는데 이렇게 중괄호({ })로 묶인 것을 선언(declaration) 블록이라고 한다. 

선택자와 중괄호 사이, 중괄호와 선언(declaration) 사이, 선언과 선언 사이에는 공백을 넣거나 줄을 바꿔 구별하는 것을 권장하는 것 같다. 실제로 공백을 넣지 않아도 작동하는 경우도 있지만 그렇지 않은 경우도 있어서 권장하는 것으로 알고 있다. 

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

Ankilog 파일:   0033 HTML에 CSS 적용하고 기본 문법 알아보기.apkg

HTML과 CSS는 서로 매우 긴밀하게 연계되어 있다. 따라서 HTML에서는 CSS 적용을 염두에 두고 요소(element)와 속성(attribute)을 만들어 두었고 CSS는 HTML의 구조 위에서 디자인을 하도록 설계되어 있어 서로 함께 공부해야만 이해할 수 있는 내용들이 많다. 따라서 앞으로 HTML과 CSS를 함께 다루기 위하여 지금 CSS의 기본 개념과 사용법을 익혀두고자 한다. 

CSS는 Cascading Style Sheets의 약자다. CSS를 이용하여 다양한 기기(device)의 서로 다른 크기의 화면에서 웹페이지의 디자인, 레이아웃(layout) 등  보이는 스타일을 설정할 수 있다.

그렇다면 왜 CSS를 쓰는가? 얼핏 생각하기에는 HTML에서 한꺼번에 처리하면 좋을 것 같은데, 갑자기 이질적인 새로운 형식의 언어를 배워서 웹페이지를 꾸며야 한다니 뭔가 이상하다.

우선, CSS의 등장 배경에 관해서는 다음과 같이 요약할 수 있다. 

HTML은 처음부터 웹페이지의 내용(content)를 구조화하기 위한 언어로 설계되었을 뿐 웹페이지의 디자인을 설정하기 위한 용도로 만들어진 언어가 아니고 그런 의도를 가진 적도 없다. 

당연히 HTML에서 스타일링을 하는 방식의 실험도 있었다. 가령, HTML 3.2에서 <font> 같은 태그가 표준명세에 첨가되었는데, 이런 방식은 거대한 웹 사이트에 속한 수많은 개별 웹페이지의 글꼴(font)과 색깔(color)을 일일이 설정해야 했기 때문에 개발과정은 길어지고 그에 따른 비용은 늘어났으며 해당 작업을 하는 웹 개발자들에겐 지루하고 힘든 악몽같은 경험을 선사하는 최악의 상황이 만들어졌다.

이런 문제들을 해결하기 위해서 W3C에서 CSS를 만들어 HTML 페이지에서 스타일 설정을 대체하도록 했고 덕분에  이제는 하나의 스타일 시트 파일(.css)을 수정하면 전체 웹 사이트의 비주얼을 세련되고 효과적으로 수정할 수 있게 되었다. 

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

Ankilog 파일:  0032 CSS 소개.apkg