반응형
SMALL
01. HTML 줄 바꾸기 <br> 태그
편집기에서 엔터기와 같은 기능
- 종료 태그 </br> 없이 사용 → <br/> = <br></br>
<body>
과목명 : HTML
개설 학과 : 컴퓨터과학과
학년 : 3학년
담당교수 : 아무개
</body>화면 출력
과목명 : HTML 개설 학과 : 컴퓨터과학과 학년 : 3학년 담당교수 : 아무개
→ 한줄로 표현
<body>
과목명 : HTML<br/>
<br/>
<br/>
개설 학과 : 컴퓨터과학과<br/>
학년 : 3학년<br/>
<br/>
담당교수 : 아무개
</body>화면 출력
과목명 : HTML
개설 학과 : 컴퓨터과학과
학년 : 3학년
담당교수 : 아무개
→ <br/> 을 Enter 키로 인식하여 줄 바꿈 기능 실행
02. 단락 바꾸기 <p> 태그
문단을 나눠 독립된 단락을 생성
- 다른 내용과의 구분을 위해 단락 전후에서 자동 줄바꿈 수행
<body>
독립된 단락을 생성하기 위해서는
<p>p 태그를 사용하며,</p>
<p><p><p>p 태그를 연속해서 여러 개 사용해도 한번 사용한 것과 같은 효과를 가짐</p></p></p>
단락의 정렬은 CSS를 사용한다.
</body>화면 출력
독립된 단락을 생성하기 위해서는
p 태그를 사용하며,
p 태그를 연속해서 여러 개 사용해도 한 번 사용한 것과 같은 효과를 가짐
단락의 정렬은 CSS를 사용한다.
03. HTML 수평선 그리기 <hr> 태그
텍스트 사이에 수평선을 그리는 것
→ 단락의 주제를 구분하는 의미로서 사용
- 자동 줄바꿈, 종료태그 없이 사용
<body>
hr 태그는 수평선을 그리는 태그이다.
<hr/>
단락 단위로 주제를 바꿀 때 사용합니다.
<hr/>
</body>
04. HTML 단락의 제목을 지정 <hn> 태그
n = 1, 2, 3, 4, 5, 6 → <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<body>
<h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6>
</body>
- 크기
h1
h2
h3
h4h5h6
- 굵은 글자(볼드), 자동 줄 바꿈
04. 텍스트를 자유롭게 표시하기 <pre> 태그
편집기에서 문자가 입력된 형식을 그대로 유지하여 출력
<body>
pre 태그 설명
<pre>
- <b>pre 태그는 'preformatted text'의 약자이다.</b>
- 편집기에서 문자가 입력된 형식을 그대로 유지하여 출력한다.
-- 공백, 줄바꿈 등을 자유롭게 입력할 수 있다.
- 특수 문자가 많은 텍스트(예, 프로그램 소스)를 표시할 때 유용
</pre>
</body>
- pre 태그 내에 다른 태그 적용
- pre 태그 내 텍스틑 고정폭, 크기사용
- 브라우저 크기에 따라 화면 잘릴 수 있음
05. 단락을 들여쓰는 <blockquote> 태그
상하 줄바꿈으로 구분되는 단락의 생성 및 들여쓰기
- 들여쓰기 간격은 인위적인 조정이 불가
- 주로 인용문을 만들 때 사용
** cite 속성 → 인용된 부분의 URL 지정
<body>
인생은 내일도 계속된다.
<blockquote cite="http://www.abcd12345123.com">
좋지 않는 일은 심플하게 생각하고 <br/>
좋은 일은 복잡하게 자꾸 끄집어 내자!
</blockquote>
- "한 번쯤은 위로 받고 싶은 나" 중에서-
</body>
반응형
LIST
'방송통신대학 > HTML' 카테고리의 다른 글
| 02-10. 목록지정 <ul> <ol> <dl> (0) | 2021.04.26 |
|---|---|
| 02-9. HTML 글자 스타일 지정 (0) | 2021.04.26 |
| 02-8. 단락을 들여쓰는 <blockquote> 태그 (0) | 2021.04.24 |
| 02-7. 텍스트를 자유롭게 표시하기 <pre> 태그 (0) | 2021.04.23 |
| 02-6. HTML 단락의 제목을 지정 <hn> 태그 (0) | 2021.04.22 |