09009
[HTML] 글자, 목록 태그 본문
글자 태그
• 제목 글자 : h1 > h2 > h3 > h4 > h5 > h6 (왼쪽으로 갈수록 글자의 크기가 커진다)
• 본문 글자
- p : 단락, 본문 문단 생성 (paragraph)
- br : 줄바꿈 (break)
- hr : 수평 줄 삽입
본문 단락 구분하기
💻 출력
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Page</title>
</head>
<body>
<h2>나폴리 괴물 공격수 향해 ‘빅클럽 5팀 격돌’...‘최고액 판매 가능?’</h2>
<p>이탈리아 ‘아레나 나폴리’는 28일, ‘코리에레 델로 스포르트’를 인용 “오시멘은 자신의 역사를 다시 쓸 수 있다.</p>
<p>. 그는 나폴리의 클럽 레코드였으며, 역대 최고액으로 떠날 수도 있다. 그를 좋아하지 않는 팀은 없다”라고 보도했다.</p>
</body>
</html>제목과 본문 태그
💻 출력
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>홍차</h1>
<hr>
<h2>정의</h2>
<p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. .... 'black tea'라고 부른다.</p>
<br>
<h2>등급</h2>
<p>홍차는 여러 가지로 등급이 매겨진다. ... 등급을 조합하여 표시한다.</p>
<p>- 브로큰 페코</p>
<p>- 브로큰 페코 수송</p>
<p>- 브로큰 오렌지 페코 패닝</p>
</body>
</html>
특수문자 - 공백
💻 출력
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>공백이 있는 글자</h1>
<h1>공백이 있는 글자</h1>
</body>
</html>$nbsp를 사용하면 문장에서 모든 공백을 표시할 수 있다.
앵커 태그 - a
a 태그 : 다른 웹페이지같은 외부 문서나 웹 페이지 내부의 특정 위치로 이동할 때 사용한다.
href에는 이동할 웹 페이지나 파일의 위치가 있는 경로를 입력한다.
<a href = " (이동할 웹 페이지) "> 출력할 글자 </a>
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<a href="https://www.google.com/">구글</a><br>
<a href="https://github.com/">깃허브</a><br>
<a href="https://www.youtube.com/">유튜브</a><br>
</body>
</html>목록 태그
- ul : 순서가 없는 목록 생성
- ol : 순서가 있는 목록 생성
- li : 목록 요소 생성
순서가 없는 목록 만들기
💻 출력
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</body>
</html>ul 태그와 li 태그를 사용하여 작성한다.
순서가 있는 목록 만들기
💻 출력
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</body>
</html>ol 태그와 li 태그를 사용하여 작성한다.
중첩 목록 만들기
<b> </b> : 굵은 글자
💻 출력
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<!--첫번째 목록-->
<li>
<b>과일</b>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</li>
<!--두번째 목록-->
<li>
<b>채소</b>
<ol>
<li>상추</li>
<li>치커리</li>
<li>양배추</li>
</ol>
</li>
</ul>
</body>
</html>
1) "과일", "채소" 큰 두 개의 순서가 없는 목록을 생성해야하므로 ul 태그를 작성한다.
2) ul 태그 안에 순서가 없는 목록 두 개를 생성해야 하므로 2개의 목록 요소를 생성하기 위해 ul 태그 안에 li 태그를 두 번 작성한다. 그러면 순서가 없는 목록 안에 2개의 목록 요소가 생성된 것이다.
3) "과일"을 목록의 첫번째 원소(위 스크린샷의 경우, ul 밑에 첫번 째 li)라고 할 때, 또 과일이라는 목록 안에서 3개의 순서가 있는 목록을 생성해야 한다.
4) "채소"도 마찬가지로 목록의 두번째 원소라고 할 때, 채소라는 목록 안에서 3개의 순서가 있는 목록을 생성해야 한다. 위의 두 내용을 코드로 정리하면 아래와 같다.
5) "과일"과 "채소"는 진한 글씨로 작성해야하므로 순서가 있는 목록 태그에 들어가기 이전에
<b> </b> 태그로 작성한다.
6) 문제에서 제시된 것과 같이 목록에 들어갈 단어를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>
<b>과일</b>
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</li>
<li>
<b>채소</b>
<ol>
<li>상추</li>
<li>치커리</li>
<li>양배추</li>
</ol>
</li>
</ul>
</body>
</html>위와 같은 코드로 작성하면 아래 화면이 출력된다.
'Front-End > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그 (0) | 2023.04.08 |
|---|---|
| [HTML] 공간 분할 태그 - div, span (0) | 2023.03.29 |
| [HTML] 입력 양식 태그 (0) | 2023.03.29 |
| [HTML] 테이블 태그 (0) | 2023.03.29 |
| [HTML] HTML 작성 및 실행 (0) | 2023.03.28 |