반응형
HTML에 텍스트 삽입하기!
제목을 나타내는 <hn>태그
"h"는 영어로 "제목"을 의미하는 "heading"의 약자입니다.
- <hn> 태그의 n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있습니다.
- <h1>이 가장 큰 제목이고 <h2>, <h3>, …,<h6>의 순서로 크기가 작아집니다.
<body>
<h1>1번째로 큰 제목 출력하기</h1>
<h2>2번째로 큰 제목 출력하기</h2>
<h3>3번째로 큰 제목 출력하기</h3>
<h4>4번째로 큰 제목 출력하기</h4>
<h5>5번째로 큰 제목 출력하기</h5>
<h6>6번째로 큰 제목 출력하기</h6>
</body>
텍스트 단락을 만드는 <p>태그
- <p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어집니다.
- 편집기에서 <p> 태그의 텍스트 단락의 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시됩니다.
<p>호승월드에 오신걸 환영합니다!</p>
줄 바꾸기 <br>태그
- <br> 태그를 사용하면 텍스트 단락의 줄을 바꿀 수 있습니다. ex) \n등
- <br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없습니다.
인용문 태그 <blockquote>
- <blockquote>와 </blockquote> 태그로 인용문을 감싸 주면 웹 브라우저는 <blockquote>태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 씁니다.
굵은 텍스트 <strong>,<b>
<strong> 태그와 <b> 태그는 눈으로 볼 때 별로 차이가 느껴지지 않지만 그대로 구분하는 이유는 화면 낭독기의 기능 때문입니다.
- <strong> 태그는 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때 사용합니다.
- <b> 태그는 키워드처럼 단순히 글자만 굵게 표시할 때 사용합니다.
기울어진 텍스트 쓰기 <em>,<i>
<em>태그에서 em은 강조를 뜻하는 emphasis의 줄임말이고 <i>태그에서 i는 이탤릭체, 기울기체를 뜻하는 italic의 줄임말입니다.
- <em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용합니다.
- <i> 태그는 마음속의 생각이나 용어, 관용구 등에 사용합니다.
순서 목록 만들기 태그
ol은 olrered list의 줄임말이고, li는 list의 줄임말입니다.
<ol>
<li>항목 1</li>
<li>항목 2</li>
</ol>- <ol> 태그에 type 속성을 사용하면 문자나 로마 숫자 등으로 순서를 나타낼 수 있습니다.
- 순서 목록은 기본적으로 ‘1’부터 시작하지만 start속성을 사용해서 시작 번호를 바꿀 수도 있습니다.
- 여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 할 경우 start 속성을 사용하여 원하는 번호부터 시작하면 됩니다.
| 종류 | 설명 |
| type = "1" | 숫자(기본값) |
| type = "a" | 영문 소문자 |
| type = "A" | 영문 대문자 |
| type = "i" | 로마 숫자 소문자 |
| tpye = "I" | 로마 숫자 대문자 |
- <ul>과 </ul> 태그를 목록 앞뒤에 붙인 후 <li>와 </il> 태그를 삽입하여 순서 없는 목록을 만들 수 있습니다.
ul은 unordered list의 줄임말입니다.
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
설명 목록 사용하기
dl은 description list의 줄임말입니다.
- 설명 목록은 이름(단어명) 부분을 지정하는 <dt> 태그와 값(설명) 부분을 지정하는 <dd> 태그로 구성됩니다.
- <dt> 태그 하나에 <dd> 태그를 여러 개 사용할 수도 있습니다.
예시 :
<dl>
<dt>이름</dt>
<dd>값</dd>
</dl>
HTML에 이미지 삽입하기!
이미지를 삽입하는 <img> 태그
<img src="이미지 파일 경로" alt="대체용 텍스트">- src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할을 하며 반드시 있어야 합니다.
- alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.
이미지 파일 경로를 나타내는 src 속성
- 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해집니다.
<!-- 웹 문서와 같은 폴더에 있는 이미지 파일 경로 넣기 -->
<img src="sample.jpg">
<!-- 웹 문서 하위 폴더에 있는 이미지 파일 경로 넣기 -->
<img src="images/sample.jpg">
이미지를 텍스트로 대신 설명하는 alt 속성
- alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타납니다.
이미지 크기를 조절하는 width, height 속성
- width는 이미지의 너비를, height는 이미지의 높이를 지정합니다.
- width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타냅니다.
- 단위는 퍼센트(%)와 픽셀(px)이 있습니다.
다양한 멀티미디어 파일을 삽입할 때 쓰는 <object>, <embed> 태그
<object width="너비" height="높이" data="파일"></object>- data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정합니다.
<embed src="파일 경로" width="너비" height="높이">- HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입합니다.
오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그
HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있습니다.
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>- 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는 <audio> 태그를 사용하고,비디오 파일을 삽입할 때는 <video> 태그를 사용합니다.
| 종류 | 설명 |
| controls | 플레이어 화면에 컨트롤 바를 표시합니다. |
| autoplay | 오디오나 비디오를 자동으로 실행합니다. |
| loop | 오디오나 비디오를 반복 재생합니다. |
| muted | 오디오나 비디오의 소리를 제거합니다. |
| preload | 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정합니다. 사용할 수 있는 값은 auto, metadata, none입니다. |
예시 : medias 폴더에 있는 smaple.mp4를 자동실행,음소거,반복재생
<body>
<video src="medias/sample.mp4" width="700" autoplay muted loop></video>
</body>
링크를 삽입하는 <a> 태그와 href 속성
<a href="링크할 주소">텍스트 또는 이미지</a>- 텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하면 텍스트에 링크를 만들 수 있습니다.
- <a>와 </a> 태그 사이에 <img> 태그를 넣으면 이미지에 링크를 만들 수 있습니다.
- target 속성에 _blank를 지정하면 링크에 연결된 문서가 새 탭에서 열립니다.
반응형
'HTML&CSS' 카테고리의 다른 글
| HTML 입력 양식 작성하기! (0) | 2023.02.09 |
|---|---|
| HTML에 표 삽입하기! (0) | 2023.02.06 |
| HTML 첫걸음! (0) | 2023.02.01 |
