Font Family, Font Size, Font Weight
만일 아래아한글, Microsoft Word와 같은 워드프로세서를 사용했다면 글씨체를 수정한 적이 있을 것이다. 이것을 폰트를 수정한다고 하는데 영어로 typeface, font-family라고 한다. 웹 페이지의 콘텐츠의 글씨체를 바꾸고자 한다면 font-family 속성을 활용해주면 된다.
h1 {
font-family: Garamond;
}웹 페이지에서 typeface를 설정할 때 다음과 같은 사항을 기억하면 좋다.
- 적용하고자 하는 폰트는 사용자의 컴퓨터에 설치되어있어야 한다.
- HTML 요소들의 기본 폰트는 Times New Roman 체이다.
- 웹 페이지를 구현할 때 사용하고자 하는 폰트의 개수는 2~3개 정도로 제한하는 것이 페이지 로딩의 효율성과 디자인적인 면에서 바람직하다.
- 적용하고자 하는 폰트 명에 띄어쓰기가 있다면 “”사이에 넣어주면 된다.
ex) Courier New 폰트를 h2 태그에 적용하고자 할 때
h2 {
font-family: "Courier New";
}글씨체의 크기를 변경하고자 할 때는 font-size 속성을 이용해주면 된다. 단위는 px(pixel) 이다.
h2 {
font-size: 15px;
}Font-Weight 속성은 CSS에서 글씨체의 두께를 결정한다.
h2 {
font-weight: bold;
}Text Align
Align은 나란히 만들다, 일직선으로 하다; 나란하다, (~에 맞춰) ~을 조정하라는 뜻이 있다. 보통은 왼쪽을 기준으로 브라우저서는 텍스트들을 정렬하는 편이다. 이 속성은 부모 HTML 요소를 기준으로 글씨들을 정렬한다. 적용할 수 있는 값으로는 “left”, “center”, “right”가 있다.
h2 {
text-align : center;
}Color
CSS에서 color는 2가지 속성으로 구분하는 것이 중요하다.
- Foreground color
- Background color
Foreground는 HTML 요소가 나타내는 색이다. 예를 들어 h1 태그의 요소의 색이 초록색이라면 h1 태그의 foreground color는 초록색이다. 반대로 background color는 말 그대로 HTML 요소의 배경색을 나타내는 색이다. CSS에서 foreground color의 속성은 color, background color의 속성은 background-color로 표현한다.
h2 {
color: red;
background-color: blue;
}
Opacity
Opacity는 투명도를 의미한다. 값은 0과 1 사이에 있고 1은 100%를 뜻한다.
ex) opacity: 0.5; -> 50%의 투명도
오버레이 효과를 주기 위해 사용된다.
h2 {
color: red;
background-color: blue;
opacity: 0.5;
}
Background Image
CSS를 활용하여 웹 브라우저의 배경을 바꿀 수 있다. CSS의 background-image 속성을 활용하여 배경화면을 이미지로 바꾸는 방법이 있다.
.main-banner {
background-image: url("https://www.example.com/image.jpg");
}