공부 메모
HTML 기초/기본 개념 공부
Hicecream
2023. 9. 18. 22:30
바탕화면에 "html 공부" 새폴더를 생성해주고
Visual Studio Code에서 해당 폴더를 열어준다.
파일을 index.html로 생성해주고 빈 코드 창에 ! + tab 또는 enter를 누르면 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>
</body>
</html>
필요 없는 부분은 다 지워준다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
<head> 태그 - 웹 사이트에 대한 정보, 외부 자료 참조 (css, js)
<body> 태그 - 실제 화면의 내용
태그 사용 방법 : 태그와 닫힘 태그 사이에 내영 넣기
<태그> 내용 </태그>
<title> 제목 </title>
title 태그는 말 그대로 웹사이트의 제목
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
</body>
</html>
body에 들어갈 태그들
1. H1 ~ H6 까지 태그
주로 글의 제목이나 강조를 위해 사용되는 태그
1부터 6까지의 숫자는 글자의 크기 차이를 의미 (1이 가장 큼)
실행 화면을 보는 방법은 먼저 바뀐 코드를 저장(Ctrl + s) 해주고
해당 폴더를 열어주면 index.html이 크롬으로 연결되어 있는데 이것을 클릭해주면 된다.
2. p 태그
문단을 넣을 때 사용되는 태그
태그 안에 긴 텍스트를 집어 넣은 다음에 브라우저에서 확인하면 작성한 텍스트들이 있다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
</body>
</html>
3. input 태그
입력창을 의미
내용이 없기 때문에 닫는 태그가 필요없다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
<input type="text">
</body>
</html>
텍스트를 입력할 수 있는 네모박스 공간이 생겼다.
코드에서 type은 해당 태그의 속성
type = "text"의 뜻은 type이라는 속성의 값이 text임을 의미한다.
4. button 태그
말 그대로 버튼
페이지에 클릭할 수 있는 버튼이 생긴다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
<input type="text">
<button>버튼</button>
</body>
</html>
5. style 속성
입력 창의 크기를 키우고 싶다?
텍스트 크기가 너무 작아서 키우고 싶다?
버튼을 추가하고 싶다?
등등
html의 태그들은 style 속성으로 외형을 커스터마이징 할 수 있다.
여기서 크기나 색상 등을 변경할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
<input type="text" style="width: 500px; height: 100px;">
<button>버튼</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
<input type="text" style="width: 500px; height: 100px; font-size: 50px">
<button style="width: 200px; height:100px; font-size: 50px;">버튼</button>
</body>
</html>
버튼을 하나 더 추가했더니 가로로 추가가 되었다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
<input type="text" style="width: 500px; height: 100px; font-size: 50px">
<button style="width: 200px; height:100px; font-size: 50px;">버튼</button>
<button style="width: 200px; height:100px; font-size: 50px;">버튼2</button>
</body>
</html>
그런데 위의 버튼을 라인을 바꾸어 세로로 추가하고 싶다면?
6. div 태그
여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그이다.
버튼들을 별도의 div에 집어넣어 구역을 나눌 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다 이것은 아주 길고 긴 텍스트입니다
</p>
<input type="text" style="width: 500px; height: 100px; font-size: 50px">
<div>
<button style="width: 200px; height:100px; font-size: 50px;">버튼</button>
</div>
<div>
<button style="width: 200px; height:100px; font-size: 50px;">버튼2</button>
</div>
</body>
</html>
두 개의 버튼이 별도의 줄로 나뉜 것을 확인할 수 있다.
같은 div에 넣으면 같은 줄로 버튼이 배치된다!
7. br 태그
줄 바꿈 태그
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>
안녕하세요.
감사합니다.
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
</div>
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
</body>
</html>
p 태그의 내용을 바꿔 봤더니 코드 상에선 줄 바꿈을 했는데
페이지에선 줄바꿈이 적용되지 않았다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>
안녕하세요.<br />
감사합니다.
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
</div>
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
</body>
</html>
8. strong 태그
strong 태그 안에 문장을 넣어주면 텍스트 강조 (굵은 글씨)가 된다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
</div>
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
</body>
</html>
9. a 태그
다른 웹 사이트로 가는 링크를 걸어주는 태그
href 속성에 원하는 주소를 넣어주면 된다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<h1>H1</h1>
<p>
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
</div>
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</body>
</html> |
 |
10. div 태그 응용
페이지 블록 나누기
div 태그 안에 나눌 태그들을 모아 넣고 전체 태그를 하나의 div 태그로 다시 묶는다.
이 div 태그에 display: flex을 넣어준다. (이건 css 내용이므로 설명은 생략.. 자식 요소들의 정렬을 제어할 수 있다고 함)
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
</div>
</div>
</body>
</html>
내부의 div 블록들이 가로로 나뉘는 것을 볼 수 있다.
11. img 태그
구글에서 이미지를 검색하여 이미지 주소 복사를 누르고
img의 src 속성 안에 해당 링크를 집어넣는다.
alt 속성은 이미지 불러오기가 실패했을 때
이미지 대신 이 텍스트로 대체된다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML 로고 이미지">
</div>
</div>
</body>
</html>
12. ul & ol 태그
둘 다 리스팅에 사용된다.
ul 태그 안에 li 태그를 넣고 그 안에 내용을 넣으면
워드에서 사용하는 것과 비슷하게 리스팅이 가능하다.
- ul은 점 넘버링
- ol은 숫자 넘버링
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML 로고 이미지">
<ul style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</div>
</div>
</body>
</html>
13. table 태그
주로 표를 만들 때 사용된다.
ul, ol과 비슷하게 table 태그 안에 내용이 되는 태그를 집어넣는다.
tr은 테이블의 한 행을 의미
첫 행에는 th 즉, 테이블 헤더를 칸 수에 맞게 배치한다.
그리고 다음 tr 안에는 td 태그로
테이블의 내용을 헤더 칸 수에 맞게 배치해주면 된다.
마지막으로 caption 태그로 테이블의 이름을 정해주면 테이블이 완성된다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML 로고 이미지">
<ul style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<table summary="테이블" style="width:300px; height:200px;">
<caption>테이블 이름</caption>
<tr>
<th>이름</th>
<th>나이</th>
<th>지역</th>
</tr>
<tr>
<td>자두</td>
<td>12</td>
<td>서울</td>
</tr>
<tr>
<td>민지</td>
<td>11</td>
<td>부산</td>
</tr>
</table>
</div>
</div>
</body>
</html>
14. form 태그
form 태그는 회원가입이나 로그인 같이 특정 정보들을 묶어서
하나의 폼으로 제출해야 할 때 사용되는 태그이다.
하나의 form 태그 안에 3개의 input 태그를 넣어보았다.
type은 해당 <input> 태그인 입력창이 어떤 정보를 입력 받을 지에 대한 속성이다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML 로고 이미지">
<ul style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<table summary="테이블" style="width:300px; height:200px;">
<caption>테이블 이름</caption>
<tr>
<th>이름</th>
<th>나이</th>
<th>지역</th>
</tr>
<tr>
<td>자두</td>
<td>12</td>
<td>서울</td>
</tr>
<tr>
<td>민지</td>
<td>11</td>
<td>부산</td>
</tr>
</table>
</div>
<div>
<h1>세 번째 블록</h1>
<form>
<input type="text" style="font-size: 20px;">
<input type="email" style="font-size: 20px;">
<input type="password" style="font-size: 20px;">
</form>
</div>
</div>
</body>
</html>
순서대로 text, email, password로 배치를 했는데
password 타입을 가진 입력창은 입력한 글자가 보이지 않는다.
email 타입은 일단 form 태그 내에 button 태그를 넣어보자.
일반적으로 form 태그 내에서는 작성한 정보를 제출하기 위한 버튼을 넣게 되는데
이 때 사용되는 버튼의 type을 submit으로 지정한다. <button type="submit" />
그러면 해당 버튼을 눌렀을 때 폼의 내용들이 제출된다.
어디로 제출 될지는 javascript로 하는 것!
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML 로고 이미지">
<ul style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<table summary="테이블" style="width:300px; height:200px;">
<caption>테이블 이름</caption>
<tr>
<th>이름</th>
<th>나이</th>
<th>지역</th>
</tr>
<tr>
<td>자두</td>
<td>12</td>
<td>서울</td>
</tr>
<tr>
<td>민지</td>
<td>11</td>
<td>부산</td>
</tr>
</table>
</div>
<div>
<h1>세 번째 블록</h1>
<form>
<input type="text" style="font-size: 20px;">
<input type="email" style="font-size: 20px;">
<input type="password" style="font-size: 20px;">
<div>
<button type="submit" style="font-size: 20px;">제출</button>
</div>
</form>
</div>
</div>
</body>
</html>
아까 만들었던 email 타입의 입력창이 알림을 띄운다.
이메일 주소의 형태가 아님을 알려주는 것!
그러면 이메일 주소의 형태로 바꿔보자.
완료를 누르면 제출이 완료되고 내용들은 다시 리셋이 된 것을 확인할 수 있다.
 |
 |
date 타입을 가진 입력창도 추가해서 보면 날짜를 선택하는 기능을 가지고 있다.
checkbox 타입은 선택/해제 할 수 있는 체크박스가 생성된다.
<div>
<h1>세 번째 블록</h1>
<form>
<input type="text" style="font-size: 20px;">
<input type="email" style="font-size: 20px;">
<input type="password" style="font-size: 20px;">
<input type="date" style="font-size: 20px;">
<input type="checkbox" style="font-size: 20px;">
<div>
<button type="submit" style="font-size: 20px;">제출</button>
</div>
</form>
</div> |
 |
15. select 태그
select 태그는 항목 선택을 위한 태그이다.
여러 선택지 중에 하나를 골라야 할 때 자주 사용된다.
ul 태그와 비슷하게 select라는 태그가 여러개의 option 태그들을 감싸는 형태인데
select 태그는 name 속성으로 이름을 지정해주고 option 태그는 value로 전송 값을 지정해준다. 이 부분은 html 상에서 보이는 부분은 아니지만 서버로 폼을 제출할 때 값이 서버로 전송되게 된다.
<div>
<h1>세 번째 블록</h1>
<form>
<input type="text" style="font-size: 20px;">
<input type="email" style="font-size: 20px;">
<input type="password" style="font-size: 20px;">
<input type="date" style="font-size: 20px;">
<input type="checkbox" style="font-size: 20px;">
<select name="coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">밀크커피</option>
</select>
<div>
<button type="submit" style="font-size: 20px;">제출</button>
</div>
</form>
</div>
end
휴... HTML 처음 배워보는데 생각보다 단순하긴 하다.
벨로그로 포스팅 할 때 마크다운도 접해봐서 그런지 완전 생소한 것도 없었고 나름 빨리 익힌 것 같아서 뿌듯하다.
하지만 아직 모르는 개념들이 많이 있겠지..! 차근차근 알아가면서 여기 글에 그대로 추가할 계획이다.
포스팅 내용 출처
아케이코딩님의 유튜브 영상 링크 입니다!
https://www.youtube.com/watch?v=rgI930gqdaY
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
</head>
<body>
<div style="display: flex;">
<div>
<h1>H1</h1>
<p style="font-size: 20px;">
안녕하세요.<br />
<strong>
감사합니다.
</strong>
</p>
<input type="text" style="width: 200px; height: 100px; font-size: 30px">
<div>
<button style="width: 100px; height:50px; font-size: 30px;">버튼</button>
<button style="width: 100px; height:50px; font-size: 30px;">버튼2</button>
</div>
<a href="https://www.google.com">구글로 이동</a>
</div>
<div>
<h1>두 번째 블록</h1>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" alt="HTML 로고 이미지">
<ul style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ol style="font-size: 25px;">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<table summary="테이블" style="width:300px; height:200px;">
<caption>테이블 이름</caption>
<tr>
<th>이름</th>
<th>나이</th>
<th>지역</th>
</tr>
<tr>
<td>자두</td>
<td>12</td>
<td>서울</td>
</tr>
<tr>
<td>민지</td>
<td>11</td>
<td>부산</td>
</tr>
</table>
</div>
<div>
<h1>세 번째 블록</h1>
<form>
<input type="text" style="font-size: 20px;">
<input type="email" style="font-size: 20px;">
<input type="password" style="font-size: 20px;">
<input type="date" style="font-size: 20px;">
<input type="checkbox" style="font-size: 20px;">
<select name="coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">밀크커피</option>
</select>
<div>
<button type="submit" style="font-size: 20px;">제출</button>
</div>
</form>
</div>
</div>
</body>
</html>