K_blueprint
HTML5로 텍스트 꾸미기 본문
오늘은 HTML5에서 텍스트를 꾸밀 수 있는 다양한 방법에 대해 정리해 보겠습니다:-)
[텍스트]
- 텍스트를 꾸미기에 앞서 텍스트의 출력 형태를 제어할 수 있는 여러 가지 명령어가 있다.
- text-indent : <length> | <percentage>; >>> 들여 쓰기
- <length>는 고정된 길이로 들여 쓰기
- <percentage>는 텍스트 블록 전체 폭에 대한 비율로 들여 쓰기
- text-align : left | right | center | justify; >>> 정렬
- justify : 양쪽정렬
- center : 중앙정렬
- left, right : 왼쪽, 오른쪽 정렬
- text-decoration : none | underline | overline | line-through; >>> 텍스트 꾸미기
- underline : 밑줄
- line-through : 중간 줄
위의 텍스트의 출력 형태를 제어하는 명령어들로 예시 코드를 만들어 출력결과가 어떻게 되는지 살펴보자.
(소스코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>텍스트 가지고 놀기</title>
<style>
h3{text-align: right;} /*우측 정렬*/
span{text-decoration: line-through;} /*중간 줄 긋기*/
strong{text-decoration: overline;} /*윗줄*/
.p1{text-indent: 3em; /*3칸 들여쓰기*/
text-align: justify;} /*양쪽 정렬*/
.p2{text-indent: 1em; /*1칸 들여쓰기*/
text-align: center; /**중앙 정렬*/
}
</style>
</head>
<body>
<h3>텍스트를 가지고 놀아봅시다!</h3>
<hr>
<P class="p1">저는 p1클래스의 영향을 받고 있습니다.
도중에 <span>span의 영향을 받으면 이렇게 됩니다.</span>이상입니다.
</P>
<p class="p2">저는 p2의 영향을 받고 있으며 도중에 strong의 영향을 받으면
<strong>이렇게 됩니다.</strong> 이상입니다.
<a href="http://www.naver.com" style="text-decoration: none;">보통 하이퍼링크를 달게 되면
밑줄이 생기게 되지만 텍스트 꾸미기 'none'설정을 통해 없앨 수 있습니다.
</a>
</p>
</body>
</html>
(출력결과)
[폰트]
- '폰트'란 말 그대로 글자체를 말하는데, 이전에 작성했던 게시글에서도 마찬가지로 다양한 방식으로 폰트에 변화를 줄 수 있다.
- CSS3은 'Times New Roman', 'Arial', 'Tohoma', 'Verdana'등과 같은 많은 폰트를 제공한다.
- 폰트는 크게 3가지의 형식이 있는데 이는 실무에서도('특히 웹 유지보수..') 종종 사용되기 때문에 알아두면 좋을 것이라 생각한다.
- 폰트를 나누기에 앞서 'Serif'라는 단어를 알아야 하는데 이는 글자의 '삐침'이라는 뜻이며, 'Sans'는 '없다'라는 뜻이다.
- Serif형 폰트 : 이는 'Serif가 있는 서체'로 글자의 끝에 삐침 선을 가진 폰트이다.
- Sans-Serif형 폰트 : 이는 'Serif'형과 반대로 삐침이 없는 폰트를 말한다.
- Monospace형 : 이는 삐침 여부와 관계없이 모든 글자의 폭이 동일한 폰트를 말한다.
* 폰트 패밀리
- 이러한 폰트를 적용시키기 위해서는 ' font-family '와 같은 명령어를 사용하게 되는데, 사용하고자 하는 폰트가 웹 브라우저에서 지원을 하지 않을 경우를 대비하여 아래와 같이 코드를 작성하여 '나열된 순서대로 폰트가 선택되도록 하는 방법'을 채택하는 경우도 많다.
font-family : Arial, "Times New Roman", Serif:
* 폰트 크기
- 폰트의 크기를 지정하기 위해서는 ' font-size '라는 명령어를 사용하면 되는데 표현법은 3가지 정도가 있고 아래와 같이 사용된다.
/*40픽셀 크기의 폰트로 지정*/
font-size : 40px;
/*중간 크기로 지정(이러한 방식은 브라우저마다 차이가 있을 수 있다.*/
font-size : medium;
/*현재 폰트의 1.6배 크기로 변환*/
font-size : 1.6em;
* 폰트 스타일
- 폰트의 스타일을 지정할 수 있는 ' font-style '이라는 명령어가 있으며 사용 방법은 아래와 같다.
font-style : italic /* 이탈릭 글씨체로 스타일 지정 */
* 폰트 굵기
- 마지막으로 폰트의 굵기를 지정할 수 있는 ' font-weight '라는 명령어가 있고 사용 형태는 아래와 같다.
/*100~900의 범위 내에서 선택가능(여기서는 300으로 지정)*/
font-weight : 300;
/*굵게 지정, 약 700의 크기이다.*/
font-weight : bold;
★ 해당 게시물은 'HTML5 + CSS3 + Javascript 웹 프로그래밍'도서를 참고하여 작성하였습니다. ★
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5로 테두리 꾸미기(1) (4) | 2024.11.22 |
|---|---|
| HTML로 박스 만들기 (2) | 2024.11.20 |
| HTML5로 색 꾸미기 (0) | 2024.11.18 |
| CSS3 규칙과 셀렉터 (0) | 2024.11.15 |
| CSS3으로 웹 페이지 꾸미기 (4) | 2024.11.12 |
