웹은 하나의 기술로 동작하는 시스템이 아니고 여러 개의 기술이 서로 협력해서 웹이라고 하는 거대한 시스템을 동작하는 것이기 때문에 HTML을 제대로 공부하기 위해서는 웹에 대한 전반적인 흐름, 분위기를 알고 있으면 수월하게 공부할 수 있다.
| HTML = HyperText / Markup / Language = 웹브라우저에 표시되는 웹 페이지를 만들어달라고 컴퓨터에 요청하는 언어 = 우리가 만들고 싶은 웹페이지가 있을 때 그 웹페이지가 어떻게 생겼고, 어떤 정보를 가지고 있어야 하는지 웹 브라우저에 명령할 때 사용하는, 우리도, 웹 브라우저도 이해할 수 있는 언어 |
| HyperText = 웹 브라우저를 통해 어떤 웹 페이지를 보면 언제나 '링크'가 있다. 이 '링크'라고 하는 기능이 HyperText다. |
| Markup = HTML은 컴퓨터 프로그래밍 언어인데 이 Markup이라고 하는 문법적인 형식, 문법적인 특성을 가지고 있는 컴퓨터 프로그래밍 언어라는 뜻이다. = HyperText를 가장 중요한 특징으로 하는 Markup 형식의 컴퓨터 프로그래밍 언어가 HTML이다. |
| Language = 컴퓨터를 제어하는 서로가 이해할 수 있는 약속 |
태그 tag
= HTML에서 가장 중요, 기본적인 문법이고, HTML이라는 컴퓨터 언어를 규정하는 가장 중요한 특징이다.
= HTML의 Markup이 태그와 아주 밀접한 관계를 가지고 있다.
<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
<a target="_blank" href="https://ko.wikipedia.org/wiki/도널드_커누스" title="전설적인 프로그래머">도널드 커누스</a>)
각각의 항목들을 리스트로 표현하기
<li>기술 소개</li>
<li>기본 문법</li>
<li>하이퍼 텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
성격이 다른 항목 구분하기
<ul>
<li>기술 소개</li>
<li>기본 문법</li>
<li>하이퍼 텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ul>
<ul>
<li>최진혁</li>
<li>한유람</li>
<li>한이람</li>
<li>한이은</li>
</ul>
순서가 있는 리스트로 분류하기
<ol>
<li>기술 소개</li>
<li>기본 문법</li>
<li>하이퍼 텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<ul>
<li>최진혁</li>
<li>한유람</li>
<li>한이람</li>
<li>한이은</li>
</ul>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>
| <title>, <meta> = 문서의 본문에 해당되는 정보는 아니지만 문서 자체를 꾸며주는 역할을 한다. <head> = html의 위에 있는 부가적인 정보와, 밑에 있는 본질적인 정보를 각각 다른 태그에 담도록 약속된 태그 = 본문이 아닌 <title>, <meta> 태그는 꼭 <head> 태그 안에 넣도록 약속되어 있다. <body> = 본문인 <h1>, <ol> 태그는 <body> 태그 안에 들어온다. <html> = 호용 범위가 큰 <head>와 <body>를 감싸는 가장 큰 태그 |
웹 사이트 만들기
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href="1.html">기술소개</a></li>
<li><a href="2.html">기본문법<a/></li>
<li><a href="3.html">하이퍼텍스트와 속성</a></li>
<li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</body>
</html>
| <p> 태그 = paragraph, 단락을 표현할 때 사용 = 어디서부터 어디까지가 하나의 단락이라는 것을 알려줄 때, 단락의 시작과 끝에 <p> 태그를 감싸준다. |
<br> 태그
= 줄바꿈 태그
= 단락 구분을 표현할 때는 <p> 태그 쓰는 게 더 바람직함
<img> 태그
<html>
<body>
<img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">
</body>
</html>
| src = 이미지 이름 height = 이미지 높이 크기 alt = 이미지가 깨졌을 때 표시되는 값 (= alternative text) title = 마우스 커서를 올렸을 때 나오는 툴팁 |
표 : <table> 태그
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
<tr>
<td>최진혁</td> <td>남</td> <td >청주</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>청주</td>
</tr>
</table>
</body>
</html>
<table>
<tr>
<td>
</td>
</tr>
</table>
표 : 병합
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>
| <td rowspan = "2"> = 세로로 2줄 병합(행) |
| <td colspan = "3"> = 가로로 3줄 병합(컬럼) |
form 기본
= 사용자가 입력한 정보를 서버로 전송할 때 사용하는 것
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>
| <form action = "http://localhost/login.php"> = 로그인 버튼을 눌렀을 때 데이터가 전송되는 서버 |
| <name> = 각각의 컨트롤을 구분할 수 있도록 하는 태그 = 각각의 이름 값으로 데이터가 전송된다. |
form : 문자 입력
여러가지 <form> 태그들 중 text를 입력하는, 입력 받는 태그에 대해 알아보자.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<p>password : <input type="password" name="pwd" value="default value"></p>
<p>textarea :
<textarea cols="50" rows="2">default value</textarea>
</p>
</form>
</body>
</html>
|
<p>textarea :
<textarea cols="50" rows="2">default value</textarea>
</p>
|
| <textarea> = 여러 text의 값을 입력 받을 수 있는 태그 <textarea cols="50" rows="2"> = '가로 50', '세로 2' 만큼의 값을 입력받도록 함 <value> = 기본적으로 입력되어 있는 값 |
form : dropdown list
= 제한된 공간 안에서 여러개의 선택지를 선택할 수 있도록 하는 기능
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 (다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>
| <form action="http://localhost/color.php"></form> = 아래의 태그들을 모두 포괄하는 태그 = 제출 버튼 누를 시 명시된 데이터로 전송한다. |
| <select name="color2" multiple></select> =태그를 묶는 태그 = multiple로 여러 개의 option을 선택할 수 있도록 한다. |
| <option value="black">검은색</option> = color=black이 창에 입력 됨 |
form: radio, checkbox
= 사용자들에게 여러 개의 선택지 중 하나 또는 여러 개를 선택해서 제출할 수 있도록 하는 기능
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>
| radio = option 중 하나만 선택 됨 checkbox = 다중 선택 가능 |
제출 버튼 누를 시
name = value 순으로 링크에 표시 됨
form : hidden
= 눈에 보이지 않지만 서버 쪽으로 어떤 데이터를 전송할 때 사용
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html>
form : label
form : method
form이라고 하는 것은 사용자가 입력한 정보를 서버 쪽으로 전송하는 방법이다.
사용자가 브라우저에 입력한 정보를 제출 버튼을 누르면 특정한 서버의 url로 전송하는 것이 form의 특징이다.
데이터를 전송하는 방법은 여러가지가 있는데, 지금까지 사용한 방법은 get 방식을 쓴 것이다.
그 외에도 여러가지 방법이 있다.
get과 post 방식이 어떻게 다른지 살펴보자.
이 내용은 서버 쪽 관련된 기술을 알고 있어야지만 제대로 이해할 수 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/method.php" method="post">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="submit">
</form>
</body>
</html>
| get = url을 통해 데이터를 전송하는 방식 (데이터가 url에 표시 됨) post = url이 아닌 다른 방식으로 데이터를 숨겨서 전송하는 방식 |
form : 파일 업로드
= 파일을 선택하는 ui를 만드는 것은 <input> 태그다.
= 파일 업로드는 서버 쪽이 꼭 들어가야 함.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
</body>
</html>
<input type="file" name="profile">
위와 같이 파일을 업로드 하는 기능이 하나라도 있다면
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
다음과 같이 method와 enctype을 지정해야 함
HTML - font
= 퇴출 된 태그
HTML - meta 태그
= 어떤 데이터가 있으면 그 데이터를 설명하는 태그
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="생활 코딩의 소개 자료"> //웹 페이지 정보 요약
<meta name="keywords" content="코딩, coding, 프로그래밍"> //웹 페이지 키워드
<meta name="author" content="egoing"> //웹 페이지 저자
</head>
</html>
| 인코딩 encoding = 데이터를 컴퓨터에 저장하는 과정 디코딩 decoding = 저장되어 있는 정보를 꺼내서 화면에 표시하는 과정 |
HTML - 검색 엔진 최적화
검색 엔진
= 소프트웨어가 사이트에 브라우저처럼 접속해 HTML 파일을 다운로드 받아 거기에 있는 정보를 해석해 자기들의 필요, 기준에 따라 그것을 분류해 사용자들이 검색한 것에 가장 적합한 컨텐츠를 제공하는 것.
검색 엔진 최적화
= 컨텐츠가 잘 해석할 수 있도록 하는 것
HTML - HTML5의 새로운 제출 양식1
<input type>
= 우리가 의도하는 정보만을 입력하도록 규제하는 기능
= type이 무엇이냐에 따라 더 세부적인 규제를 할 수 있다.
= 사용자가 유효하지 않은 정보 입력 시 제출 버튼 누를 때 거부
<body>
<form action="form.php">
<input type="number" name="age" min="10" max="15"> // 10~15 이외 값 입력 차단
<input type="submit">
</form>
</body>
HTML - HTML5의 새로운 제출 양식2
<body>
<form action="form.php">
<input type="number" name="age" min="10" max="15"> // 10~15 이외 값 입력 차단
<input type="date" name="datev">
<input type="month" name="monthv">
<input type="week" name="weekv">
<input type="time" name="timev">
<input type="email" name="emailv">
<input type="search" name="searchv">
<input type="tel" name="telv">
<input type="url" name="urlv">
<input type="submit">
</form>
</body>'HTML' 카테고리의 다른 글
| <form> 태그의 GET/POST (0) | 2022.06.26 |
|---|