Appia의 IT세상

[초보HTML배우기 03]HTML - 글자 속성 스타일 적용 본문

Programming/HTML&CSS

[초보HTML배우기 03]HTML - 글자 속성 스타일 적용

Appia 2020. 7. 13. 07:13
반응형

[초보HTML배우기 03]HTML - 글자 속성 스타일 적용 

앞선 포스팅에서는 기본태그(Tag) 구성 원칙 및 각 속성을 입력하는 방법에 대해서 확인해 봤습니다. 이번 포스팅에서는 글자의 스타일을 설정하는 부분에 대해서 알아보고자 합니다. 흔히 글자 스타일 관련해서는 문서 작성을 할 때 많이 사용하는 다음과 같은 속성들을 많이 적용합니다. 

스타일 적용된 텍스트
굵게 굵게 적용한 텍스트
이태릭체 이태릭체를 적용한 텍스트
밑줄 밑줕이 적용된 텍스트
가운데 줄 가운데줄이 적용된 텍스트
윗첨자 위첨자 텍스트
아래첨자 아래첨자 텍스트

흔히 다음과 같은 텍스트에 적용된 스타일이 가장 많이 사용됩니다. 이 부분에 대해서 코드 상으로 이야기 해보겠습니다. 

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    
</head>
 
<body>
 
    <b>굵게 적용한 텍스트</b><br/>
 
    <i>이태릭체를 적용한 텍스트</i><br/>
 
    <u>밑줕이 적용된 텍스트</u><br/>
 
    <strike>가운데줄이 적용된 텍스트</strike><br/>
 
    <sup>위첨자 텍스트</sup><br/>
 
    <sub>아래첨자 텍스트</sub><br/>
 
</body>
 
</html>
 cs

위와 같은 코드를 적용하면 다음과 같은 결과가 나타납니다. 

굵게 적용한 텍스트
이태릭체를 적용한 텍스트
밑줕이 적용된 텍스트
가운데줄이 적용된 텍스트
위첨자 텍스트
아래첨자 텍스트

 

그럼 이번에는 간단히 글자에 마크를 표시하거나, 텍스트에 설명을 첨가하는 방법에 대해서 살펴보고자 합니다. 

 

<글자에 마크 표시>

글자를 강조하거나 표시를 하기 위해서 색깔로 마크를 하는 방법이 있습니다. 이 때  <mark>글자</mark>를 이용합니다. 그럼 예시 코드를 한번 살펴보겠습니다. 

 

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
 
</head>
 
<body>
 
    <b>굵게 적용한 텍스트</b><br/>
    
    <i>이태릭체를 적용한 텍스트</i><br/>
    
    <u>밑줕이 적용된 텍스트</u><br/>
    
    <strike>가운데줄이 적용된 텍스트</strike><br/>
    
    <sup>위첨자 텍스트</sup><br/>
    
    <sub>아래첨자 텍스트</sub><br/>
    
    <p>앱피아 글자 강조하기 위한 <mark>마크</mark> 는 다음과 같습니다. </p>
    
</body>
 
</html>
 cs

위의 코드를 실행하면 다음과 같은 결과가 나옵니다. 

굵게 적용한 텍스트
이태릭체를 적용한 텍스트
밑줕이 적용된 텍스트
가운데줄이 적용된 텍스트
위첨자 텍스트
아래첨자 텍스트

앱피아 글자 강조하기 위한

마크

는 다음과 같습니다.

 

<단어 설명 / 축약 넣기>

특정 텍스트에 대한 설명등을 추가로 표시하기 위해서 사용하는 태그입니다. 그 글자 위에서 마우스를 올리면 관련된 설명이 나타나게 하는 것입니다. <abbr title = "Text descritption for Appia">Appia</abbr>이런 부분을 추가 해주시면 됩니다. 그럼 코드를 입력하여 한번 살펴보겠습니다. 

<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    
</head>
 
<body>
 
    <p>Blog is <abbr title = "Text descritption for Appia">Appia</abbr> </p>
 
</body>
 
</html>
 cs

위의 코드를 실행하면 다음과 같은 결과가 나옵니다. 

이와 같이 Appia 부분에 마우스를 위치하면 다음과 같이 설명이 나타납니다. 

 

이번 포스팅에서는 [초보HTML배우기 03]HTML / CSS - 글자 속성 스타일 적용 라는 주제로 글자에 기본적인 스타일을 적용하는 방법에 대해서 살펴봤습니다. 혹시 궁금하신 점이나 문의 사항 있으시면 언제든지 댓글 및 방명록에 글남겨주시길 바랍니다. 감사합니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기  (0) 2020.07.17
[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법  (0) 2020.07.15
[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성  (0) 2020.07.11
[초보HTML배우기 01]HTML / CSS - 처음시작 및 기본태그(Tag)  (0) 2020.07.09
[초보HTML배우기 00]HTML / CSS 환경설정 - Visual Studio Code 설치  (0) 2020.07.07
'Programming/HTML&CSS' Related Articles more
Comments