[CSS] 자주 사용되는 스타일 시트 속성 정리

웹기술이 발전하면서 동적이고 화려한 웹페이지가 등장하게 되었습니다. 특히 웹기술 중에서 CSS는 자바스크립트와 더불어 웹페이지의 각종 동적인 속성을 지정할 수 있는 간단한 스크립트입니다. 초보자도 쉽게 배울 수 있을 정도로 단순한 문법을 가지고 있습니다. 이 글에서는 CSS에서 자주 사용되는 속성에 대하여 알아보도록 하겠습니다.

텍스트 색상을 설정하는 color

텍스트 색상을 설정하는 color 속성은 CSS에서 매우 중요합니다. 왜냐하면 홈페이지를 디자인할 때 가장 많이 사용되는 속성이기 때문입니다. 특히 링크 색상을 설정할 때 이 속성이 사용됩니다. 사용 방법은 다음과 같습니다.

color: {색상}

아래의 예제는 링크를 제외한 body 내부에 있는 모든 텍스트의 색상을 눈에 편한 검은색으로 바꾸어줍니다. 홈페이지를 만들 때에는 기본 텍스트 색상을 지정하게 되는데, 이때 아래와 같은 방법을 사용하면 됩니다.

body { color: #555555; }

기본 텍스트 색상으로 순수 검정색인 #000000을 사용하지 않고, 연한 검은색인 #555555을 사용하는 이유는 방문자의 편의성을 위함입니다. 텍스트가 순수 검은색일 때보다는 연한 검은색일 때 방문자가 글씨를 읽을 때 눈이 덜 피로합니다. 필자는 홈페이지의 기본 텍스트 색상으로 연한 검은색(#555555)을 추천합니다.

color 속성은 링크 텍스트의 색상을 지정할 때에도 사용됩니다. 위와 같은 방법으로 텍스트 기본 색상을 설정했더라도 링크 텍스트의 색상은 바뀌지 않습니다. 링크 텍스트의 색상을 변경하기 위해서는 아래와 같은 방법을 사용해야 합니다.

a { color: #961f1f; }
a:hover { color: #7e4ee9; }

위의 예제는 링크 텍스트의 색상을 빨간색으로 변경하고 마우스 커서 아래에 있는 링크 텍스트의 색상은 보라색으로 변경합니다. 위와 같이 선택자를 a로 하는 경우에는 페이지 내의 모든 링크에 해당 속성이 적용됩니다. 만약 특정한 위치에 있는 링크의 속성만 변경하고 싶다면 여러 개의 태그 및 선택자를 이용하면 됩니다. CSS의 선택자를 이용하는 방법은 다음 글을 참고하시기 바랍니다. → 2017/08/18 [CSS] 기본 선택자 정리 (CSS Selector) by Walter Erzsamatory

color 속성 값으로는 Hex 코드 뿐만 아니라 RGB 코드를 입력할 수도 있습니다. RGB 코드는 rgb(100,100,100)과 같은 방법으로 입력할 수 있습니다. 또한 웹브라우저에 이미 지정되어 있는 색상 이름을 사용할 수도 있습니다. 아쿠아색(aqua), 진회색(darkgrey), 진한 파랑색(darkblue), 멋있는 파랑색(royalblue), 연초록색(lightgreen) 등의 색상을 입력할 수 있습니다.

텍스트의 두께를 설정하는 font-weight

글을 쓰다보면 강조하고 싶은 문구나 문장이 있을 것입니다. 이때 해당 문구 및 문장을 굵게 표시하면 효과적으로 강조할 수 있습니다. CSS에서는 텍스트의 두께를 설정할 때 font-weight 속성을 이용합니다. 이 속성의 값으로는 100 ~ 900 사이의 숫자 또는 lighter, normal, bold, bolder 중 하나가 올 수 있습니다. lighter는 100, normal은 400, bold는 700, bolder는 900과 같습니다.

아래 예제는 HTML DOM 객체에 텍스트 굵기 속성을 지정하는 CSS 스크립트입니다. 아래와 같이 특정한 DOM을 지정할 수도 있고, 위에서와 같이 body와 같은 일반 태그에 포함된 모든 텍스트에 굵기 속성을 지정할 수도 있습니다.

/* 굵게 (700) */
.bold { font-weight: bold; }
 
/* 기본 (400) */
.normal { font-weight: normal; }
 
/* 가장 굵게 (900) */
.bolder { font-weight: bolder; }

위 예제는 아래와 같은 방법으로 HTML에 적용할 수 있습니다. CSS 기본 선택자 정리 글에서 자세하게 설명했던 것과 같이 선택자 .는 class를 의미하고, #은 id를 의미합니다. 위 예제에서는 모두 . 선택자를 사용하였으므로 모두 클래스로 정의되었음을 나타냅니다.

<body>
    <span class="bold">굵게 표시되는 텍스트입니다.</span>
    <div class="normal">
        기본 굵기로 표시되는 텍스트입니다.<br />
        <span class="bolder">가장 굵게 표시되는 텍스트입니다.</span>
    </div>
</body>

그런데 텍스트를 굵게 만드는 HTML 태그 <strong>이 존재하기 때문에 실제로 font-weight 속성은 기본적으로 많이 사용되지는 않습니다. font-weight 속성이 가장 많이 사용되는 곳은 :hover 선택자가 사용되는 영역입니다. 사용자가 마우스 커서를 어떤 텍스트에 올려놓았을 경우 해당 텍스트를 굵게 표시하려고 할 때 font-weight 속성과 :hover 선택자를 함께 이용하면 됩니다.

또한 홈페이지의 전체적인 레이아웃을 구성할 때에도 font-weight 속성은 많이 사용됩니다.

텍스트의 꾸밈을 설정하는 text-decoration

무엇인가를 강조하고자 할 때 텍스트를 굵게 표시하는 것보다 더 좋은 방법은 밑줄을 표시하는 것입니다. 모니터에 따라 굵은 텍스트와 일반 텍스트의 구별이 어려울 수도 있기 때문에 반드시 강조해야 하는 텍스트에는 밑줄을 긋는 것이 좋습니다. CSS에서 텍스트에 밑줄을 그을 때 사용되는 속성은 text-decoration입니다. 또한 text-decoration 속성은 기본으로 생성된 밑줄을 삭제하는 데에도 유용하게 사용됩니다.

아래 예제는 링크 텍스트의 밑줄을 삭제하는 CSS입니다. 기본적으로 링크에는 밑줄이 추가되어 있을 때에는 text-decoration 속성을 이용하여 링크의 밑줄을 삭제할 수 있습니다.

a {
  color: #961f1f;
  text-decoration: none;
}

밑줄은 텍스트를 강조하는 역할을 하기 때문에 모든 링크에 밑줄이 있는 경우에는 방문자의 눈에 피로감을 쌓이게 할 수 있습니다. 특히 요즘과 같이 홈페이지에 링크가 많은 경우에는 더더욱 그렇습니다. 따라서 홈페이지 레이아웃을 개발할 때에는 위와 같은 CSS를 먼저 만들어주는 것이 관례가 되었습니다. 다만, 링크 텍스트는 다른 일반 텍스트와 구별을 해야 하므로 color 속성을 사용하여 눈에 잘 띄는 색상을 지정하는 것이 좋습니다.

링크 텍스트에 마우스 커서를 올리는 경우에만 밑줄을 표시되게 하는 것이 가장 좋은 방법입니다. 이렇게 하는 경우에는 링크에 마우스 커서가 올라가 있다는 사실을 것을 방문자에게 효과적으로 전달할 수 있습니다. 아래 예제가 마우스 커서가 올라갔을 때에만 링크 텍스트에 밑줄을 생기게 하는 CSS 스크립트입니다.

a {
  color: #961f1f;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

마우스 커서를 올려놓았을 때 링크 텍스트 색상까지 바꾸고 싶다면 color 속성을 추가하면 됩니다. 자바스크립트와 같이 CSS에서 속성을 입력할 때에는 반드시 중괄호와 세미콜론을 사용해야 하는데, 세미콜론이 한 줄의 끝을 의미하기 때문에 세미콜론만 잘 사용하면 한 줄에 여러 개의 속성을 입력하는 것도 가능합니다.

텍스트의 기울임을 설정하는 font-style

일반적으로 무엇인가를 강조할 때에는 텍스트를 굵게 하거나 텍스트에 밑줄을 그리면 되기 때문에 텍스트 기울임꼴은 잘 사용되지 않습니다. 하지만 이 글은 CSS의 기본 속성들을 알아보는 글이고, 어쩌다 기울임을 사용해야 하는 경우가 발생할 수도 있으니 간단하게나마 설명하도록 하겠습니다.

텍스트의 기울임을 설정하는 CSS 속성은 font-style입니다. font-style 속성은 두 개의 기울임 스타일을 지원합니다. font-style의 값으로는 italic과 oblique라는 두 개의 옵션을 입력할 수 있습니다. italic과 oblique는 거의 동일한 결과물을 출력하지만, italic은 필기체와 비슷한 느낌으로 텍스트가 변형됩니다. oblique는 폰트의 느낌을 그대로 유지하면서 텍스트만 기울여집니다. 그러나 두 개의 옵션이 대부분의 폰트에서 동일한 결과물을 가져오므로 대부분 italic 옵션을 사용합니다.

아래 예제는 텍스트에 밑줄을 그리는 CSS 스크립트입니다.

.italic { font-style: italic; }

텍스트를 기울이고 싶은 영역에 italic 클래스를 추가하면 자동으로 텍스트가 기울여집니다. 만약 링크 텍스트를 기울이고 싶다면, 위에서 보았던 a 태그에 font-style 속성을 추가하면 됩니다.

만약 기울여져 있는 텍스트를 원래대로 복구하기 위해서는 font-style: normal 속성을 적용하면 됩니다.

글씨체를 설정하는 font-family

폰트(글씨체)는 블로그에 매우 중요한 스타일입니다. 일반적으로 웹 브라우저에 의하여 폰트가 자동으로 적용되는 경우가 많지만, 홈페이지 또는 블로그의 개성에 따라 특별한 폰트를 적용해야 하는 경우도 있습니다. 이때에는 CSS의 font-family 속성을 이용하여 홈페이지 또는 블로그의 전체 폰트 또는 특정 영역의 폰트를 지정할 수 있습니다.

font-family 속성을 이용할 때 주의해야 하는 점은 띄어쓰기가 있는 폰트명을 입력할 때에는 큰 따옴표를 사용해야 한다는 점입니다. 예를 들어, 나눔고딕의 영문 이름인 Nanum Gothic을 입력하려고 한다면 큰 따옴표를 추가하여 “Nanum Gothic”이라고 입력해야 합니다.

아래 예제는 페이지 전체 영역의 폰트를 나눔고딕으로 변경하는 CSS 스크립트입니다.

body { font-family: "Nanum Gothic"; }

font-family 속성을 사용하여 폰트를 설정할 때에는 보통 여러 개의 폰트명을 입력합니다. 왜냐하면 모든 컴퓨터에 지정된 폰트가 설치되어 있다고 장담할 수 없기 때문입니다. 가장 앞에 입력된 폰트가 가장 먼저 적용되고, 이 폰트가 설치되어 있지 않은 경우에는 그 다음에 입력된 폰트가 적용됩니다. 즉, 앞에 입력된 폰트가 우선적으로 적용됩니다.

텍스트 및 블록 외부의 선을 설정하는 border

CSS의 border 속성은 텍스트 및 블록의 외부에 선을 그릴 때 사용됩니다. 사실 CSS border는 통합된 속성이고, 이 속성은 여러 개의 속성으로 나누어질 수 있는데, CSS border의 대표적인 내부 속성은 다음과 같습니다.

border-top, border-right, border-bottom, border-left
border-width
border-style
border-color

위 속성에서 border-top, border-right 등을 제외한 속성은 모두 border에 포함되어 있습니다. border-top, border-right 등은 지정된 위치에만 선을 만들어주는 속성입니다. 위치가 지정되어 있지 않은 border는 상하좌우 모든 부분에 선을 만들어줍니다.

border, border-top, border-right 등의 속성에 입력되는 값은 다음과 같이 구성되어야 합니다.

border: {font-width} {font-style} {font-color}

모든 값은 띄어쓰기로 구분되어야 하며, 선의 굵기를 지정하는 border-width의 값은 픽셀(px)로 입력되는 것이 일반적이지만, 상대적인 단위인 em을 사용하는 것도 가능합니다.

선 스타일은 매우 다양하게 지정할 수 있습니다. 한글이나 워드가 부럽지 않을 정도로 다양한 스타일을 지원합니다. border-style 속성에 입력할 수 있는 값으로는 다음의 것들이 있습니다.

solid: 일반적인 선
dashed: 일반적인 점선
dotted: dashed 스타일보다 좁은 점선
double: 두 줄로 구성된 선, 3px 이상의 굵기부터 표현됨
groove: 그림자가 적용된 선 (움푹 파인 그림자)
inset: 안쪽으로 들어간 느낌의 그림자가 적용된 선
outset: 바깥으로 나온 느낌의 그림자가 적용된 선
ridge: 튀어나온 느낌의 선, 2px 이상의 굵기부터 표현됨

가장 많이 사용되는 스타일은 solid와 dashed입니다. 하지만 최근에는 선을 사용하지 않고 배경색으로만 영역을 구분하는 레이아웃도 많이 등장하고 있습니다. 이와 같은 레이아웃이 생겨나는 이유는 윈도8부터 적용된 메트로 UI의 영향 때문입니다.

아래 예제는 각종 영역에 다양한 스타일의 선을 그리는 CSS 스크립트입니다.

.comment {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f6f6f6;
    color: #666;
    font-size: 12px;
}
  
.comment.red {
    border-color: #eed3d7;
    color: #b94a48;
    background-color: #f2dede;
 
#footnote {
    border-top: 3px solid #ccc;
    padding-top: 10px;
    margin-top: 20px;
    font-size: 11px;
    color: #aaa;

방향성을 가지고 있는 CSS의 모든 속성에서는 네 방향의 수치를 따로 입력할 수 있습니다. 예를 들어, border-style 속성의 경우에는 다음과 같은 방법으로 값을 입력할 수 있습니다.

border-style: {상} {우} {하} {좌}

수치를 하나만 입력하는 경우에는 상하좌우에 모두 동일한 값이 적용되지만 위와 같이 분리하는 경우에는 원하는 위치에 원하는 스타일을 따로따로 지정할 수 있습니다. 이 방법은 border-width, border-color 속성에도 동일하게 적용됩니다.

border 속성은 블록 태그인 div, p 등 뿐만 아니라 인라인 태그인 a, span 등에도 적용할 수 있습니다. 아래 예제는 링크에 마우스 커서를 올려놓았을 때 링크 텍스트 하단에 점선이 생기게 해주는 CSS 스크립트입니다.

a {
    color: #b94a48;
    text-decoration: none;
}
a:hover {
    border-bottom: 1px dashed #b94a48;
}

border 속성은 레이아웃을 만들 때 뿐만 아니라 블로그 스킨을 수정할 때에도 많이 사용되는 속성이므로 꼭 기억해두시기 바랍니다.

블록 내부와 외부의 여백을 설정하는 padding, margin

border 속성과 함께 자주 사용되는 속성으로는 padding과 margin이 있습니다. 이 속성은 상하좌우의 개별 속성으로 분리될 수 있다는 점에서 border와 비슷합니다.

padding은 내부에 여백을 만드는 속성이고, margin은 외부에 여백을 만드는 속성입니다. 이 둘의 속성은 border 속성을 함께 사용할 때 쉽게 구분할 수 있습니다. padding 속성을 이용하면 border 속성으로 만들어진 선으로부터 내부에 있는 텍스트를 분리할 수 있고, margin 속성을 사용하면 선 외부에 있는 텍스트로부터 멀리 떨어지게 할 수 있습니다.

아래의 예제는 border 속성이 적용된 블록에 padding과 margin 속성을 추가한 CSS 스크립트입니다.

.container {
    width: 500px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
}

위 예제에서 중요하게 생각해보아야 하는 것은 블록의 전체 넓이입니다. 위의 예제에서는 블록의 넓이로 500px을 지정하였으나, 실제의 넓이는 520px이 됩니다. 그 이유는 padding 속성으로 인하여 의도치 않게 추가된 내부 넓이가 width 속성에는 반영되지 않았기 때문입니다. width 속성이 padding 속성의 넓이까지 포함하는 것을 원한다면, 해당 블록에 box-sizing: border-box 속성을 추가하면 됩니다. 이 속성은 CSS3에서 새롭게 추가되었습니다.

HTML 요소의 배경 스타일을 설정하는 background

블록이나 텍스트의 배경을 지정할 때에는 background 속성이 이용됩니다. 일반적으로는 특정한 색상을 배경 스타일로 지정하는 경우가 많지만, 특수한 경우에는 이미지를 배경으로 설정해야 하는 경우도 있습니다. 이때에도 역시 background 속성이 이용됩니다. CSS는 background는 여러 개의 속성이 하나로 통합된 속성으로서, 이 속성의 대표적인 내부 속성은 다음과 같습니다.

background-color: 배경색 지정
background-image: 배경 이미지 지정
background-position-x: 배경 이미지의 가로 위치 지정 (백분율, px 단위 사용)
background-position-y: 배경 이미지의 세로 위치 지정 (백분율, px 단위 사용)
background-repeat-x: 배경 이미지의 가로 반복 여부 지정
background-repeat-y: 배경 이미지의 세로 반복 여부 지정

놀랍지 않습니까? background에는 위의 속성들이 모두 포함되어 있습니다. background 속성의 값은 다음과 같이 구성됩니다.

background: {background-color} {background-image} {background-repeat} {background-position}

배경 색과 이미지 URL이 함께 입력된 경우에는 배경 이미지가 존재하지 않을 때 배경 색이 나타납니다. 각각의 속성은 개별적으로도 입력할 수 있습니다. 아래의 예제는 슬라이드 배경 이미지가 적용된 블록의 부분을 보여줍니다.

.slide-box-01 {
    background: url(./image/background-01.jpg) no-repeat 50% 50%
}
  
.slide-box-02 {
    background-image: url(./image/background-02.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;

background 속성은 다양한 속성을 한꺼번에 적용시킬 수 있지만, 적용된 옵션을 한 눈에 볼 수 있도록 하려면 개별적으로 속성을 지정하는 것이 좋습니다. 위 예제에서 background 속성이 개별적으로 지정된 예입니다.

마무리

지금까지 멋있는 홈페이지 또는 블로그를 만들기 위하여 꼭 알고 있어야 하는 CSS 속성에 대하여 알아보았습니다. 이 글에서 소개한 속성만 잘 활용하더라도 홈페이지 레이아웃을 만들거나 블로그 스킨을 수정하는 데에는 큰 무리가 없을 것입니다. 특히 border와 padding, margin 속성은 반드시 숙지하고 있어야 합니다.

이 글에서 설명한 것 말고도 CSS 속성은 매우 많습니다. 많이 사용되는 속성에 대해서는 추후에 다른 글에서 설명하도록 하겠습니다.