body { color: #555555; }기본 텍스트 색상으로 순수 검정색인 #000000을 사용하지 않고, 연한 검은색인 #555555을 사용하는 이유는 방문자의 편의성을 위함이다. 텍스트가 순수 검은색일 때보다는 연한 검은색일 때 방문자가 글씨를 읽을 때 눈이 덜 피로하여 사용자에게 편의성을 제공한다.
a { color: #961f1f; }
a:hover { color: #7e4ee9; }
위의 예제는 링크 텍스트의 색상을 빨간색으로 변경하고 마우스 커서 아래에 있는 링크 텍스트의 색상은 보라색으로 변경하는 경우. 위와 같이 선택자를 a로 하는 경우에는 페이지 내의 모든 링크에 해당 속성이 적용된다. 만약 특정한 위치에 있는 링크의 속성만 변경하고 싶다면 여러 개의 태그 및 선택자를 이용.
/* 굵게 (700) */
.bold { font-weight: bold; }
/* 기본 (400) */
.normal { font-weight: normal; }
/* 가장 굵게 (900) */
.bolder { font-weight: bolder; }
그런데 텍스트를 굵게 만드는 HTML 태그 <#strong>이 존재하기 때문에 실제로 font-weight 속성은 기본적으로 많이 사용되지는 않는다. font-weight 속성이 가장 많이 사용되는 곳은 :hover 선택자가 사용되는 영역. 사용자가 마우스 커서를 어떤 텍스트에 올려놓았을 경우 해당 텍스트를 굵게 표시하려고 할 때 font-weight 속성과 :hover 선택자를 함께 이용하면 된다.
또한 홈페이지의 전체적인 레이아웃을 구성할 때에도 font-weight 속성은 많이 사용된다.
.italic { font-style: italic; }텍스트에 밑줄을 그리는 CSS 스크립트,텍스트를 기울이고 싶은 영역에 italic 클래스를 추가하면 자동으로 텍스트가 기울여진다. 만약 링크 텍스트를 기울이고 싶다면, 위에서 보았던 a 태그에 font-style 속성을 추가하면 된다.
만약 기울여져 있는 텍스트를 원래대로 복구하기 위해서는 font-style: normal 속성을 적용하면 된다.
body { font-family: "Nanum Gothic"; }font-family 속성을 사용하여 폰트를 설정할 때에는 보통 여러 개의 폰트명을 입력한다. 왜냐하면 모든 컴퓨터에 지정된 폰트가 설치되어 있다고 장담할 수 없기 때문인데,가장 앞에 입력된 폰트가 가장 먼저 적용되고, 이 폰트가 설치되어 있지 않은 경우에는 그 다음에 입력된 폰트가 적용된다. 즉, 앞에 입력된 폰트가 우선적으로 적용된다.
-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: {font-width} {font-style} {font-color}모든 값은 띄어쓰기로 구분되어야 하며, 선의 굵기를 지정하는 border-width의 값은 픽셀(px)로 입력되는 것이 일반적이지만, 상대적인 단위인 em을 사용하는 것도 가능하다.
solid: 일반적인 선
dashed: 일반적인 점선
dotted: dashed 스타일보다 좁은 점선
double: 두 줄로 구성된 선, 3px 이상의 굵기부터 표현됨
groove: 그림자가 적용된 선 (움푹 파인 그림자)
inset: 안쪽으로 들어간 느낌의 그림자가 적용된 선
outset: 바깥으로 나온 느낌의 그림자가 적용된 선
ridge: 튀어나온 느낌의 선, 2px 이상의 굵기부터 표현됨
가장 많이 사용되는 스타일은 solid와 dashed. 하지만 최근에는 선을 사용하지 않고 배경색으로만 영역을 구분하는 레이아웃도 많이 등장하고 있다. 이와 같은 레이아웃이 생겨나는 이유는 윈도우8부터 적용된 메트로 UI의 영향 때문이다.
방향성을 가지고 있는 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 속성은 레이아웃을 만들 때 뿐만 아니라 블로그 스킨을 수정할 때에도 많이 사용되는 속성이다.
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-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%;
}border와 padding, margin 속성은 반드시 반드시! 숙지!
