<제가 공부하면서 기록하는 글입니다.>
html 기본 구조
1. <시작태그> </종료태그>
2. 태그는 소문자로 작성
3. 들여쓰기 - 가독성을 위해
4. <태그 속성="값" 속성="값"> 텍스트 내용 </태그>
5. <a><b> 텍스트 내용 </b></a>
<html>
<head>
<title></title> - 웹 탭에 표시되는 문자
</head>
<body></body> - 본문
</html>
* 주석 - 많은 내용으로 인해 쉽게 파악하기 위해 작성
<!-- 쓰고 싶은 말 -->
기본 태그
1. 제목 태그
<hn></hn>(n : 1~6 숫자)
h1 > h2 > h3 > h4 > h5 > h6 순으로 h1이 글자 크기 제일 큼
2. 줄 바꿈
<br>
3. 문단 생성
<p> 내용 </p>
내용의 윗 줄, 아랫 줄을 띄어 줌으로써 문단 형성
4. 수평 줄 삽입
<hr>
→ <hr width="50%" align="left">
속성 : width="50%" (수평 줄 길이 속성 = "보이는 페이지의 비율{픽셀 값으로 설정도 가능}")
align="left" (수평 줄 위치 속성 = "위치")
5. 공백 및 <>& 입력
코드 작성 중 '스페이스바'를 여러번 눌려도 결과에선 띄어쓰기 한번으로 나옴
- 공백(3번 띄어쓰고 싶으면 와 같이 쓴다)
<입력 - <(소문자 L)
>입력 - >
&입력 - &
6. 입력 형태 그대로 보이기(띄어쓰기 여러번 해도 적용되도록)
<pre>태그
ex) <pre>안 녕 하세요</pre> 기본 : 안 녕 하세요
→ 안 녕 하세요 → 안 녕 하세요
7. 하이퍼링크 생성 <a>
<a href="도메인 주소"></a>
1) 특정 웹 페이지 연결
2) 웹 페이지 내에서 연결
<a href="#alpha">alpha부분</a>
<h1 id="alpha"> alpha </h1>
→ alpha로 묶어준 것
/ 하이퍼링크 연결된 alpha부분을 클릭하면 <h1>태그 적용된 alpha로 이동
* 속성 - target
값 - _blank : 새로운 탭으로 열기
_self : 현재 탭으로 열기(생략 가능)
ex) <a href="도메인 주소" target="_blank"
8. 글자 모양 태그
· 굵게 - <b></b>, <strong></strong>
· 기울림꼴 - <i>, <em>
· 밑줄 - <u>, <ins>
· 취소선 - <s>, <del>
· 첨자 - 아랫첨자 : <sub>
윗첨자 : <sup>
· 작은글씨 - <small>
· 형광펜 효과 - <mark>
9. 목록 태그
1) 순서가 없는 목록
<ul>
<li> 목록 </li>
</ul>
type(목록 기호) - circle, square, disc(기본)
2) 순서가 있는 목록
<ol>
<li> 목록 </li>
</ol>
속성 - type(목록 기호) : 1, a, A 등
start="숫자" : 숫자부터 시작
reversed : 목록 역순
3) 정의 목록
<dl></dl> 태그
제목 - <dt>
내용 - <dd>
10. 테이블 작성 <table>
행 삽입 - <tr>
제목 셀 삽입(글씨 굵게) - <th>
셀 삽입 - <td>
열 통합 속성 - colspan="합칠 열 개수"
행 통합 속성 - rowspan="합칠 행 개수"
테이블에 선 만들기 속성 - border="선 두께"
* 테이블 제목 붙이는 방법
1. <figure><figcaption> 사용(테이블 상단 좌측에 제목)
<figure> - 테이블 묶어줌
<figcaption>테이블 제목</figcaption>
<table></table>
</figure>
2. <caption> 사용(테이블 상단 중앙에 제목)
<table>
<caption>테이블 제목</caption>
</table>
* 열끼리 그룹화 <colgroup>
4열인 테이블이 있다고 가정
<colgroup>
<col> ---- 1열
<col span="2"> ---- 2,3열 묶어줌(합치는게 아님)
<col) ---- 4열
</colgroup>
<col>속성 style
- <col style="background-color: 색상;" style="width: 30px;">
11. 이미지 삽입
<img> 태그
ex) <img src="이미지" alt="이미지 설명" width="300px" height="200px">
경로 : src="이미지" or src="폴더이름/이미지"
12. 음악 삽입 / 비디오 삽입
<audio> 태그
ex) <audio src="음악 파일" controls>
= <audio controls="controls">
<source src="음악 파일" type="audio/mp3">
</audio>
속성 controls - 플레이/정지를 제어할 수 있는 컨트롤 표시
source - 브라우저 마다 코덱이 달라 오디오 소스에 대한 파일 형식 제공 (mp3, ogg, mav)
<video> 태그
<video src="비디오 파일" controls width="300" poster="미리보기 이미지">
속성 controls width - 비디오 영상 폭 넓이
poster - 재생되기 전 미리 보이는 이미지
'HTML, CSS' 카테고리의 다른 글
| [CSS] (0) | 2021.12.06 |
|---|---|
| [HTML] 태그(2) (0) | 2021.11.28 |
댓글