1. 글자 강조
글자 강조 코드를 배우기 전에, 다음과 같이 문단제목과 문단내용을 구성해봅시다.
<body>
<h1> 어딘가 이상한 노래가사 </h1>
<p> 사과는 길어, 길으면 기차, 기차는 빨라, 빨르면 비행기 </p>
</body>
글자를 진하게 강조하는 코드
HTML에서 문자를 진하게, 일명 볼드체라고도 불리는 강조 코드는 다음과 같이 두 개가 있습니다.
A. <strong>... </strong>
B. <b> ... </b>
두 코드의 차이를 비교하기 위해 문단 내용 중 사과와 비행기를 다음과 같이 강조해봅시다.
<body>
<h1> 어딘가 이상한 노래가사 </h1>
<p> <strong>사과 </strong>는 길어, 길으면 기차, 기차는 빨라, 빨르면 <b>비행기</b> </p>
</body>
기울임 꼴 , Italic체 만들기
HTML에서 글자를 강조하기위해서 문자를 기울이는 꼴로 변경하는 것이 가능합니다.
코드는 다음과 같이 두 코드가 있습니다.
A. <em> ... </em>
B. <i> ... <i>
두 기울임 꼴 코드의 차이를 알아보기위해서 다음과 같이 사과와 비행기에 따로 적용해보겠습니다.
<body>
<h1> 어딘가 이상한 노래가사 </h1>
<p> <em>사과 </em>는 길어, 길으면 기차, 기차는 빨라, 빨르면 <i>비행기</i> </p>
</body>
* CSS; font- style: italic
이탤릭체의 변경은 CSS의 폰트 스타일로도 변경이 가능합니다. 추후 CSS 포스팅에서 다루겠습니다.
2. 밑줄, 취소선, 그리고 노랑마크
다음의 강조 코드는 각각 밑줄, 취소선 그리고 노랑색 마크를 나타내는 코드입니다.
A. 밑줄 코드, <u> ... </u>
B. 취소선 코드, <s> ... </s>
C. 노랑색 마크 강조, <mark> ... </mark>
예시 문단에 각각 다음과 같이 적용하여 보겠습니다.
<body>
<h1> <u>어딘가 이상한 노래가사</u> </h1>
<p> <s>사과는 길어</s>, 길으면 기차, 기차는 빨라, 빨르면 <mark>비행기</mark> </p>
</body>
3. 글씨 크기와 문단 배열
HTML에서는 글자 크기를 디폴트 값으로 변경해주는 코드가 두 가지 있습니다. big은 크게, small은 작게 글씨 크기를 변경해줍니다.
A. <small> ... </small>
B. <big> ... </big>
C. <center> ... </center>
center 코드는 글자의 배열을 중앙에 위치하도록 합니다.
다음과 같이 예시 문단에 적용하여 알아봅시다.
<body>
<h1> <small>어딘가</small> 이상한 <big>노래가사<big> </h1>
<p> <center>사과는 길어, 길으면 기차, 기차는 빨라, 빨르면 비행기</center> </p>
</body>
* CSS에서 쓰일 서식 관련 코드
글씨 폰트와 문단 배열 그리고 글자 크기를 변경하는데 유용한 코드는 CSS에서 배울 수 있습니다. HTML에서도 물론 몇 가지 적용 방법이 있겠지만, CSS에서 주로 서식 스타일을 지정함으로써, 추가적인 코드 적용 없이 변경된 글씨체, 배열을 유지한체 글을 작성할 수 있습니다. 관련 내용은 추후 CSS 포스팅에서 자세히 다루겠습니다.
'COMPUTER SCIENCE > A piece of INFO.' 카테고리의 다른 글
| CSS RGB _ 색의 표현 (0) | 2021.06.17 |
|---|---|
| 전자회로 정보_ 트랜지스터와 논리게이트 (0) | 2021.06.04 |
| 문단 구성에 유용한 HTML 코드 정리 2 (0) | 2021.05.28 |
| 컴퓨터 메모리 장치 개요 (0) | 2021.05.25 |
| HTML 항목 구성과 항목에 설명넣기 (0) | 2021.05.20 |
