1. VS Code의 폴더를 설정
작업하기 희망하는 작업 경로 설정하기.
2. 파일 생성
작업할 파일 생성
1. index.html 파일 생성
웹상에서 www.웹사이트 주소/foler/ 에 해당하는 위치에 index.html, a.html, b.html 등의 파일이 있을 때
a.html, b.html과 같이 index.html이 아닌 이름의 파일로 작성된 페이지는
www.웹사이트 주소/folder/a.html 과 같이 끝에 정확한 파일명을 명시해야 하지만,
index.html로 작성한 페이지는 www.웹사이트주소/folder/ 만으로도 진입 가능하다.
즉, index.html은 웹상 특정 폴더의 기본 페이지라고 생각하면 된다.
2. HTML 작성
#2-1. HTML 기본 틀 작성
모든 HTML 파일에는 들어가야하는 기본 형식이 있다.
! -> TAB 입력
<!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>
</body>
</html>위와 같이 자동으로 기본 내용들이 자동으로 작성된다.
#2-2. 웹 페이지 내용에 입력될 언어에 맞게 코드 수정
자동으로 작성된 코드에서 언어를 수정한다.
lang = "en" -> "ko"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
#2-3. body 작성
웹 페이지 안에서 나타나야할 요소들은 <body> </body> 안에 작성.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
안녕하세요.
</body>
</html>위와 같이 작성 한 이후 VS Code에서 html 실행
위와 같이 웹페이지에 표시가 된다.
만약 아래와 같은 내용을 작성한다면?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
자, 이제 body 사이에다가
이걸 복사해서 붙여넣고 브라우저에서 확인해보세요.
여기서는 이렇게 줄바꿈도 되어 있고
이렇게 탭 도 들어가 있고
이 렇 게 길게 띄어쓴 부분도 있지만
브라우저는 쏘 쿨하게 씹어넘깁니다.
</body>
</html>
<body>안에 문단별로 나눠서 작성하고, 문자간 공간도 별도로 작성했지만,
출력되는 웹페이지를 보면 한 문장으로 되어있다.
문단별로 구분되며, 문자간에 공간이 별도로 적용된 결과물은 어떻게 볼 수 있을까 ?
아래와 같이 <br>, <p>와 같은 Tag들을 사용하여 문자 내용에 특수한 효과를 입힐 수 있다.
3. Tag
[원하는 결과]
- Tag 문법 -
| 태그 또는 구문 | 설명 | 비고 |
| <h1> ~ <h6> | 제목 | 숫자가 높을수록 작은 크기 |
| <p> | 문단 | 각각 줄바꿈이 됨 // p*N + tab 으로 자동 생성가능 |
| <br> | 줄바꿈 | 닫는 Tag 필요 없음. <br/>, <br />와 혼용되기도 함. // br*N + tab으로 자동 생성 가능 |
| <hr> | 가로줄 | 닫는 Tag 필요 없음 |
| | 공백 (스페이스) | 스페이스를 강제할 때 사용 |
#1. <h1> ~ <h6> : 제목 크기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>h1 제목</h1>
<h2>h1 제목</h2>
<h3>h1 제목</h3>
<h4>h1 제목</h4>
<h5>h1 제목</h5>
<h6>h1 제목</h6>
</body>
</html>[결과]
#2. <p> : 문단 구분
VS Code에서 p * 필요한 갯수 입력 후 Enter
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목 태그들과 문단 태그</h1>
<h2>용도에 적합한 태그 사용하기</h2>
p*6
</body>
</html>그럼 아래와 같이 변경됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목 태그들과 문단 태그</h1>
<h2>용도에 적합한 태그 사용하기</h2>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
</html>이제 <p> </p> 사이에 원하는 내용을 입력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목 태그들과 문단 태그</h1>
<h2>용도에 적합한 태그 사용하기</h2>
<p>페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용한다. 숫자가 높을수록 작은 크기의 제목이 된다.</p>
<p>본문은 문단별로 p 태그로 감싼다. p 태그끼리는 자동으로 줄바꿈이 적용된다. 문단에 관계없이 이처럼</p>
<p>원하는 횟수로 줄바꿈하기 위해서는 br 태그를 쓰면 된다.</p>
<p>위와 같이 hr 태크를 사용하면 가로줄을 표시할 수 있다.</p>
<p>이 렇 게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.</p>
<p>마지막으로, 여기서는 보이지 않지만 원본 보기에서 주석을 확인할 수 있다.</p>
</body>
</html>[결과]
위와 같이 <p> </p> 태그를 사용하여 내용 입력하면 <p>태그끼리 문단 구분이 된다.
#3. <br> : 줄바꿈
줄바꿈을 원하는 위치에서 <br> Tag를 입력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목 태그들과 문단 태그</h1>
<h2>용도에 적합한 태그 사용하기</h2>
<p>
페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용한다. <br>
숫자가 높을수록 작은 크기의 제목이 된다.
</p>
</body>
</html>[결과]
문단 간에 공간을 더 늘리고 싶다면 </p>와 <p> 사이에 <br>을 사용하여 줄바꿈 공간을 늘릴 수 있음.
<p>
본문은 문단별로 p 태그로 감싼다. p 태그끼리는 자동으로 줄바꿈이 적용된다. <br>
문단에 관계없이 이처럼
</p> <br>
<p>
원하는 횟수로 줄바꿈하기 위해서는 br 태그를 쓰면 된다.
</p>
#4. hr : 가로줄
<p>
본문은 문단별로 p 태그로 감싼다. p 태그끼리는 자동으로 줄바꿈이 적용된다. <br>
문단에 관계없이 이처럼 <br><br><br>
원하는 횟수로 줄바꿈하기 위해서는 br 태그를 쓰면 된다. <br>
br 태그는 열고 닫을 필요가 없는 몇 안되는 태그 중 하나인데, 남용하지 않는 것이 좋다.
</p>
<hr>[결과]
#5. : 문자 사이 공간
<p>
이 렇 게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.
</p>[결과]
#6. Ctrl + / : 주석 처리
<!-- 이 부분은 웹페이지에서는 안보임 -->
<!-- 이처럼, 코드에서만 볼 수 있는 텍스트를
'주석'이라고 한다. 위의 주석처럼 한 줄로도,
이 주석처럼 여러 줄로도 작성할 수 있다. -->[결과]
웹 페이지에는 안보이지만, 리소스 보기를 눌리면 확인 가능하다.
[결과]
<Script> 이후 부분은 VS Code에 설치했었던 플러그인들의 정보들이므로 신경쓸 필요는 없다.
<결론>
| 태그 또는 구문 | 설명 | 비고 |
| <h1> ~ <h6> | 제목 | 숫자가 높을수록 작은 크기 |
| <p> | 문단 | 각각 줄바꿈이 됨 // p*N + tab 으로 자동 생성가능 |
| <br> | 줄바꿈 | 닫는 Tag 필요 없음. <br/>, <br />와 혼용되기도 함. // br*N + tab으로 자동 생성 가능 |
| <hr> | 가로줄 | 닫는 Tag 필요 없음 |
| | 공백 (스페이스) | 문자간에 스페이스를 강제할 때 사용 |
'프론트엔드 학습 > HTML' 카테고리의 다른 글
| 6. HTML - 이미지 넣기 (0) | 2023.06.29 |
|---|---|
| 5. HTML - 용어와 정의 나열 (0) | 2023.06.28 |
| 4. HTML - 목록 표시 (0) | 2023.06.28 |
| 3. 인용_속성/특성 (0) | 2023.06.28 |
| 2. 종류와 중요도에 따른 태그 (0) | 2023.06.27 |
