교재 : 명품 HTML5 + CSS3 + Javascript
기본 태그
<!DOCTYPE html>
<!--주석-->
헤드, 바디
특징 : 1. 대소문자 구별 X
2. 시작 태그와 종료 태그
<title> - <head>태그 내에서만 사용하며 browser title에 적용
툴팁 달기
tag의 title attr로써 사용할수 있다 ex) <h1 title ="test"></h1>
<p> - paragraph(문단)을 의미 하며, 마지막에는 \n이 적용됨
<pre> - 포맷 그대로 출력
문자, 기호 입력
| 문자 | 엔터티 표현 | 코드 표현 |
| " | " | " |
| ' | ' | ' |
| < | < | < |
| > | > | > |
| & | & | & |
| 빈칸 | |   |
블록 태그 | 인라인 태그
블록 태그 - <p>, <h1>, <div>, <ul>
인라인 태그 - <strong>, <a>, <img>, <span>
베이스 태그
<head>
<base href = "URL/">
</head>
사용
<a href = "math.html">text</a>
이미지 삽입
<img src = "URL" alt = "문자열" width =" 폭" height = "높이">alt - 사진의 오류로 인해 로딩이 불가할 시에 해당 공간에 출력되는 문자열
리스트 만들기
순서 있는 리스트 - <ol>
순서 없는 리스트 - <ul>
정의 리스트 - <dl>
<ol type = "1"|"A"|"a" start = "value">
<li>item</li>
<li>item</li>
</ol><dl>
<dt>word</dt>
<dt>explain</dt>
</dl>표 만들기
<table> - 전체 컨테이너
<caption> - 표 제목
<thead> - 헤딩 셀 그룹
<tfoot> - 바닥 셀 그룹
<tbody> - 데이터 셀 그룹
<tr> - 행
<th> - 제목 셀
<td> - 데이터 셀
<table>
<thead>
<tr><th>data</th><th>data2</th>
</thead>
<tbody>
<tr><td>data</td><td>data22</td></tr>
<tr><td>data</td><td>data22</td></tr>
</tbody>
...하이퍼링크
<a>
<a href = "URL|URL#앵커이름|#앵커이름" target = "윈도우 이름" download>
text
</a>
"target"
_blank = 새 윈도우
_self = 현재 윈도우
_parent = 부모 윈도우
_top = 브라우저 윈도우앵커 만들기
HTML5 태그의 id ="tag_name" 지정
<p id ="id1">test</p>
<!--앵커 링크 만들기 -->
<a href ="#id1">링크</a>인라인 프레임
<iframe>
<iframe src ="URL" name = "윈도우 이름" width ="폭" height = "높이">
text
</iframe>
iframe에 id역할을 수행할려면 아래 코드로 수행가능하며 _blank,_self,_top도 가능하다
<iframe name ="id1" src ="URL"></iframe>
.
.
.
<a href ="URL" target ="id1">text</a>미디어
<video src="test.mp4" width="100" height="200"
controls
autoplay
muted
loop>
text </video>video태그 소스를 여러개를 둘려면 <video>내 <source>태그로 추가 가능
오디오
<audio src ="URL"
controls
autoplay
loop>
text</audio>
'공부 > WEB' 카테고리의 다른 글
| Web_programming(Chap.03) (0) | 2023.09.23 |
|---|---|
| Web_Programming(Chap.01) (0) | 2023.09.23 |