HTML 공부 시작 2일차!
Chapter 2에서는 다양한 종류의 태그 목록들이 있다. 너무 다양해서 당황스러웠다. 그래서 두 개의 글로 나누어서 작성하려고 한다.
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Chapter 2</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<p> h1~h6 까지 굵은 글씨체 크기 조절 가능<br>
1에 가까울수록 글씨 크기가 커진다.
</p>
<hr>
<blockquote>
이 부분은 다른 부분에 비해 들여쓰기가 되어<br>
인용하는 문장들을 쓰는 곳입니다.
</blockquote>
<pre>
pre태그는 내가 띄어쓰기를 하는 만큼 화면에 그대로 출력된다.
</pre>
<strog> 굵게 강조할 텍스트</strog>
<strong><strog><strong> 굵게 강조할 텍스트 여러번 중복하여 쓸수있다.</strog></strong></strong>
<b><b>굵게 강조!</b></b>
<em>비스듬한 글씨체</em>
<i>비스듬한 글씨체 </i><br>
<q>인용 내용 표시</q>
<mark>형광펜 효과가 있다.</mark> <br>
<p>오늘은 chpater2 <span style = "color: blue;">텍스트 관련 태그들 </span>을 공부했다.</p>
<p>오늘은 chpater2 <div style = "color: blue;">텍스트 관련 태그들 </div>을 공부했다.</p>
<p> 루비는 주로 동아시아 국가들에 <ruby>주석<rt>note</rt></ruby>을 함께 표시할 때 사용한다.</p>
<ul>
<li> 전화번호 : 010-0000-1111</li>
<li> 전화번호 : 010-2222-3333</li>
</ul>
<ol>
<li> 전화번호 : 010-1111-2222</li>
<li> 전화번호 : 010-4444-3333</li>
</ol>
<ol type = "a">
<li> 전화번호 : 010-1111-2222</li>
<li> 전화번호 : 010-4444-3333</li>
</ol>
<ol type = "a" start ="3">
<li> 전화번호 : 010-1111-2222
<li> 전화번호 : 010-4444-3333</li>
</ol>
</body>
</html>태그 목록
- <hn> <h1>~ <h2>까지 굵은 글씨 크기 조절이 가능하다.
- <hr> 화면에 긴 줄을 표시한다.
- <blockquote> 들여쓰기가 화면에 표현되어 인용하는 문장들을 주로 쓴다
- <q> 화면에 "문장" 식으로 표현된다. 인용하는 문장을 주로 쓴다.
- <pre> html코드에 내가 띄어쓰기를 하는 만큼 화면에 표시된다.
- <strong> 굵게 텍스트를 강조할 때 쓴다. 여러 번 중복 가능! 화면낭독기로 읽을 경우 강조되었다고 알려준다.
- <b> 굵게 텍스트를 강조할 때 쓴다. 여러 번 중복 가능!
- <em> 비스듬한 글씨체 주로 <em>태그는 문장에서 흐름상 특정 부분을 강조할 때 사용한다.
- <i> 비스듬한 글씨체 , 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 사용한다.
- <mark> 텍스트 입력시 화면에 형광펜으로 그어 놓은 듯한 효과가 있다.
- <span> 문장에서 중간에 일부 텍스트만 묶어서 스타일을 적용할 때 사용
- <div> 문장 중간에서 텍스트 일부를 묶어서 스타일을 적용하고 다음 문장부터 줄 바꿈 적용
- <ruby> 문장에서 중간에 주석을 달기 위해 사용한다. ex) <ruby> 주석 표시할 내용 <rt> 주석 </rt><ruby>
- <ul> 순서가 필요하지 않는 목록을 만들 때 사용하고 주로 <li>와 같이 사용한다. </li>가 없고 다음에<li>가 있을경우 생략 가능하다.
- <ol> 순서가 필요한 목록을 만들 경우 사용 <li>와 함께 사용한다. type을 변경하면 목록을 다른 기호로 바꿀수 있다 , start는 기본적으로 1부터 시작하지만 설정하면 중간 번호부터 시작할 수 있다 , reversed 항목을 역순으로 표시한다.
나머지 내용들은 [Chapter 2-2]에서 이어서 작성하려고 한다.
'HTML' 카테고리의 다른 글
| [Chapter 3 - 연습문제] HTML5 공부 4일차!(2021-07-01) (0) | 2021.07.01 |
|---|---|
| [Chapter 3] HTML5 공부 3일차 (2021-06-30) (0) | 2021.07.01 |
| [Chapter2 - 연습문제] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |
| [Chapter 2-2] HTML5 공부 2일차 (2021-06-29) (0) | 2021.06.30 |
| HTML공부 시작! (2021-06-28) (0) | 2021.06.29 |