728x90
반응형
1. 서식 태그
<b> : 텍스트를 굵게 표현
<i> : 텍스트를 이탤릭체로 표현
// html1 버전
웹 접슨성을 위한 태그이다.
<strong> : 텍스트를 굵게 표현, 리더기에서 거쎈 발음
<em> : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음
//html5 버전
<b>여러분 아녕하세요.</b> 오늘은 <strong>HTML</strong>에 데헤서 베워볼게요
https://validator.w3.org/
잘못된 스크랩트나 토드가 있는지 확인하는 사이트예제 서식태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서식태그</title>
</head>
<body>
<h2>서식태그</h2>
<p> b태그는 <b>단순히 글자가 굵게</b>> 표현됩니다</p>
<p>strong 태그는 <strong>중요한 글자를 굵게</strong> 표현됩니다</p>
<p>i 태그는 <i>단순히 글자를 이탤릭채로</i> 표현합니다</p>
<p>em 태그는 <em>중요한 글자를 이탤릭체로 </em>기울여 표현합니다.</p>
<p>del 태그는 글자를 <del>지운 것처럼</del> 표현합니다.</p>
<p>ins 태그를 사용하면 <ins>중요한 글자에</ins> 맡줄을 그어줍니다</p>
<p>sup 태그를 사용해서 수식을 표현 : x<sup>2</sup> + y<sup>3</sup> = z </p>
<p>sub 태그를 사용해서 화학삭을 표현 : H<sub>2</sub>O</p>
</body>
</html>
2. 목록 태그
<ul> : 순서가 없는 목록 태그, 블록 태그
· 김사과
· 오렌지
· 반하나
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<ol> : 순서가 있는 목록 태그 , 블록태그
1. 김사과
2. 오렌지
3. 반하나
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<dl> : 정의 목록 태그, 블록 태그
류정원 선생님
김사과 학생
오렌지 학생
반하나 학생
<dl>
<dt> 류정원 선생님</dt>
<dd> 김사과 학생</dd>
<dd> 오렌지 학생</dd>
<dd> 반하나 학생</dd>
</dl>
// 자식표현 dl>dt*3
// 형제 표현 dl>dt+di*3
예제 목록 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록 태그</title>
</head>
<body>
<h2>목록 태그</h2>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
<hr>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
<hr>
<dl>
<dt>류정원 선생님</dt>
<dd>김사과</dd>
<dd>오렌지</dd>
<dd>반하나</dd>
</dl>
<hr>
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>
</li>
</ul>
</body>
</html>
MDN - 태그 설명 및 좋은 자료들이 있는 곳
https://developer.mozilla.org/ko/docs/Web/HTML반응형
'Frontend > HTML' 카테고리의 다른 글
| 홈페이지 만들기(파일질라, 닷홈, 비주얼스튜디오) (0) | 2022.10.26 |
|---|---|
| HTML (뉴스, 이력서) 과제 (0) | 2022.10.21 |
| HTML 테이블(기본, colspan, rowspan, colgrop, caption) (0) | 2022.10.21 |
| HTML(이미지 태그, 하이퍼링크 태그, 책갈피 태그) (0) | 2022.10.21 |
| HTML (Visual Studio Code 설치 및 기본) (0) | 2022.10.20 |