HTML은 웹 페이지의 기본적인 형태를 만드는 코드이다.
비주얼스튜디오 코드(Visual Studio Code)를 설치했다.
설치후 새폴더를 'myhtml'란 이름으로 지정해 만들었다.
그 폴더에서 새 파일을 만들었다. HTML의 파일을 만들기 위해서는 'name.html'이라고 써야한다.
그 후 코드 입력창에 !를 작성하고 Enter을 치면 html의 기본 구조 템플릿이 생성된다.
*주석: <!--주석-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>html : 여러 태그들을 순서에 맞게 조합한 문서라고 생각하면 된다.
태그 (Tag) : <태그>내용</태그>
기본적으로 <head> tag와 <body>tag 가 있다.
<head> : 웹 사이트에 대한 정보, 외부 자료 참조(CSS, JS)
<body> : 실제 화면의 내용
<head>
<head>안에는 <title> tag가 있다.
<title> : 웹사이트의 제목을 지정하는 것
ex) <title>웹사이트 제목</title>
<!DOCTYPE html>
<html lang="en">
<head>
<title>웹사이트 제목</title>
</head>
</html><body>
<body>안에는 많은 tag들이 있다.
<div>tag : 여러개의 tag를 구역으로 묶거나 나눌때 사용한다.
* <div style="display:flex ;"> 이렇게 작성하면 두페이지로 나눌 수 있다.(내부의 div블록들이 가로로 나눠짐)
** flex는 css부분이다.
<h1> ~ <h6>까지의 tag는 주로 글의 제목이나 강조에 사용된다.
* 참고로 숫자 1부터 6까지는 글자의 크기 차이를 의미 한다. 숫자 1이 가장 크다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>웹사이트 제목</title>
</head>
<body>
<div>
<h1>글의 제목이나 강조</h1>
</div>
</body>
</html><p> tag : 문단을 넣을때 사용된다.
* tag 안에 style=" font-size: 40px;" 이걸 넣으면 폰트의 픽셀을 지정할 수 있다.
ex) <p style="font-size: 40px;"></p>
<strong> tag : 안에 문장을 넣어주면 텍스트가 강조(bold)된다.
<br/> tag : 줄을 바꿔준다.
<input> tag : 입력창을 의미한다. *내용이 없어서 닫는 taag는 불필요하다.
* tag안에 예를 들어 type="text"라고 적는데 여기서 type은 해당 tag의 속성을 말한다.
즉, type="text"의 뜻은 타입이라는 속성의 값이 텍스트임을 의미한다.(타입 속성의 값 = 텍스트)
ex) <input type="text" style="width: 500px; height: 100px; font-size: 50px;">
<button> tag : 페이지에 클릭 할 수 있는 버튼 생성
* style속성으로 크기나 색상을 변경할 수 있다.
ex) <button style="width: 250px; height: 100px; font-size: 50px;">버튼</button>
<a> tag : 다른 웹사이트로 이동해주는 링크를 거는 tag
* href 속성의 원하는주소를 넣어주면 된다. 그럼 페이지에 링크가 생긴다.
ex) <a href="https://www.gogle.com"> 구글로 이동</a>
<img> tag : 이미지를 넣어주는 tag로, 이미지 주소를 복사후 scr속성안에 링크를 집어 넣는 것이다.
alt는 이미지 불러오기 실패했을 때 이미지 대신 이 텍스트로 대체된다.
ex)
<img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
<ul>, <ol> tag : 안에 <li> tag를 넣고 그 안에 내용을 넣으면 워드에서 사용하는 것과 비슷하게 리스팅 된다. 둘다 리스팅에 사용된다. * <ol> tag는 <ul> tag와 다르게 자동으로 앞에 숫자 넘버링이 붙는다.
<ul style="font-size: 25px;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol style="font-size: 25px;">
<li>1</li>
<li>2</li>
<li>3</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>14</td>
<td>부산</td>
</tr>
</table>
<form> tag : 회원가입이나 로그인 같은 특정 정보들을 묶어서 하나의 폼으로 제출해야 할 때 사용된다.
* type 중 date는 날짜를 선택하는 기능을 가지고 있다.
<select> tag : 항목 선택을 위한 태그로 여러 선택지 중에 하나를 골라야 할 때 자주 사용된다.
* <ul> tag와 비슷하게 <select> tag가 여러개의 <option> tag들을 감싸는 형태이다.
** <select name> tag는 name 속성으로 이름을 지정한다. <select name = "이름">
*** <option> tag는 value로 전송 값을 지정해 줍니다. <option value="값">
이 부분은 html 상에서 보이는 부분은 아니지만 서버로 폼을 제출할 때, 이 값이 서버로 전송된다.
-> 통신에 관련 된 내용으로 일단 이정도까지만 알아두면 된다.
일반적으로 <form> tag 내에서는 작성한 정보를 제출하기 위한 버튼을 넣게 된다.
이때 사용되는 버튼의 type를 submit으로 지정한다. <button type="submit"> </button>
어디로 제출되도록 하는지는 JavaScript로 하게된다.
ex)
<form>
<input type="text" style="font-size: 30px;">
<input type="email" style="font-size: 30px;">
<input type="password" style="font-size: 30px;">
<input type="date" style="font-size: 30px;">
<input type="checkbox" style="font-size: 30px;">체크박스</input><br/>
<select name="coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">에스프레소</option>
</select>
<div>
<button type ="sumit" style="font-size: 30px;">완료</button>
</div>
</form>
-전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>웹사이트 제목</title>
</head>
<body>
<div style="display:flex ;">
<div>
<h1>H1</h1>
<p style="font-size: 40px;">
<strong>
안녕하세요
</strong>
<br/>
반갑습니다!
</p>
<input type="text" style="width: 500px; height: 100px; font-size: 50px;">
<div>
<button style="width: 250px; height: 100px; font-size: 50px;">버튼</button>
<button style="width: 250px; height: 100px; font-size: 50px;">버튼2</button>
</div>
<a href="https://www.gogle.com"> 구글로 이동</a>
</div>
<div>
<h1> 두번째 블록</h1>
<img src="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
<ul style="font-size: 25px;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol style="font-size: 25px;">
<li>1</li>
<li>2</li>
<li>3</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>14</td>
<td>부산</td>
</tr>
</table>
</div>
<div>
<h1> 세 번째 블록 </h>
<form>
<input type="text" style="font-size: 30px;">
<input type="email" style="font-size: 30px;">
<input type="password" style="font-size: 30px;">
<input type="date" style="font-size: 30px;">
<input type="checkbox" style="font-size: 30px;">체크박스</input><br/>
<select name="coffee">
<option value="1">아메리카노</option>
<option value="2">카페라떼</option>
<option value="3">에스프레소</option>
</select>
<div>
<button type ="sumit" style="font-size: 30px;">완료</button>
</div>
</form>
</div>
</div>
</body>
</html>
- 웹사이트 화면
참고영상 - [웹개발 입문] HTML 핵심만 배우기
