작성 일자 : 2024-04-01
<!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>
hello world!! // 입력 문구 예시
</body>
</html>
Live Server 설치
실행 결과
http://127.0.0.1:5500/home.html → 서버주소:포트번호/실행파일명
<meta>를 닫을 때 보통 <meta></meta>라고 해야 하지만, 간략하게 </meta> 대신에 ‘/>’로 사용해도 닫는 것으로 인식
div 속 텍스트 설정 / URL 링크 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>홈화면</title>
</head>
<body>
<div style="border: 2px solid #cccccc;
width: 700px;
margin: 20px auto 0px auto;
padding: 15px 15px 15px 15px"> <!-- border(테두리)
1px(선 두께)
solid(선 종류)
#cccccc(색상)
width(가로크기)
margin(중앙정렬(동서남북 순))
padding(패딩) -->
<div>
<h3>홈화면</h3> <!-- 'hN의 N은 폰트 크기(1~6까지)' -->
</div>
<a href="login.html">로그인</a>
<a href="join.html">회원가입</a>
<a href="board.html">게시판</a>
<!-- <a href=URL 링크 주소>링크 텍스트 표시</a> -->
</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>로그인</title>
</head>
<body>
<div style="border: 2px solid #cccccc;
width: 700px;
margin: 20px auto 0px auto;
padding: 15px 15px 15px 15px">
<div>
<h3>로그인</h3>
</div>
<div>
<label>아이디</label>
<input type="text" />
</div>
<div>
<label>암호</label>
<input type="password" />
</div>
<div>
<button>로그인</button>
<a href="home.html"><button>홈으로</button></a>
</div>
</div>
</body>
</html>
실행 결과