HTML의 요소
<p> My Name is none. </p>
1 2 3
1 : Opening Tag - 요소 이름과 <>로 구성
2 : Contents(text) - 요소의 내용이며 단순 텍스트
3 : Closing Tag - /를 이용하여 태그를 종료
3. Nested Element(중첩 요소)
요소 안에 다른 요소가 들어가는 형태
<p>I'm <strong>very</strong> happy. </p>
4. Paragraph(단락)
<p> 태그로 단락을 표현
<h1> ~ <h6> 단락의 제목 태그
5. 서식 태그
<strong>, <b> : 굵은 글씨체
<em>, <i> : 이탤릭체
<mark> : 하이라이트
<del> : 취소선
<ins> : 밑줄
<sup>, <sub> : 위 첨자, 아래 첨자
☆ Code
<!doctype html>
<html>
<head>
<title>Paragraph</title>
</head>
<body>
<!-- 이것이 주석인가? -->
<!-- 주석은 이렇게 표기해요 -->
<br><br> <!-- <br>은 break의 약자로 새 줄을 의미 -->
안녕하세요?<br>
이렇게 비 오는 날 코딩하려니<br>
화가나네요.<br>
<hr>
<!-- <p> : 단락(paragraph) -->
<p>
오늘은 백화점에서 먹을걸 많이 구매해버렸어<br>
어떡하지??
</p>
<p>
오늘은 <strong>치킨집</strong>에서 10인분을 시켜서 혼자 먹었다.
</p>
<hr>
<!-- <h1> ~ <h6> -->
<h1>Primal Fear</h1>
<h2>매우 유명한 반전 영화</h2>
<h3>에드워드 노튼의 데뷔작</h3>
<h4>상영 시간이 매우 길어요</h4>
<h5>Youtube에서 15분 요약본으로 보세요</h5>
<h6>다른 반전 영화를 찾아보세요.</h6>
<hr>
<h1>남색대문(Blue Gate Crossing)</h1>
<h2>계륜미, 진백림 데뷔작</h2>
<h3>저 이거 보고 움</h3>
<hr>
<!-- <pre> : 내용 그대로 출력하기 -->
<pre>
<pre> 적용 사례
안녕하세요. 감사합니다.
항상 감사하는 마음을
가지고 살아가요 여러분.
좋은 명절 되세요.
</pre>
<hr>
<!-- <strong>, <b> -->
<strong>차이코프스키 피아노협주곡 1번</strong><br>
<b>차이코프스키, 멘델스존, 브람스는 바이올린 협주곡이</b><br>
딱 1곡씩만 있는데 다 명곡입니다.<br>
<!-- <sub>, <sup> -->
조성진<sub>*피아니스트</sub>는 고등학교
<sup>**예원학교</sup>를 졸업하였다.
<br>
<!-- 태그의 중첩 + 각종 서식 -->
<p>
<em>여러분, <strong>우리 학원</strong>에 오신 것을 환영합니다.</em><br>
<h1>경 입학 *성 학원 축</h1>
<ins>오늘 야간에 <mark>400단어</mark> 외우기 시험을 봅니다.</ins><br>
하나라도 틀리면 <del>맞습니다.</del> 약간의 어려움을 겪습니다.
</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML blockquote (0) | 2025.01.08 |
|---|---|
| HTML a 태그 (1) | 2024.11.24 |
| HTML 테이블 (0) | 2024.11.24 |
| HTML 인풋 태그 (2) | 2024.11.24 |
| HTML 링크, 이미지, 리스트 태그 (0) | 2024.11.24 |