텍스트 태그

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

텍스트 태그 본문

Front-End (웹)/HTML

텍스트 태그

친절한개발초보자 2021. 7. 18. 22:06

728x90

텍스트 태그

기본 틀

<!DOCTYPE html> → '이 파일이 html파일 입니다'라고 선언해주는 명령어
<html lang="ko"> → '이 파일이 한국어로 베이스로 작업한다'라고 선언해주는 명령어 
<head> → 이 html 파일에서 중요한 여러가지 내용을 담아주는 그릇
<meta charset="UTF-8"> → 전서계의 언어를 이 파일이 인식할 수 있도록 해주는 명령어
<title>웹사이트의 제목</title> → 웹사이트의 제목을 담당하는 명령어
</head> 
    <body> → html태그들을 작성해주는 실질적인 공간
        여기안에다가 작성
    </body>
</html>

<h> 태그 (제목 태그)
- 특징
1. 사용하면 글씨가 굵어지는 특징이 있다.
2. 태그 이름 옆에 숫자가 붙는다.
3. h1 ~ h6까지만 있다.
☆ h1 = 웹사이트의 가장 큰 제목(로고)
☆ h2 = 웹사이트의 가장 큰 메뉴
☆ h3 ~ h6 = 가장 큰 메뉴를 보조해주는 메뉴
4. 숫자가 높아질수록 글씨 크기가 작아진다.

태그 (문단 단락 태그)
: 기사 등에서 본문의 내용이 달라질 때 문단을 나눠주기 위해 사용하는 태그

- 특징
1. html에서는 스페이스바는 딱 한 칸만 인식이 된다.
→  
: 스페이스 바 역할을 대신하는 명령어
2. html에서는 엔터키는 아예 인식이 안된다.
→ 
: 엔터키를 대신하는 줄 바꿈 태그
3. 태그와 태그 차이
→ 텍스트 단락을 만들 때는 태그 사용해야 한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>글자태그#1</title>
</head>
<body>
    <h1>안녕하세요</h1>
    안녕하세요
    <h2>안녕하세요</h2>
    <h3>안녕하세요</h3>
    <h4>안녕하세요</h4>
    <h5>안녕하세요</h5>
    <h6>안녕하세요</h6>
    <h7>안녕하세요</h7>
    
    <p>안녕하세요 p태그 입니다 저는 문단&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;단락 태그 입니다</p>
    
    <p>안녕하세요 p태그 입니다<br><br><br> 저는 문단 단락 태그 입니다</p>
    
</body>
</html>

텍스트 관련 태그
- <h> 태그
: 글씨를 굵어지게 만드는 태그
ⅰ) 제목에만 사용하는 태그
ⅱ) display:block
- 태그
: 글자를 굵어지게 만드는 태그
ⅰ) 주의사항 / 강조해야 할 내용 등에 사용하는 태그
ⅱ) display:inline
ⅲ) 화면 낭독기(screen reader)는 태그를 사용한 부분을 강조하여 읽어 준다.
- 태그
: 글자를 굵어지게 만드는 태그
 ⅰ) 그냥 굵게 만들어주고 싶을 때 사용하는 태그
 ⅱ) display:inline
cf) 물론 용도에 맞게 태그를 사용하는 것도 중요하지만 실제로는 font-weight:bold 사용해서 글자를 굵게 만들어주는 게 더 편리하다.
- 태그
: 글자를 기울이는 태그
 ⅰ) 기술 용어 외국어 기타 등등 웹사이트 내에서 정보를 표시할 때 사용하는 태그
- 태그
: 글자를 기울이는 태그
 ⅰ) 글을 쓴 사람의 생각을 텍스트에 표현해서 강조할 때 사용한 태그
cf) font-style:italic을 활용하여 기울여줄 수 있다.
- <cite> 태그
: 글자가 옆으로 기울어지는 태그
 ⅰ) 웹사이트 내에서 여러 가지 정보에 대한 출처를 표시할 때 사용하는 태그
- <q> 태그
: 글자의 양쪽에 ""가 생기는 태그
 ⅰ) 인용문을 가져와 사용할 때 사용하는 태그
- <blockquote> 태그
: 글자의 왼쪽에 긴 여백이 들어가는 태그
 ⅰ) 인용문을 가져와 사용할 때 사용하는 태그
- 태그
: 글자에 배경색이 들어가는 태그
 ⅰ) 강조하고 싶은 부분을 표시할 때
 ⅱ) background-color 쓰면 더 편리하다
- 태그
: 글자가 굉장히 작아지며 오른쪽 하단부로 위치하는 태그
 ⅰ) 어떠한 내용에 대한 짤막한 정보를 추가적으로 제공할 때 사용하는 태그
- <s> 태그
: 글자에 중앙에 선을 그어주는 태그
 ⅰ) 취소선을 그어주는 역할
ⅱ) 기존의 어떤 정보를 새로 갱신하면서 취소를 하는 역할
ex) 물건 판매 사이트에서 할인행사 상품 가격 표기 부분
cf) text-decoration:line-through를 사용해 똑같이 글자에 중앙에 선을 그어줄 수 있다.
- <ins> 태그
: 밑줄이 생기는 태그
 ⅰ) 밑줄이 생기면서 강조를 해야 하는 부분을 만들 때 사용하는 태그
- <del> 태그
: 글자의 중앙에 선을 그어주는 태그
 ⅰ) 취소선을 그어주는 역할
```
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <title>기타정보#3</title>
 <style>
 *{margin:0;padding:0;}
 strong,b,p{font-size:30px;}
 q{font-size:30px;}
 blockquote{font-size:30px;}
 sub{font-size:12px;}
 p{text-decoration:line-through}
 </style>
</head>
<body>
 <h1>h1태그입니다</h1>
 strong태그입니다
 b태그입니다
 i태그입니다
 em태그입니다
 <q>q태그입니다</q>
 <blockquote>blockquote태그입니다</blockquote>
 mark태그입니다
 <cite>cite태그</cite>
 이순신장군(임진왜란을막음)
 sub태그
 <s>s태그</s>
 p태그입니다
 <ins>ins태그</ins>
 <del>del태그</del>
</body>
</html>
```

주석처리
: 
- 단축키 : ctrl + shift + / (원하는 내용 드래그 한 다음 사용)
- 행 주석처리 : ctrl + / (한 줄이 통째로 주석처리)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>글자태그#2</title>
</head>
<body>
    <h1>안녕하세요</h1> <!--h1태그는 웹사이트의 가장 큰 제목인 로고에 사용한다-->
    <!--아무거나 실제 웹사이트에서는 보이지 않고 코딩프로그램 화면에서만 보입니다!-->
    <!--주석처리 단축키-->
</body>
</html>

728x90