비주얼 스튜디오 코드 (Visual Studio Code, 이하 VS Code) 에서 html 파일 생성 후,
! 누르고 엔터를 치면 자동으로 HTML5의 기본 소스를 입력해 준다.
HTML 기본 태그 개념을 이해하기 위해 제목, 텍스트, 줄바꿈 태그를 활용함.
<!-- !누르고 엔터치면 자동으로 HTML5 기본 소스 입력해줌 -->
<!DOCTYPE html>
<html lang="en">
<!-- <head> html파일의 속성을 지정하기 위한 태그
현재 페이지의 정보, 필요한 파일을 연결 작업을 함.-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 실제 화면에 보이는 내용을 작성 -->
body입니다.
<!-- h태그 제목을 표현할 때 사용 h1~h6 -->
<!-- 각 태그마다 고유한 크기와 두께가 정해져있음, 브라우저마다 다를 수 있음. -->
<h1>제목입니다</h1>
<h2>제목입니다</h2>
<h3>제목입니다</h3>
<h4>제목입니다</h4>
<h5>제목입니다</h5>
<h6>제목입니다</h6>
<!-- html에서 enter는 줄바꿈이 아니라 공백하나로 인지(띄어쓰기 1칸) -->
<!-- 줄바꿈 태그를 이용하여 줄 바꿈 <br> -->
body입니다. <br>
html 공부중
<!-- block / inline / inlineblock로 구분 -->
<!-- block :tag하나가 한줄을 차지하는 태그 -->
<!-- inline : tag하나가 본인이 가지고있는 글자만큼의 영역을 가지는 태그 -->
<!-- inline + block -->
<!-- span 태그 : 대표적인 인라인 태그중 하나 -->
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
<!-- p태그 : 대표적인 블록 태그중 하나 한 문단을 구분 -->
<p>p태그입니다. <br>
p태그입니다. <br>
p태그입니다. <br>
</p>
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
<!-- b, strong : 글자를 굵게 만드는 태그 인라인 태그 -->
<p>
<b>hello</b> hello <br>
<strong>Hi!!!</strong>
</p>
<hr>
<!-- ins : 밑줄을 그어주는 태그, del : 취소선 인라인 태그 -->
<p>
<ins>Hello</ins>
<del>Hi~~!!</del>
</p>
<hr>
<!-- sup: 위첨자, sub:아래첨자 -->
<p>
10<sup>2</sup>
log<sub>10</sub>
</p>
<!-- hr: 수평선 블록태그 -->
<!--i : 기울림꼴 -->
<i>기울림꼴</i>
<small>small</small>
</body>
</html>
📢실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>자기소개</h1>
<p>
안녕하세요 제 이름은
<b><ins>홍길동</ins></b>이고,
현재 <i>활빈당</i>에서 의적활동을 하고 있습니다.
</p>
<p>
특징으로는 아버지를 아버지<sub>서자라서ㅠㅠ</sub>라 부르지 못했고,
형을 형<del>(형이 나빠서)</del>이라 부르지 못했습니다.
</p>
<hr>
<h1>수학 문제</h1>
<p>문제 : 한변의 길이가 a인 정사각형의 넓이는?</p>
<p>답 : s = a<sup>2</sup></p>
</body>
</html>
'프론트엔드 > HTML' 카테고리의 다른 글
| a 태그 (0) | 2024.08.30 |
|---|---|
| select 태그 (0) | 2024.08.30 |
| textarea 태그 (0) | 2024.08.30 |
| input, form 태그(2) (0) | 2024.08.30 |
| input, form 태그(1) (0) | 2024.08.29 |