책 씹어먹는 즐거움

다음은 CSS의 박스 이론에서 제시된 테두리(Border)이다.

이 테두리(Border)를 어떻게 다루어야 하는지 우선 테두리 스타일(border style)부터 살펴보자.

테두리 스타일(border style)이란 테두리를 이루는 선의 종류를 말한다.

CSS에서 테두리의 설정은 테두리 선의 종류를 먼저 정하고 해당 선에 두께, 색, 방향, 모서리를 설정하는 것이기 때문에 테두리 스타일이 가장 먼저 설정되어야할 기본이다. 테두리 스타일이 설정되어 있지 않으면 다른 두께, 색깔, 모서리 등의 설정 효과가 나타나지 않는다.

테두리의 스타일은 CSS에서 border-style 속성으로 제어한다. 그리고 속성값은 solid, double, dotted, dashed, groove, ridge, inset, outset, none, hidden의 10개가 있다.

1) solid(실선)

테두리를 이루는 선이 실선이다.(그림참조)

2) double(겹선)

테두리를 이루는 선이 두 줄로 된 겹선이다.(그림참조)

3) dotted(점선)

테두리를 이루는 선이 점을 일정한 간격으로 배치한 점선이다.(그림참조)

4) dashed(대쉬선)

테두리를 이루는 선이 긴 점선인 대쉬선이다.(그림참조)

5) groove(홈)

테두리 선이 테두리만 페이지 안으로 파인 것처럼 음영처리된 선

ridge와 반대로 위(top)와 왼쪽(left)은 바깥쪽의 선을, 아래(bottom)와 오른쪽(right)은 안쪽의 선을 진하게 그려 그림자가 진 것으로 보여 요소의 테두리만 안으로 파인 홈처럼 보이게 한다.(그림참조)

6) ridge(액자)

테두리 선이 테두리만 페이지 밖으로 돌출된 것처럼 음영처리된 선

groove와 반대로 위(top)와 왼쪽(left)은 안쪽의 선을, 아래(bottom)와 오른쪽(right)은 바깥쪽의 선을 진하게 그려 그림자가 진 것으로 보여 요소의 테두리만 밖으로 돌출되어 나온 액자처럼 보이게 한다.(그림참조)

7) inset(오목)

테두리 선이 테두리 내부의 HTML 요소가 페이지 안으로 오목하게 들어간 것처럼 음영처리된 선

onset과 반대로 위(top)와 왼쪽(left)의 테두리는 진하게 그려 그림자가 진 것으로 보이고, 아래(bottom)와 오른쪽(right)의 테두리는 연하게 그려 밝게 노출된 것으로 보여 HTML 요소 전체가 페이지 안으로 오목하게 들어간 것처럼 보이게 한다.(그림참조)

8) outset(볼록)

테두리 선이 테두리 내부의 HTML 요소가 페이지 밖으로 볼록하게 튀어나온 것처럼 음영처리된 선

inset과 반대로 위(top)와 왼쪽(left)의 테두리는 연하게 그려 빛에 노출된 것으로 보이고, 아래(bottom)와 오른쪽(right)의 테두리는 진하게 그려 그림자가 진 것으로 보여 HTML 요소 전체가 페이지 밖으로 볼록하게 튀어나온 것처럼 보이게 한다.(그림참조)

9) none, hidden

none은 테두리가 없다는 것이고, hidden은 테두리를 숨긴다는 뜻이다. 두 가지 모두 테두리가 나타나지 않는다. 다음과 같이 선언하면 된다.

10) 테두리별로 스타일 설정하기

지금까지는 테두리 스타일을 한 번에 한 가지 스타일만 설정했다. 하지만 테두리는 상하좌우로 4개가 있고 각각에 서로 다른 종류의 선으로 설정할 수 있다. 그 설정법을 알아보자.

border-style 속성(property)에 4개의 속성값이 주어지면 위(top)에서부터 시계방향으로 적용된다.

아래의 선언으로 테두리 위쪽(top)은 solid(실선), double(겹선), 오른쪽(right)은 아래쪽(bottom)은 dashed(대쉬선), 왼쪽(left)는 dotted(점선)으로 설정된다.

실행 결과는 다음과 같다.

border-style 속성(property)에 3개의 속성값이 주어지면 위(top), 좌우(left and right), 아래(bottom)로 각각 적용된다.

아래의 선언으로 테두리 위쪽(top)은 double(겹선), 오른쪽(right)과 왼쪽(left)은 dashed(대쉬선), 아래쪽(bottom)은 dotted(점선)으로 설정된다.

실행 결과는 다음과 같다.

border-style 속성(property)에 2개의 속성값이 주어지면 위아래(top and bottom), 좌우(left and right)로 각각 적용된다.

아래의 선언으로 테두리 위아래(top and bottom)는 double(겹선), 좌우(left and right)는 dashed(대쉬선)으로 설정된다.

실행 결과는 다음과 같다.

지금까지 제시한 사례는 0051_테두리.html 파일에 정리되어 있으므로 참조하기 바란다.

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

Ankilog 파일:  0051 CSS 테두리 스타일 설정하기.apkg

2019-01-27 AM 12:09 본문 문구 수정 및 Anki 파일 문구 수정(그림 첨가)

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

스타일링이라 함은 폰트, 크기, 테두리, 색깔 등을 이용하여 예쁘게 꾸미는 것을 말하고 HTML 문서를 스타일링 할 때는 CSS(Cascading Style Sheet)라는 별도의 언어체계를 이용한다.

이 때,  HTML의 개별 요소(element) 하나를 CSS를 이용하여 꾸미고 싶을 때에는 style 속성을 사용하면 된다.

HTML의 style 속성은 다음과 같은 구문으로 사용된다. 

위 구문에서 속성은 CSS에서 사용하는 속성(property)이고, 속성값도 CSS에서 사용하고 있는 속성값(value)이다. 즉, style 속성은 개별 요소에 CSS를 적용하기 위한 속성인 것이다. 

따라서 이 style 속성을 다루면서 익히게 될 속성(property)과 속성값(value)은 모두 CSS에서도 그대로 사용할 수 있다.

또, 당연히 style은 모든 요소에 적용할 수 있는 전역 속성(global attribute)이다.

추후에 CSS를 공부하면서 상세하게 다룰 내용이지만 참고적으로 간단히 언급하면 CSS를 적용하는 것은 아래와 같이 세 가지 방법이 있는데 그 중 마지막 방법이 이 style 요소를 사용하는 방법이다.

보통 첫 번째와 두 번째 방법으로 CSS를 사용하지만 이러한 방법은 일괄적으로 HTML 페이지의 스타일을 설정하기 때문에 이에 대한 예외적인 스타일이 적용되어야할 요소(element)들은 개별 요소에 style 속성을 이용하여 CSS를 부여하기도 한다(이는 CSS 상속과 적용 범위의 문제이므로 나중에 다시 보도록 하자.).

앞서 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정에서 <img> 요소의 크기를 style 속성으로 결정하는 예문을 아래와 같이 다루면서 최근 style 속성을 사용하여 이미지의 크기를 결정하는 이유를 CSS 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 피하기 위해서라고 언급한 바 있는데 이것이 바로 위와 같은 이유이다.

위의 예문에서 style 속성으로 CSS 속성인 width와 height를 이용하고 있고 속성값으로 픽셀수(px)를 이용하고 있다. 

배경색(Background Color)

HTML 요소의 배경색을 결정하는 CSS 속성은 background-color 속성이다. 요소의 배경색을 이용하여 앞서 공부한 블록 요소와 인라인 요소의 차이점을 다시 한번 살펴보자.

background-color 속성은 다음과 같이 사용한다.

색상이름은 red, blue, purple, yellow, white, black, powderblue 등 영문의 색상이름이 그대로 적용되고 더 디테일한 색상을 다룰 때에는 색상의 일련번호로 집어넣을 수도 있다.

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

<body> 요소에 중첩된 각각의 요소에 전부 배경색을 다르게 설정해보았다. 그리고 실행해보면 다음과 같이 나타난다. 

블록 요소와 인라인 요소에 따라서 배경색이 다르게 설정되어 있는 것을 알 수 있다. 블록 요소는 해당 행의 가로폭을 전부 차지하는 요소이므로 실제 내용이 얼마 안되더라도 해당 행의 전체에 배경색이 칠해진다. 반면, 인라인 요소는 배경색이 꼭 필요한 부분으로 한정되는 것을 알 수 있다. 

CSS에서 사용하고 있는 다양한 속성과 속성값을 이 자리에서 전부 살펴보는 것은 적합하지 않은 것 같다. 우선 배경색만 살펴보고. 또, 다른 요소들을 다루면서 관련된 스타일 속성은 그때그때 알아보도록 하자.

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

Ankilog 파일:  0025 HTML style 속성(attribute) 및 배경색 설정.apkg

3. 대체할 문구를 설정하는 alt 속성

alt 속성은 이미지를 대체하는 문구(alternate text)를 부여하기 위한 속성이다. 만약, 어떠한 이유로든지 웹페이지에 이미지를 표시되지 않으면 이 문구가 대신 화면에 나타난다.

alt 속성은 다음과 같이 작성한다. (간단한 예제 파일: img요소alt속성test.html)

이미지로 아름답게 꾸민 웹페이지가 항상 예쁘게 보이는 것은 아니다. 특히, 이미지를 사용할 경우 웹페이지의 용량이 커지기 때문에 느린 인터넷 속도, 열악한 디바이스 등으로 인하여 웹페이지를 제대로 볼 수 없을 때가 있다. 특히 시각장애인의 경우 스크린 리더기로 읽어 웹페이지를 보지 않고 듣는데 이미지로 꾸며진 웹사이트는 이러한 스크린 리더기에 장애로 작용한다. 

이러한 문제점 때문에 웹페이지에 이미지가 나타나지 않거나, 혹은 스크린 리더기로 이미지를 읽기 위하여 HTML5부터는 <img /> 요소에 alt 속성을 필수적으로 부여하도록 되었다.

sun.jpg 파일을 불러오지 못할 경우 아래와 같이 alt 속성으로 부여한 대체 문구가 나타나는 것을 볼 수 있다.

4. 이미지 크기 조절

이미지를 웹페이지에 집어넣으려면 이미지 크기를 조절하는 것이 필수적이다. 어떤 사진은 너무 크고 어떤 그림은 너무 작을 수 있기 때문이다. 

일단은 전통적으로 <img /> 요소에 width와 height 속성을 다음과 같이 부여해 크기를 조절해왔다.

이 때 width와 height 속성의 속성값은 항상 픽셀(px)의 수이다.

이미지의 크기를 특정하지 않으면 웹페이지 레이아웃이 제멋대로이고 이미지가 웹페이지에 로딩되면서 웹페이지가 요동치는 현상이 발생하게 되므로 되도록이면 항상 크기를 특정하도록 하자.

뒤에 언급하겠지만 브라우저는 HTML로 작성된 페이지를 먼저 보여주고 이미지는 그 크기에 따른 공간만 남겨놓고 뒤에 따로 이미지를 로딩하여 이미지를 보여주게 된다. 즉, 페이지의 레이아웃을 만들었다가 이미지를 받은 후 이를 다시 조정하는 것이다. 

따라서 크기가 결정된 이미지를 웹페이지에 집어넣으면, 브라우저는 이에 맞추어 페이지 레이아웃을 만들 수 있게 된다. 하지만 HTML에서 이미지 크기가 결정되지 않으면 브라우저는 페이지에서 이미지를 보여주기 전에 임의로 이미지의 크기를 결정하게 되고 실제 이미지가 페이지에 로딩되면서 그 크기의 변화로 웹페이지가 출렁거리게 되는 것이다.

최근에는 CSS 스타일을 적용하는 sytle 속성을 이용하여 다음과 같이 이미지의 크기를 조절할 수 있다.

최근에 <img /> 요소에 style 속성을 이용하여 이미지의 크기를 결정하는 까닭은 각각의 <img /> 요소에 style 속성으로 이미지의 크기를 규정해놓으면 추후에 배울 CSS의 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 받지 않을 수 있기 때문이다.

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

Ankilog 파일:   0017 이미지를 보여주는 img 요소 02.apkg