프론트 엔드 1일차 HTML(글자 관련 태그, 목록 태그)
2024. 1. 10. 16:45ㆍ프론트엔드
글자 관련 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 관련 태그</title>
</head>
<body>
<!-- h태그
- 제목 태그
- 숫자가 작을수록 큰 글자
- 단순히 글자를 크게 하기 위해서 사용하지 않는것이 좋다.
- 뉴스의 제목, 쇼핑의 상품명 등에서 사용하기 적합하다.
-->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<!--
br태그
- 엔터 효과
- html에서는 연속된 공백(스페이스, 탭, 엔터 등)이 있어도 스페이스 하나로 적용
- 이 떄, 엔터 효과를 주기 위해 br태그를 이용
- 스페이스 효과
-->
안녕하세요
<br>
홍길동입니다.
<br>
안녕하세요
<br><br>
홍길동입니다.
<!--
hr 태그
- 가로 회색 밑줄을 긋는 태그
-->
<hr>
<!-- mark태그
- 노란 형광색 배경
b 태그
- 굵은 글씨
- 내용을 강조
-->
<mark>안녕하세요.</mark> 제<b>이름</b>은 <strong>홍길동입니다.</strong>
<br>
<!-- small태그
- 작은 글씨
em 태그
- 기울임
- 약하게 강조
i 태그
- 기울임
- 아이콘 사용시 활용
u 태그
- 밑줄
s 태그
- 취소선. 글자 중간에 선을 그음
-->
<u>안녕하세요</u> <small>제</small> <em>이름</em>은 <i>홍길동</i>입니다.
<br>
<s>오랜만에</s> <u>만나서 반갑습니다.</u>
<br>
<!--
blockquote 태그
- 인용 태그
- 여백을 주어서 표시
q 태그
- 인용 태그
- ""로 표시
sup태그
- 위 첨자 태그
sub태그
- 아래 첨자 태그
-->
<blockquote>인용문구</blockquote>
<br>
2 <sup>2</sup>
<br>
log 10<sub>10</sub>
<br>
<!--
abbr 태그
- 약어를 풀어쓸 때 사용하는 태그
- 약어에 마우스를 호버하면 풀어쓴 내용이 보임
kbd 태그
- 키보드의 키를 표현할때 사용
cite 태그
- 사이트를 나타낼때
- 기울어짐
code 태그
- 코드를 화면에 보여주는 태그
- pre태그와 함께 사용
pre태그
- 태그 사이에 있는 내용을 그대로 화면에 출력. 엔터도 각각
-->
<abbr title="Hyper Text Markup Language">HTML</abbr>
<br>
<kbd>Ctlr + A</kbd>
<br>
<cite>Naver</cite>는 검색 사이트이다. <br>
<code>
<pre>
System.out.println("Hello World");
</pre>
</code>
<!--
p태그
- 문단을 구분 할때 사용하는 태그
- 위 아래 여백이 자동으로 들어가 있음
-->
<p>문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. </p>
<p>문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. 문단 태그입니다. </p>
</body>
</html>
목록 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
ul 태그
- 순서가 없는 태그
- li 태그와 함께 사용
- 마커 모양을 변경할 수 있다
ol 태그
- 순서가 있는 태그
- li 태그와 함께 사용
- type속성으로 순서를 표현할 종류를 선택
- start속성으로 시작 숫자를 선택
dl 태그
- 용어를 정의 할 때 사용하는 태그
- dd, dt태그와 함께 사용
- dt : 용어, dd : 정의
-->
<h1>오늘의 할일</h1>
<ul>
<li>점심</li>
<li>저녁</li>
<li>공부</li>
</ul>
<h1>석차</h1>
<ol start="1" type="I">
<li>홍길동</li>
<li>임꺽정</li>
<li>고길동</li>
</ol>
<dl>
<dt>apple</dt>
<dd>사과</dd>
<dd>회사</dd>
</dl>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성) (0) | 2024.01.15 |
|---|---|
| 프론트엔드 1일차 HTML(폼 관련 태그) (2) | 2024.01.10 |
| 프론트엔드 1일차 HTML(멀티 미디어 관련 태그, 하이퍼 링크 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(표 관련 태그, 영역 관리 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(글자 꾸미기 태그) (1) | 2024.01.10 |