책 씹어먹는 즐거움

앞에서, 테두리(border)와 관련하여 테두리 선의 종류(style), 두께(width), 색깔(color)을 제어하는 법을 알아보았다. 테두리 선의 종류(style)는 border-style, 두께(width)는 border-width, 색깔(color)은 border-color 속성(property)으로 각각 설정했다. 그런데 이 모든 속성들은 아래와 같이 테두리의 4방향 별로도 설정이 가능하다.

원래, 이렇게 테두리의 4방향에 따라 각각 속성(property)을 정하는 것이 정석이다. 하지만 그러면 너무 번거로우므로 더 편하게 쓸 수 있도록 축약한 단축 속성(shorthand property)을 만들었는데 그것이 각각 border-style, border-width, border-color 라고 할 수 있다.

이렇게 축약된 단축 속성이 확실히 더 편하다. 

그렇다면 더 편하게 해보자. border-style, border-color, border-width의 속성들을 축약한 단축 속성(shorthand property)은 border 속성(property)이다. 

border의 속성값에는 style, color, width에 해당하는 값들이 오는데 이 중 style을 제외한 color, width 속성값들은 제외해도 된다. color의 경우 해당 요소의 글자색(color)이, width의 경우 medium이 기본값(default)으로 설정되어 있어서 속성값이 주어지지 않으면 이들 기본값(default)이 적용된다. 

다음의 그림을 보자. 

위의 그림에서 ④의 경우처럼 style에 해당하는 속성값 solid가 누락되어 있을 때에는 테두리가 아예 보이지 않는다.

②의 경우처럼 두께(width)에 해당하는 속성값이 누락되어도 여전히 동일하게 medium으로 적용되는 것을 확인할 수 있다. 이는 두께(width)를 별도로 설정하지 않을 경우 기본값(default)이 medium이기 때문이다. 

③에서는 색깔(color)에 해당하는 속성값을 누락시켜 보았다. 글자색과 동일한 파란색으로 테두리의 색깔이 변하는 것을 확인할 수 있다. 이는 색깔(color)을 별도로 설정하지 않을 경우 기본값(default)이 해당 요소의 글자색(color)이기 때문이다. 

예제에 사용된 파일은 0053_border.html 파일을 참조하기 바란다.

border 속성으로 축약할 경우 4개 방향의 테두리를 개별적으로 설정할 수 없다. 만일, 방향별로 테두리를 별도로 설정하고 싶다면 단축 속성인 border를 사용하지 말고 border-top, border-right, border-bottom, border-right로 축약하면 된다. 축약하는 요령은 border와 완전히 동일하다.

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

Ankilog 파일:  0053 테두리 각각의 방향에서 설정하기 및 단축 속성.apkg

수정 2019-02-10 오후 3:38  4방향별 단축속성에 대하여 첨가하고 Ankilog에도 추가함

테두리 두께는 border-width 속성(property)으로 제어하고, border-width 속성(property)의 속성값은 키워드(thin, medium, thick)와 길이(px, em 등)가 온다.

테두리 색깔은 border-color 속성(property)으로 제어하고, border-color 속성(property)의 속성값은 색깔명(red, yellow 등), RGB, RGBA, HEX 코드 등이 온다. 

border-width와 border-color 속성(property)은 1개에서 4개까지의 속성값을 가질 수 있는데 테두리 스타일과 동일한 방식으로 작동한다. 

border-width와 border-color 속성(property)에 4개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top)에서부터 시계방향으로 적용된다. 다음의 사례를 보자.

실행하면 아래와 같이 테두리 위쪽(top)은 6px 두께의 검은 실선, 오른쪽(right)은 4px 두께의 녹색 실선, 아래쪽(bottom)은 2px 두께의 파란 실선, 왼쪽(left)은 1px 두께 빨간 실선이 된다. 

border-width와 border-color 속성(property)에 3개의 속성값이 주어지면 각각의 속성값이 차례대로 위(top), 좌우(left and right), 아래(bottom)로 적용된다.  다음의 사례를 보자.

실행하면 아래와 같이 테두리 위쪽(top)은 6px 두께의 녹색 실선, 좌우(left and right)는 1px 두께의 파란 실선, 아래쪽(bottom)은 3px 두께의 빨간 실선이 된다. 

border-width와 border-color 속성(property)에 2개의 속성값이 주어지면 각각의 속성값이 차례대로 위아래(top and bottom), 좌우(left and right)로 적용된다. 다음의 사례를 보자.

실행하면 아래와 같이 테두리 위아래(top and bottom)는 6px 두께의 파란 실선, 좌우(left and right)는 3px 두께의 빨간 실선이 된다. 

border-width와 border-color 속성(property)에 1개의 속성값만 주어지면 그 1개의 속성값이 전체 테두리에 적용된다. 다음의 사례를 보자.

실행하면 아래와 같이 전체 테두리의 선이 3px 두께의 빨간 실선이 된다. 

예제에 사용된 파일은 0052_두께와색깔.html 파일을 참조하기 바란다.

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

Ankilog 파일:  0052 CSS 테두리 두께와 색 설정하기.apkg

2019-01-28 PM 11:24  Ankilog 파일 오타 수정

CSS에서는 배경색(background color), 경계선(border), 글자색(text color) 등 많은 부분에 색깔이 들어간다. 따라서 이러한 색깔을 나타내는 몇 가지 방식을 살펴볼 필요가 있다.

CSS에서 색깔을 입력하는 방식은 색깔명(color name), RGB, HEX, HSL, RGBA, HSLA의 6가지를 주로 말한다. 이 중에서 HSL과 HSLA를 제외한 나머지 4가지만 알아보자.

색깔명(color name)

CSS에서는 다음과 같이 색깔명(color name)으로 해당 색깔을 불러올 수 있다. 

색깔명(color name)은 대소문자를 구분하지 않는다.

과거에는 CSS에서는 16가지 색깔명(color name)만 허용되었지만 현재는 대략 140개의 색깔명(color name)을 대부분의 브라우저에서 지원하고 있어 그 사용폭이 늘었다. 

RGB

색깔명(color name)은 이름을 아는 색을 사용할 경우 편하지만 1,600만 가지의 색 중 140개 정도의 색만 사용할 수 있다는 한계가 있다. 따라서 미묘한 색감을 표현하고자 하는 사람이라면 보다 나은 방법을 찾고자 할 것이다. 

RGB는 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 세 종류의 색을 말한다. 컴퓨터 모니터, TV 등은 모두 이 RGB를 적당히 섞어서 다른 모든 색을 조합한다. 즉, RGB는 모니터가 색깔을 구현하는 원리인 셈이다.

CSS에서 RGB로 색깔을 구현할 때는 다음의 공식을 이용하여 RGB색을 구현한다. 

red, green, blue는 각각 0~255까지의 수를 가질 수 있는 인자(parameter)로 각각, Red, Green, Blue의 3색이 섞이는 정도를 의미한다. 

red, green, blue의 인자는 0~255까지의 수 대신에 0~100%의 비율로 나타낼 수도 있다. 단, rgb 내에서 숫자와 %를 섞어서 쓰지 않는다. 즉, rgb(100%, 50, 20) 같이 섞어서 쓰지 않는다.

RGB를 사용한 예는 다음과 같다. 

RGBA

RGBA는 RGB에서 투명도를 의미하는 알파(A)를 첨가한 것이다. 

함수는 rgb와 거의 유사한 rgba 이고 투명도를 의미하는 α 인자(parameter)가 첨가된 것이다. 다음과 같은 공식을 사용한다. 

red, green, blue는 rgb에서와 동일하고 α는 0.0~1.0까지의 값을 가진다. 0은 투명, 1은 완전 불투명이다. 

HEX 코드는 항상 #으로 시작한다.

HEX 코드는 6개의 자리로 이루어져있는데 처음 두개(rr)는 빨간색, 다음 두개(gg)는 녹색, 마지막 두개(bb)는 파란색을 나타낸다.  

앞에서 RGB에서 red, green, blue는 각각 0~255까지 총 256개의 수로 표현된다. 256개는 2의 8승으로 8비트에 해당하는 숫자이고 이는 16진수 2자리로 나타낼 수 있다. 즉, 다음과 같다.

실제 전환되는 사례는 다음과 같다. 

HEX 코드를 사용한 예는 다음과 같다. 

파일 용량을 미세하게 줄일 수 있어서 실무에서는 RGB보다 HEX 코드를 더 많이 사용한다고 한다. 

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

Ankilog 파일:    0048 CSS로 색깔 넣기.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

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