Contents
HTML(Hyper Text Markup Language)HTML(Hyper Text Markup Language)
웹 페이지를 만들 때 사용하는 언어, 태그(<>)를 사용하여 만든다.
HTML 파일명 정하기
- 파일 이름에 확장자를 붙인다.
- 영어 사용하기.
- _ ,- 를 제외한 특수문자는 사용하지 않는다.
- 띄어쓰기 하지 않는다.
- 파일명은 소문자로 한다.
### live server 플러그인 설치하기 : 실시간으로 저장된 내용을 반영해 브라우저에 띄워줌
HTML 작성 방법
기본적으로 시작태그, 내용, 종료태그의 구성으로 이루어 진다. 하지만 상황에 따라서 종료 태그가 없는 경우도 있다.
<태그이름>내용</태그이름>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
문자 작성 시 enter를 사용해 다음줄에 작성해도 다음줄로 넘어가지 않는다.
<!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>
Helloworld
Bye
Hello My name is cos
</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>
<span>Hello</span>
<div>Bye</div>
<div>World</div>
</body>
</html>
<h1>~<h6> : 제목 태그
<!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>제목1</h1>
<h3>제목3</h3>
<h5>제목5</h5>
</body>
</html>실행 결과
<img> : 이미지를 출력
<!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>
<img src="https://i.namu.wiki/i/yaJpstKfFhhpZhZj4vy7es8sq7TjmR2YfIbeq82PMPH-Oje8vkFK5sEHpLV4JTrEMjgtJubRSp70Cb1psIfffMgCg7JaH-EvoCxMFiS0MA0fV6QoxuxbPSIPgBbk5UPCx6aYVGb9jyrqEL4sXZucrw.webp">
</body>
</html>실행 결과
<a> : 링크 생성하기
<!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>
<div>이상혁은 <a href="https://namu.wiki/w/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C%20%EC%9B%94%EB%93%9C%20%EC%B1%94%ED%94%BC%EC%96%B8%EC%8B%AD">리그오브레전드 챔피언십</a> 4회 우승을 하였다.</div>
</body>
</html>실행 결과
<ul> : 순서없는 목록
<li> : 목록의 항목
<!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>
<ul>
<li>계란 3개</li>
<li>간장(2큰술)</li>
<li>맛술(1큰술)</li>
<li>소금(조금)</li>
</ul>
</body>
</html>실행 결과
<ol>:
<!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>
<ol>
<li>계란을 잘 풀고, 조미료를 넣어줍니다.</li>
<li>계란말이팬에 잘 풀은 계란을 1/4만큼 조금씩 넣어줍니다.</li>
<li>반숙 상태가 되면 젓가락으로 조금씩 안쪽으로 말아줍니다.</li>
<li>이를 반복해서 끝까지 잘 구워줍니다. </li>
</ol>
</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>
<table border="1">
<tr>
<th>플랜 이름</th>
<th>요금</th>
</tr>
<tr>
<td>두근두근 플랜</td>
<td>월정액 29000원</td>
</tr>
<tr>
<td>콩닥콩닥 플랜</td>
<td>월정액 19000원</td>
</tr>
</table>
</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>
<table border="1">
<tr>
<th>셀 1</th>
<th>셀 2</th>
</tr>
<tr>
<th>셀 3</th>
<th>셀 4</th>
</tr>
<tr>
<th>셀 5</th>
<th>셀 6</th>
</tr>
</table>
</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>
<table border="1">
<tr>
<th colspan="2">셀 1</th>
</tr>
<tr>
<th>셀 3</th>
<th>셀 4</th>
</tr>
<tr>
<th>셀 5</th>
<th>셀 6</th>
</tr>
</table>
</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>
<table border="1">
<tr>
<th>셀 1</th>
<th>셀 2</th>
</tr>
<tr>
<td rowspan="2">셀 3+5</td>
<th>셀 4</th>
</tr>
<tr>
<td>셀 6</td>
</tr>
</table>
</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>
<form action="example.php" method="post" name="contact-form">
여기에 입력 양식을 넣습니다.
</form>
</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>
<input type="text" placeholder="이름">
</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>
성별:
<input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자" checked> 여자
<input type="radio" name="gender" value="그 외"> 그 외
</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>
좋아하는 색:
<input type="checkbox" name="color" value="붉은색" checked> 붉은색
<input type="checkbox" name="color" value="파란색"> 파란색
<input type="checkbox" name="color" value="노란색"> 노란색
<input type="checkbox" name="color" value="초록색"> 초록색
</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>
<input type="submit" value="전송">
<div><input type="image" src="images/button.png" alt="전송"</div>
</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>
혈액형
<select name="bloodtype">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
<option value="모름">모름</option>
</select>
</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>
혈액형
<select name="bloodtype">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
<option value="모름">모름</option>
</select>
<textarea name="message">메시지 입력</textarea>
<textarea name="message"placeholder="메시지 입력"></textarea>
</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>
<input type="checkbox" name="travel" value="국내" id="korea">
<label for="korea">국내</label>
<input type="checkbox" name="travel" value="유럽" id="europe">
<label for="europe">유럽</label>
<input type="checkbox" name="travel" value="동남아시아" id="asia">
<label for="asia">동남아시아</label>
</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>내일은 흐린 뒤 맑을 예정입니다.</p>
<h2>추천 스타일</h2>
<p>따뜻하지만 일교차가 있으므로 걸쳐 입을 옷을 함께 준비해주세요.</p>
<article>
<h1>내일의 날씨</h1>
<p>내일은 흐린 뒤 맑을 예정입니다.</p>
</article>
<section>
<h2>추천 스타일</h2>
<p>따뜻하지만 일교차가 있으므로 걸쳐 입을 옷을 함께 준비해주세요.</p>
</section>
</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>
<header>
<h1>페이지 제목</h1>
<p>웹 개발 업계의 최신 정보를 소개하는 사이트입니다.</p>
</header>
</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>
<header>
<h1>페이지 제목</h1>
<nav>
<ul>
<li><a href="#">서비스 소개</a></li>
<li><a href="#">비용 정보</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>기사 제목</h2>
<p>[최신 스마트폰 정보] 새로운 모델이 발표되었습니다.</p>
</article>
<section>
<h2>추천 기사</h2>
<ul>
<li><a href="#">스마트 워치를 사야 할까?</a></li>
<li><a href="#">공부할 때 함께하면 좋은 스마트 기기</a></li>
</ul>
</section>
</main>
<aside>
<h3>콘텐츠 작성자</h3>
<p>이 웹 사이트에서 글을 쓰고 있는 mana입니다. 잘 부탁드립니다!</p>
</aside>
<footer>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
<p>Copyright 2019 Mana</p>
</footer>
</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>
<div>
<img src="phone1.jpg" alt="스마트폰 사진">
<p>정면 사진</p>
</div>
<div>
<img src="phone2.jpg" alt="스마트폰 사진">
<p>세 가지 종류의 색상</p>
</div>
</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>
<style>
table{
border-color: #ED0000;
border-width: 4px;
border-style: solid;
border-collapse: collapse;
}
td{
border-color: grey;
border-width: 4px;
border-style: solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th style width="250" height="30">날짜</th>
<th style width="150" height="30">방송사</th>
<th style width="250" height="30">방송명</th>
<th style width="150" height="30">역할</th>
<th style width="250" height="30">비고</th>
</tr>
<tr>
<th colspan="5" height="30" bgcolor="#ED0000" style="color: white">2018년</th>
</tr>
<tr>
<th style height="30">11월 19일</th>
<th style height="30"><img src="https://i.namu.wiki/i/e9S7C_xFhRWKPFP-M_8meKjzj_DfPjHLhXSe1QZyx3dXTGcf8f4SdrbG45O2gb_kQkxQzhqN0Vg7MPU6rSViaPxQpo00mPvu7OnUwWlUtlllmIJJyoIkd0EHhmBKod_xqAGLNf4AXZ69rdCTzWLvzQ.svg" width="50"></th>
<th style height="30"><a href="https://namu.wiki/w/%EB%8C%80%EA%B5%AD%EB%AF%BC%20%ED%86%A0%ED%81%AC%EC%87%BC%20%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94">대국민 토크쇼 안녕하세요</a></th>
<th style height="30">게스트</th>
<th style height="30">389회</th>
</tr>
<tr>
<th colspan="5" height="30" bgcolor="#ED0000" style="color: white">2020년</th>
</tr>
<tr>
<th style height="30">1월 1일</th>
<th style height="30"><img src = "https://i.namu.wiki/i/ceO9m0KQel-K841YNp4EYgiBQ2SCL5jkeez9ICJQqMJ1fJ8L82Nu-gPj_BYzH_ZLrfqTK_ptHumEPXoiD-04qhcvzaw7PF8tVMqRUleUeUC7U9KtX1AMPggG5Z91IFETG_2v2dH1DhuAgZB4LE_QeA.svg" width="50"></th>
<th style height="30"><a href="https://namu.wiki/w/%EB%9D%BC%EB%94%94%EC%98%A4%20%EC%8A%A4%ED%83%80(%ED%99%A9%EA%B8%88%EC%96%B4%EC%9E%A5)">라디오 스타</a></th>
<th style height="30">게스트</th>
<th style height="30">650회</th>
</tr>
<tr>
<th style height="30">1월 20일</th>
<th style height="30"><img src="https://i.namu.wiki/i/e9S7C_xFhRWKPFP-M_8meKjzj_DfPjHLhXSe1QZyx3dXTGcf8f4SdrbG45O2gb_kQkxQzhqN0Vg7MPU6rSViaPxQpo00mPvu7OnUwWlUtlllmIJJyoIkd0EHhmBKod_xqAGLNf4AXZ69rdCTzWLvzQ.svg" width="50"></th>
<th style height="30">더 드리머</th>
<th style height="30">게스트</th>
<th style height="30">1회</th>
</tr>
<tr>
<th style height="30">9월 30일</th>
<th style height="30"><img src="https://i.namu.wiki/i/J7ASfbha0VmLAvZLbJYE2jvsIJJtPmnR8q2tGXgHp4dMI93c-mbAgxhBdG0NkNpldOlTqK4UKt4jY0oSKIfO0w.svg" width="50"></th>
<th style height="30"><a href="https://namu.wiki/w/%EC%9C%A0%20%ED%80%B4%EC%A6%88%20%EC%98%A8%20%EB%8D%94%20%EB%B8%94%EB%9F%AD">유 퀴즈 온 더 블럭</a></th>
<th style height="30">게스트</th>
<th style height="30">74회</th>
</tr>
<tr>
<th colspan="5" height="30" bgcolor="#ED0000" style="color: white">2023년</th>
</tr>
<tr>
<th style height="30">12월 20일</th>
<th style height="30"><img src="https://i.namu.wiki/i/J7ASfbha0VmLAvZLbJYE2jvsIJJtPmnR8q2tGXgHp4dMI93c-mbAgxhBdG0NkNpldOlTqK4UKt4jY0oSKIfO0w.svg" width="50"></th>
<th style height="30"><a href="https://namu.wiki/w/%EC%9C%A0%20%ED%80%B4%EC%A6%88%20%EC%98%A8%20%EB%8D%94%20%EB%B8%94%EB%9F%AD">유 퀴즈 온 더 블럭</a></th>
<th style height="30">게스트</th>
<th style height="30">224회</th>
</tr>
<tr>
<<th colspan="5" height="30" bgcolor="#ED0000" style="color: white">2024년</th>
</tr>
<tr>
<th style height="30">1월 27일</th>
<th style height="30"><img src="https://i.namu.wiki/i/4LW4IeRLclO-JKDh7s0sqa6mU_9aIWgU2vZP9q49tCrElGWcaUzydtauFw7OAwRmg0M27CcCMlXh75_h5rMUZkbhdDYYiLEEx_yhmZIeORG5mDvQ7CSIVNLSNZPBsmXUHEnirdmXc1E1zbtC4eb1pg.svg" width="50"></th>
<th style height="30"><a href="https://namu.wiki/w/%EC%95%84%EB%8A%94%20%ED%98%95%EB%8B%98">아는 형님</a></th>
<th style height="30">게스트</th>
<th style height="30">418회</th>
</tr>
</table>
</body>
</html>
Share article
![[CSS]Grid](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-01-29T08%3A29%3A42.567Z-3d8743d9-aad8-4141-b13a-99fc36b580d0&w=750&q=75)
