이 포스팅은 생활코딩 및 드림코딩의 유튜브강의를 기반으로 작성했습니다.
자료 사이트
1. w3schools
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself » CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: ce
www.w3schools.com
2. HTML 통계
www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
3. MDN
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML
HTML 소개 - Web 개발 학습하기 | MDN
HTML은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조
developer.mozilla.org
HTML란
Hyper Text Makeup Language (Hyper Text : 링크라고 생각)
HTML 문법
<tag></tag>
하이퍼텍스트와 속성
<a href="http://www.naver.com" target="_blank" title="포털사이트">네이버</a>태그 명만으로는 정보가 부족 -> 속성이 필요 (ex. a태그 안에 href 속성)
-> 속성에 대한 인자나 값은 ""
a : anchor
href : hypertext reference
title : 마우스를 호버하면 설명
target : 링크 클릭 시 창을 어떻게 열지 (_self, _blank)
-> 기본적인 태그를 알아놓고 속성에 대해서 구글링하면서 사용하면 됨
태그 중첩
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>ol : ordered list
ul : unordered list
li : list
cf) ol>li*3
문서의 구조
<html>
<head>
<title>문서의 구조</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
</ol>
</body>
</html>head : 문서 정보를 다루는 태그
body : 문서 본문을 다루는 태그
html : head와 body를 포함하는 태그
DOCTYPE
<!DOCTYPE html>
<html>
...
</html>DOCTYPE : 문서 형식 선언(Document Type Declaration like #!/bin/bash)
- 선언된 페이지의 HTML 버전이 무엇인지 웹 브라우저에게 알려주는 선언문 역할
- 예전 HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 했음
- 현재 브라우저들의 표준 모드를 활성화하기 위해 최소한의 형태로 유지됨
- html5가 정형화 되면서 단일화되었기 때문에 html로 선언
간단한 예제
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">HTML</a></h1>
<ol>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
</ol>
<p>... HTML ...</p> <!-- 이부분을 바꿔주면 됨 -->
</body>
</html>
주요 태그 알아보기
- 아래부터 주요 태그를 알아볼 예정, 암기할 필요보다는 이러한 것이 있었다를 알아두는게 더 중요
p - 단락
<p>paragraph</p>
br - 줄바꿈
HTML<br>CSS
img - 이미지
<img src="img.jpg" width="300" height="300" title="이미지이름" alt="이미지이름">src : url or path
width, height : style (css에서 주로)
title : hover일 때 설명
alt : 이미지가 로딩이 안될 때 설명 (alternative)
table - 표
<table border="1">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>김말봉</td> <td rowspan="2">남</td> <td>서울</td> <td>11</td>
</tr>
<tr>
<td>홍길동</td> <td>고흥</td> <td>13</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>24</td>
</tr>
</tfoot>
</table>
td : table data
th : table header data
tr : table row
thead, tbody, tfoot : 시각적인 변화는 없으나 HTML은 정보를 담기위한 그릇이므로 표현하는 것이 좋음 (안하면 브라우저가 알아서 함)
-> cf) thead, tbody, tfoot의 순서를 막 섞어놓아도 브라우저가 알아서 순서 맞춰서 표로 만들어줌
rowspan, colspan : td의 속성 row, col기준으로 병합시킴
form과 여러태그들 (*매우 중요)
- 글자를 입력하거나 무언가를 선택하는 것, 사용자의 입력을 서버로 전송하기 위한 태그
<form action="http://localhost/login.php">
<p>아이디 :<input type="text" name="id" value="default id"></p>
<p>패스워드 :<input type="password" name="pwd" value="default pwd"></p>
<input type="submit" value="제출하기">
</form>form 태그
- action 속성 : form에 대한 정보를 넘기는 곳, 제출하는 곳
input 태그
- type 속성 :text or password or submit or button or etc
- name 속성 :get or post방식으로 넘길 때 인자이름, 구분자
- value 속성 : 각 type에 맞는 디폴트값을 설정, 사용자의 입력값도 value임
ex) https://URI?name=value
textarea 태그
<form action="http://localhost/text.php">
<p>textarea : <textarea name="txt" cols="30" rows="10">default text</textarea> </p>
<input type="submit" value="제출하기">
</form>
- 여러줄을 입력하기 위한 태그
- default value는 태그 사이에 입력
- cols, rows 같은 속성들은 텍스트편집기나 IDE의 힘을 빌리면 좋음
- 마찬가지로 사용자가 textarea에 입력한 값을 name으로 넘김 (띄어쓰기는 +로 넘김)
select와 option 태그
<form action="http://localhost/getcolor.php">
<select name="color" multiple>
<option value="red">빨간색</option>
<option value="blue">파란색</option>
<option value="black">검은색</option>
</select>
<input type="submit">
</form>- select > option
- multiple을 사용해서 다중선택을 가능하게 하나 ctrl키를 입력한 상태로 선택해야 하므로 사용자를 고려하지 못함
-> 그래서 checkbox사용
input 태그 type의 radio & checkbox
<form action="http://localhost/ratioandchecbox">
<p>단일 선택</p>
<p><input type="radio" name="color" value="red">빨강</p>
<p><input type="radio" name="color" value="blue" checked>파랑</p>
<p><input type="radio" name="color" value="black">검정</p>
<p>다중 선택</p>
<p><input type="checkbox" name="size" value="95" checked>95</p>
<p><input type="checkbox" name="size" value="100" checked>100</p>
<p><input type="checkbox" name="size" value="105">105</p>
<input type="submit">
</form>- radio는 라디오버튼처럼 생김, 단일선택(구분을 name으로 함)
- checkbox는 다중선택
- 둘 다 checked 속성 사용가능
다양한 버튼
<form action="http://localhost/kindsofbutton">
<input type="text">
<input type="submit" value="제출">
<input type="button" value="버튼" onclick="alert('HelloWorld')">
<input type="reset" value="텍스트 초기화">
</form>- submit 타입 : 입력된 value를 들고 제출함
- button 타입 : js와 주로 사용됨, 예시로 onclick 이벤트
- reset 타입 : 입력된 사용자의 정보를 초기화 시킴
hidden 타입으로 사용자에게 안보이는 데이터 전송
<form action="http://localhost/kindsofbutton">
<input type="text" name="id">
<input type="hidden" name="hide" value="hide_value">
<input type="submit">
</form>- 사용자에게 숨기고 싶은 값도 넘길 수 있음
- js로 어떠한 로직을 작성하고 연산결과로 얻은 값을 hidden으로 보내면 될 듯
label로 컨트롤
<form action="http://localhost/kindsofbutton">
<label for="color1">빨간색</label>
<input id="color1" type="checkbox" name="color" value="red"><br>
<label>빨간색
<input type="checkbox" name="color" value="red">
</label>
</form>- 컨트롤과의 상호작용 범위를 늘릴 수 있음
1) label 태그의 속성 for, 연결시킬 태그의 속성 id를 연결함
-> label태그 안쪽에 있는 value를 눌러도 연결한 태그와 상호작용함
2) label 태그 안쪽에 연결 시킬 태그를 중첩하기
- label로 멀리 있는 태그들을 연결 시킬 수도 있는 것
method
<form action="index.php" method="post">
<p>아이디 :<input type="text" name="id"></p>
<input type="submit">
</form>- 데이터를 전송하는 여러가지 방법
- 대표적으로 get, post
- get은 url로 전송, post는 그것을 감추고 패킷에 넣어 전송
- get방식이 간단하지만 보안적으로 post가 좋음 (url에 아이디패스워드가 노출될 수 있기 때문)
- form의 디폴트는 지금까지 본 것처럼 get방식임
- 어떠한 규정이나 표준이 없는 상태에서 form을 작성한다면 post로 작성하는 것이 좋음
파일업로드
<form action="http://localhost/upload.php"
method="POST" enctype="multipart/form-data">
<input type="file" name="f">
<input type="submit">
</form>- 서버와 큰 관련
- 프론트엔드 단에서는 그냥 폼만 만들어주면 됨
- post방식이어야 함
- enctype="multipart/form-data"는 알아둘 것
정보로서의 HTML
HTML이 웹이 성장하면서 정보를 담는 그릇이 됨
font태그 : 퇴출됨, 시각정인 폰트는 정보를 담는 HTML와는 어울리지 않음 -> CSS
meta태그 (*중요)
<head>
<meta charset="utf-8">
<meta name="description" content="생활코딩 HTML 정리">
<meta name="keywords" content="HTML, 코딩, 프로그래밍, 정리">
<meta name="author" content="malbong">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>- 해당 웹페이지를 설명하는 태그
- charset, name(description, keywords, author), http-equiv ...
의미론적 태그
- 문서의 정보를 보다 잘 표현하기 위해서 의미에 맞는 태그 사용
- 시각적인 변화는 없지만 구조에 의미를 분명히 하기 위해 의미론적 태그 (semantic element)를 정의해서 사용
- header, footer, nav, article, main ... 애매하면 section
검색엔진 최적화
- 기본적으로 HTML코드를 의미론적 태그로 잘 작성해야 함
- 과하게 검색엔진에만 초점을 맞추면 검색엔진이 스팸으로 처리 할 수도 있음
- 현재는 필요 없으니 요약도 하지 않음, 흘려보기
- 필요할 때 강의 + 구글검색엔진 최적화 하는것이 더 좋을 듯 opentutorials.org/course/2039/10995
웹 개발자 도구
F12 or 우클릭 + 검사 로 실행
모바일 크기에 맞춰서 볼 수 있음
CSS를 살펴볼 수 있음, js를 콘솔로 볼 수도 있음
Network 탭에서 브라우저가 다운받는 상황이나 지연상태를 볼 수 있음
모바일 지원 viewport
웹페이지가 작은 화면에서도 잘 표현될 수 있게 하는 방법
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>차이점
iframe 태그
<body>
오픈튜토리얼<br><iframe src="http://opentutorials.org" width="560" height="315"></iframe><br><br>
유튜브<br><iframe width="560" height="315" src="https://www.youtube.com/embed/U7dVziwSrQI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>웹페이지에 다른 웹페이지를 삽입하는 방법
유튜브도 공유 -> 퍼가기 -> 소스코드 복사를 하면 iframe임
편리하면서도 위험한 방법 (신뢰할 수 없는 웹페이지가 악성코드를 포함할 수 있기 때문)
-> iframe에 관련된 보안을 모른다면 사용하지 않는 것이 좋음
이래서 HTML5에서 sandbox라는 것을 도입 (iframe에 삽입된 페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법)
-> submit같은 버튼도 동작하지 않음, 아래 예시
<!-- js_attack.html -->
<body>
<script>
alert("Attack!!!");
</script>
</body>
<!-- iframe.html -->
<body>
<iframe src="js_attack.html" sandbox></iframe>
</body>
video 태그
<body>
<video controls>
<source src="./tmp.mov">
<source src="./tmp.ogv">
<source src="./tmp.mp4">
</video>
<video controls src="./tmp.mov"></video>
</body>브라우저마다 호환이 가능한 동영상 확장자가 있음
source 태그에 있는 동영상 파일중에 호환성이 좋은 파일하나를 고름
Can I use 사이트
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
새롭게 도입된 기술 혹은 쓰이지 않는 태그등을 찾아볼 때 유용한 사이트
-> 그냥 구글링 해도 됨
HTML5의 입력양식
추가된 입력양식 (많음)
<body>
<form action="input.html">
숫자만 입력<input type="number" min="5" max="10" name="num">
색상<input type="color" name="color">
슬라이더<input type="range" min="0" max="10">
<input type="submit">
</form>
</body>input type이 매우 다양함, 사용할 때 구글링이 더 좋음 (html input type : www.w3schools.com/html/html_form_input_types.asp)
-> email, number, url, color, date, month, week, time, range, search, tel ... etc
모바일브라우저에서 input type이 number라면 숫자키보드를 꺼내줌
사용 할만한 input타입의 속성들
- 개발자 도구를 이용하거나 구글링을 하면 됨
<body>
<form action="input.html" autocomplete="on">
<input type="text" placeholder="아이디 입력" autofocus>
<input type="password" autocomplete="off">
<input type="submit">
</form>
</body>- form에서 autocomplete(자동완성)속성을 키거나 끄거나, form내부의 input에서 autocomplete을 끄거나 키거나...
- placeholder로 도움말
- autofocus로 웹페이지 오자마자 포커싱시키기 (커서) 등등
입력된 값 체크
- 물론 input type이나 min,max로 걸러낼 수 있으나 더 상세한 속성이 존재
- required 속성 : 해당 input에 꼭 입력 되어 있어야 함
- pattern 속성 + "정규표현식" : 정규표현식에 맞아야 함
cf) 생활코딩 정규표현식 강의
정규 표현식이란? - 생활코딩
정규표현식 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이
opentutorials.org
'WEB 공부 > HTML & CSS' 카테고리의 다른 글
| CSS 정리하기 (0) | 2021.01.08 |
|---|
