CSS의 모든 것 4부 - CSS 스타일 속성 개요와 문자, 박스에 스타일 주는법
이때까지는 스타일 속성이 적용될 대상인 선택자(Selector)에 대해 알아보았다면, 지금부터는 다양한 시각적 효과를 주는 스타일 속성에 대해 자세히 알아보겠습니다.
1. CSS 속성 - 개요
CSS에서 선택자를 통해 어떠한 요소에 스타일을 줄지 정했다면, 어떠한 스타일을 할당해야할지 결정해야 합니다. 아래는 어떠한 스타일의 종류들이 있는지 거시적 관점으로 정리해 뒀습니다.
- 스타일속성 분류
- 문자
- 박스(Box) -> 추가된것
- 목록
- 표
- 그림
- 전환/변형/에니메이션 -> 추가된것
- 하이퍼링크
- 입력양식
- 영역분할
스타일 속성을 부여하는 방법은 아래와 같습니다. 우선, selector를 선언한 후, 중괄호인 {}을 적은 후, 그 안에 스타일 속성이름과 속성값을 적어주면 됩니다.
1
2
3
h1 {
color: red;
}
2. CSS속성 - 문자
문자와 관련된 CSS속성으로는 크게 2가지로 “font속성”과 “text속성”이 있습니다.
2-1. Font속성을 활용하는 법
2-1-1. Font 스타일 지정
먼저 font 스타일을 적용하려고 하면, font-family라는 속성이름을 사용합니다. 그 후, 적용하고 싶은 font를 ,로 구분하여 나열합니다. 여기서 font 정보들은 사용자 pc나 서버에 설치되어 있어야 합니다. 아래는 font-family을 사용한 예시 입니다.
1
2
3
p {
font-family: sans-serif, monospace, times;
}
만약, 위와 같이, 여러 font가 있다면, 맨왼쪽에서 부터 적용되고, 만약 해당 폰트가 없다면, 그 다음 폰트가 적용된다. 만약, 개인적으로 따로 저장된 font를 적용시키게 하고 싶다면, 해당 폰트를 서버에 저장하고, 이를 불러오면 됩니다. 아래는 그 예시 입니다.
1
2
3
4
5
6
7
8
@font-face {
font-family: myFont;
src: url(fonts/dxspeed.ttf);
}
p {
/* 글모양 관련 스타일 속성들 */
font-family: myFont, sans-serif, monospace, times;
}
2-1-2. Font size 지정
font size도 지정할 수 있는데, 그 방법에는 상대적인 방법과 절대적인 방법이 있다. 절대적인 방법은 픽셀값을 바로 할당하는 것으로, px단위를 사용하여 값을 할당합니다. 아래는 그 예시 입니다.
1
2
3
p {
font-size: 10px;
}
참고로, 아무것도 할당하지 않는다면, 기본 글자크기인 16px로 설정됩니다. 상대적인 방법은 현재 적용된 font-size에서 몇배로 글자크기를 키울지 정하는 접근법이고, em, %를 이용해서 값을 할당합니다. 아래는 예시 입니다.
1
2
3
4
5
6
p {
font-size: 150%;
}
h1 {
font-size: 2em;
}
2-1-3. Font 스타일과 볼드체
Font에 스타일과 볼드체를 넣어줄 수도 있습니다. Font 스타일에는 normal과 italic 두개가 있고, font-style을 통해 부여할 수 있습니다. font-weight를 통해 볼드체를 적용해 줄 수 있는데, normal과 bold로 선택할 수 있습니다.
1
2
3
4
5
6
p {
font-style: italic;
}
h1 {
font-weight: bold;
}
2-2. Text속성을 활용하는 법
Text속성은 색상, 위치, 줄긋기, 대소문자 변환, 들여쓰기, 그림자부여 등이 있습니다. 색상은 color를 통해 부여하고, text-align을 통해, 텍스트의 위치를 정해줄 수 있습니다. 그 속성값들은 left, center, right, justify가 있습니다. 여기서 justify는 좌우정렬을 시켜줍니다.
text-decoration을 통해, 텍스트에 줄을 그어줄 수 있는데, overline은 텍스트 윗부분에 줄을 그어주게 되고, line-through는 취소줄 처럼 가운데 부분에 줄을 그어줍니다. underline은 아랫부분에 줄을 그어줍니다. none을 부여하면, 아무런 줄을 그어주지 않습니다.
text-transform은 대소문자를 강제로 바꿔주는 방법으로, uppercase를 부여하면, 텍스트를 모두 대문자로 변환하고, lowercase는 텍스 전체를 소문자로 변환해 줍니다. capitalize를 써주면, 첫글자만 대문자로 바꿔줍니다.
text-indent는 픽셀단위로 얼마만큼 들여쓰기를 할지 설정해 줄 수 있습니다. text-shadow는 텍스트에 그림자를 부여해 줄 수 있는데, 어느정도 크기로 그림자를 부여해 줄지 ,없이 가로, 세로, 색상 순서로 정해주면 됩니다. 여기서, 가로, 세로는 픽셀단위로 값을 부여해 줍니다.
아래는 전체적인 예시 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
p {
color: red;
text-align: left;
/* left, center, right, justify (좌우정렬) */
text-decoration: none;
/* none, overline(윗줄), line-through(중간줄), underline */
text-transform: lowercase;
/* uppercase(모두 대문자), lowercase(모두 소문자), capitalize(첫글자만 대문자) */
text-indent: 50px; /* 들여쓰기 몇px 만큼 넣을것인지 설정 */
text-shadow: 2px 1px black; /* 글자에 그림자 속성 부여. 콤마 없이 쭉 작성 */
/* 가로이격 세로이격 색상 */
}
3. CSS속성 - 박스
모든 html element들은 박스안에 담겨져 있는것으로 간주됩니다. 조금더 자세히 언급하자면, 박스에 여러 요소들이 있는데 padding, border, margin등이 있고, html element들의 content가 중앙에 배치됩니다. 아래 그림은 box의 구성요소들을 시각적으로 보여줍니다.
그림1. HTML BOX 모델
아래는 예시로, 자세한 정보들을 주석으로 처리하여 표시하였습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
p{
/************/
background-color: skyblue;
/* 내용의 영역 */
width: 50%; /* px로 표현 가능 */
height: 50%; /* px로 표현 가능 */
/************************************/
/************************************/
/* 아래와 같이 padding만 써서 상하좌우를 모두 표현하는 방법을 shorthand property : 축약 속성 이라 한다. */
padding: 10px 20px 30px 40px; /* top right bottom left 순서로 padding이 적용됨 */
padding: 10px 20px 30px; /* top (right left) bottom 순서로 padding이 적용됨 */
padding: 10px 20px; /* (top bottom) (right left) 순서로 padding이 적용됨 */
padding: 10px; /* (top bottom right left) 순서로 padding이 적용됨 */
padding-top: 10px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
/************************************/
/************************************/
border-width: 10px 30px; /* */
border-style: dotted dashed solid double; /* 테두리선: dotted, dashed, solid, double */
border-color: red blue green;
border-radius: 30px; /* 테두리선의 굵기 */
border: 30px solid red; /* width, style, color 순서로 정보를 주어 하나로 표현도 가능. 그런데 radius는 못씀 */
/************************************/
/************************************/
outline: 10px dotted yellow;
/************************************/
/************************************/
margin: 10px 20px 30px 40px;
margin: auto; /* 항상 중앙 정렬을 해줌 */
}