HTML은 기본적으로 <태그></태그> 형식을 사용합니다.
단독으로 사용하는것들도 있지만 기본적으로는 위에 방식을 사용합니다.
<h1>테그
h1테그는 간단하게 말하면 제목테그라고 생각하면 됩니다.
h1부터 h6까지 있으며 h1부터 h6으로 갈수록 글자크기가 줄어드는것도 볼수있고 <br>테그를 사용하지않아도 줄넘김이 되는것을 확인할수있습니다.
<!DOCTYPE html>
<html lang="ko-kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>h1 연습중입니다.</h1>
<h2>h2 연습중입니다.</h2>
<h3>h3 연습중입니다.</h3>
안녕하세요 처음 입니다<br>
HelloWorld!
</body>
</html>기본적으로 테그를 쓰고 저장하고 파일을 새로고침하면 바로 변경된화면을 볼수있습니다.
<br>테크 (단독 사용가능)
= 줄넘김 테그입니다.
테그를 사용하고 저장후 html 파일에 접속해보면
이렇게 출력되는것을 확인 할 수 있습니다.
<p>테그
<p>테그는 하나의 단락을 나타내는 테그입니다.
<a href></a> 테그
href 테그는 링크를 넣을때 사용합니다.사용할때는 <a href = "url">링크가 어디로가는지 쓰면됩니다.
ex)구글홈페이지</a>로 사용하면되고
<a href ="https://s-tudyprogramming.tistory.com/60">정리용 티스토리 블로그</a>
target
taget = "_blank" - 링크를 클릭하면 새로운 창으로 띄워줍니다.
target = "_self" - 링크를 새로 띄우지 않고 누른 화면에서 링크의 경로 로 넘어가집니다.
<a href ="https://s-tudyprogramming.tistory.com/60" target = "_blank">정리용 티스토리 블로그</a>
<a href ="https://s-tudyprogramming.tistory.com/60" targer = "_self">정리용 티스토리 블로그</a>사용하면 화면에 이렇게 표시되는데 누르면 사용되어진 링크로 이동됩니다.
<i></i>
i 테그는 글씨를 기울일수있습니다.
<sub></sbu>
<p>글씨<sbu>안에 원하는 글씨</sbu></p>를 사용하면 글씨 <옆에 작게 안에 원하는 글씨>가 나오는것을 볼수있습니다.
<ins></ins>
<ins>글씨</ins> 를 넣으면 글씨에 밑줄이 그어진것을 확인 가능합니다.
<del></del>
<del>글씨</del> 를 사용하면 글씨 가운데에 줄이 그어집니다.
예시)
<p><i>KOREA</i></p>
<p>KOREA<sub>seoul</sub></p>
<p><ins>KOREA</ins></p>
<p><del>del</del></p>결과 출력시
리스트 태그
<p>메뉴 리스트</p>
<ul>
<li>HELLO1</li>
<li>HELLO2</li>
<li>HELLO3</li>
</ul>
<ol>
<li>HELLO1</li>
<li>HELLO2</li>
<li>HELLO3</li>
</ol>
<li></li>
리스트의 약자로 목록을 만들어 주는 테그입니다.
<ul></ul> = unorder list
순서가 없는 리스트를 만들때 사용합니다.
<ol></ol> = oredr list
순서가 있는 리스트를 만들떄 사용합니다.
<p>
<ol>
<li><a href ="https://s-tudyprogramming.tistory.com/60" target ="_blank">새로창을 열어줍니다.</a></li>
<li><a href ="https://s-tudyprogramming.tistory.com/60" target ="_self">지금창에서 열어줍니다.</a></li>
</ol>
</p>이렇게도 사용 가능합니다.
<dl></dl>
문서의 레이아웃을 사용할때 사용해줍니다.
ul, ol과 비슷합니다.
<dt></dt>
설명 혹은 정의 리스트에서 용어를 나타냅니다.
<dl>
<dt>메뉴 리스트</dt>
<dd>메뉴1</dd>
<dd>메뉴2</dd>
<dd>메뉴3</dd>
<dd>메뉴4</dd>
<dd>메뉴5</dd>
<dt>지역 리스트</dt>
<dd>서울</dd>
<dd>경기</dd>
<dd>충청</dd>
<dd>전라</dd>
<dd>경상</dd>
</dl>출력 결과
<table> 테그
표를 나타내는 태그입니다.
<td></tb>
하나의 열을 나타내는 테그입니다
<tr></tr>
하나의 행을 나타내는 테그입니다.
행을 합치는 방법
<td colspan = " "> 테그
ex = <td colspan="2"> = 행을 2칸하친걸 쓰겠다.
열을 합치는 방법
<td rowspan= " ">테그
ex = <td rowspan ="4"> = 열을 4칸 합친걸 사용하겠다.
<img>
<img>테그는 이미지 화면에 출력할때 사용하는 테그입니다.
<img src =" ">
src는 경로를 뜻합니다.
<alt>
<img src =" " alt=" ">
alt 는 이미지가 깨졌을때 그 이미지가 무엇인지 설명해주는 기능입니다.
<width>
<img src =" " alt = " " width ="사이즈">
사이즈를 바꿀대 사용하는 기능인데 요즘에는 css로 많이 변경하기 때문에 크게 상관없습니다.
<audio>
사운드를 출력해 주는 테그
<audio src =" " controlls = "controls" autoplay ="autoplay" loop = "loop"></audio>
src로 이미지 경로를 넣어주고
controlls는 내가 그 오디오를 컨드롤이 가능하게 할건지 안할건지 사용할때 씁니다
autoplay는 내가 그 화면에 들어갔을때 자동으로 음악을 플레이 하는 기능입니다.
loop는 모두 아시다시피 반복 할때 사용합니다.
<table width = "300"border="1">
<tr>
<td>
<h1>주간 노래</h1>
<hr/>
<ol>
<li><img src ="" alt =""><a href ="">노래1</a></li>
<li><img src ="" alt =""><a href ="">노래2</a></li>
<li><img src ="" alt =""><a href ="">노래3</a></li>
<li><img src ="" alt =""><a href ="">노래4</a></li>
</ol>
<audio src = "" controls ="controls" autoplay ="autoplay" loop ="loop" ></audio>
</td>
</tr>
</table>결과 출력
'HTML' 카테고리의 다른 글
| HTML form관련 태그 (0) | 2022.06.27 |
|---|---|
| HTML 기본 태그 02 (0) | 2022.06.24 |
| HTML 01 (0) | 2022.06.23 |
| HTML, css, js 실습 용 vscode 다운로드, 플러그인 (0) | 2022.06.23 |
