Doctype & document structure
<!DOCTYPE html> HTML DOCUMENT 중에서 어떤 VERSION 을 쓸 것인지 선언해 주는것.
<html> 루트 태그 안에는 <head>, <body>태그만 들어갈 수 있다.
<title> 문서의 대제목 역할 / 검색 최적화에 중요한 역할
<link> css 스타일시트를 첨부하는 태그, 폰트를 쓸때에도 사용할 수 있다
<style> html 내에서 스타일을 주고 싶을때 쓸 수 있음
<script> 자바스크립트를 첨부할 때 사용, body 태그 안에서도 마지막에 넣어야 한다.
<meta> 뷰 포트 작성할 때 사용할 때, 디바이스가 다양해짐에 따라 그 중요성이 높아짐.반응형을 만들기 위해 필수
HTML 시맨틱 마크업의 중요성
코드를 의미있게 짜면 유지보수가 쉬워지고 검색 최적화에도 도움이 된다.
브라우저는 정보의 중요도를 마크업을 통해 파악하므로 의식의 흐름이 아닌 사고를 통한 코드를 짤 수 있어야 한다.
기본적으로 TAG를 해부해보자면
<P attribute = "value"> </p>
의 형태로 이루어져 있는데 atribute(속성)을 통해 추가적으로 의미를 전달할 수 있다.강조를 위한 <em>, <strong>
스타일링을 위한 것 보다는 브라우저에게 중요도를 전달하는 의미가 있다.
Anchor 태그
<a href= "주소">링크 </a>여기서 href(hypertext reference)를 작성하는 방법은
url, id값, 메일주소<a ref="mailto:메일주소">, <a ref="tel:전화번호> 등이 있다.
또한 a 태그 안에 target="_blank"를 넣어주면 새탭을 열고 이동하게 된다.
이미지(img)
img 태그 안에 들어가야 하는 att 요소로는 src(source)와 alt(대체텍스트) 가 있다. src 안에 들어가는 이미지 주소는 http로 시작하는 이미지 주소일 수도 있고 ./폴더명/이미지이름.확장자 처럼 내 컴퓨터상의 상대 경로일 수도 있다.
List
<ol> ordered list 로 요리법,실시간 검색어 등 순서가 중요한 경우
<ul> unordered list 순서가 중요하지 않을 때.
<li> 무조건 ol 이나 ul 의 직계가족요소로 와야 하는 태그.
만약 a나 img 태그를 쓰고 싶다면 li 태그 아래에 넣어야 한다.
정의 목록 (Description List)
<dl></dl> 용어를 정리할때, 혹은 key:value로 정보를 전달할 때 사용한다.
<dt> : decription term li 와 마찬가지로 dl 태그 안에 들어가야 한다. 용어의 key 값.
<dd> : description datadt 태그 뒤에 오는 것이 좋다. value, key 에 대 한 설명이다.
인용(Quotations)
<blockquote></blockquote> 문단 등 큰 덩어리의 인용을 할 때 사용
<q></q> 비교적 짧은 문장을 인용할 때 사용
<cite></cite>는 인용한 출처를 써줄 때 사용하는데 blockquote 의 attr 값으로 줄 수도 있다.
ex)<blcockquote cite="url"> </blockquote>
div & span
사실상 아무런 의미가 없으나 css 를 위해 단락을 짓는 용도로 사용하는 경우가 많다.
Form
<form> 태그는 사용자로부터 정보를 input 받기 위한 태그로서 특히 문법에 주의해야 한다.
<form action="API주소" method="GET OR POST">
처리해야 할 API 주소를 백엔드에서 받아서 넣게 된다.
1. <input> 태그/ 필수 att: type
정보를 받기 위한 입력창 필드를 생성할 때 사용하게 된다.
<input tpye="text"> 입력창 생성
placeholder="" 입력창 기본문구 설정
maxlength="" or minlength="" 작성할 수 있는 최대 or 최소 문자열 길이 제어
required 무조건 입력해야 할때
disabled 사용할 수 없도록 막아둘 때
value="" 기본값, 복사 가능
2. <input type="emeil"> 무조건 @가 포함된 메일주소를 적게 하고 싶을 때
<input type="password"> 입력하는 문자가 볼수 없게 처리됨
<input tpye="url"> url 주소만 입력할 수 있음
<input type="number"> 문자 x 숫자만 입력가능,
min="", max="" 로 속성값을 주어 최대, 최소 입력 가능한 숫자 범위를 지정햘 수도 있다.
<input type="file"> 파일 첨부, 속성값으로 accept="확장자" 를 줄 수 있다.
3. <label></label> 태그
반드시 사용하지 않아도 되는 부가적인 태그이나 input 태그의 폼 양식에 이름을 붇어줄 때 사용할 수 있다.
<label for="인풋 id"></label>
어떤 input 태그와 연결되어 있는지 지정을 해줘야 하기 때문에 먼저 input 태그에 id 값을 주고 동일한 id 값을 label 태그에 for 를 이용해서 작성해준다.
4. <input type="radio"> 여러가지 항목 중 하나만 선택할 때 사용
- 정확하게 작성하기 위해서는 label 태그를 함께 이용해 주는 것이 좋다.
- 마찬가지로 여러 항목을 주고 싶을 때에는 name 속성을 이용해서 그룹핑을 해줘야 한다.
- value 값도 꼭 주어야 하는데 이는 서버에 사용자가 어떤 값을 선택했는지 정보를 구분해서 줘야 하기 때문이다. 따라서 name, id 와 달리 항목별로 다른 value를 주어야 한다.
ex) <input type="radio" id="subscribe">
<label for="subscribe" name="subscription" value="yes"> 구독중</label>
<label for="subscribe" name="subscription" value="no">미구독</lable>
5. <input type="checkbox">
작성 방법은 radio 태그와 동일하나 다중선택이 가능하다는 점만 다르다.
6.<select name=""></select>
select 함수 내부에 <option value="">옵션1</option> 을 이용해서
선택할 수 있는 창을 만들 때 사용한다.앞서와 마찬가지로 name, value 를 통해서 서버에 정보가 전달될 수 있게 해야 한다. 동일한 벙법으로 label태그도 사용가능
7. <textarea></textarea>
input type="text" 보다 많은 양의 글을 맏기 위한 필드를 생성할 때 사용한다.
동일한 방법으로 label 태그 사용 가능
8. <button type=""> 내용</button>
반드시 button(가장 무난), submit(제출용도), reset 등의 type 을 정해주어야 한다.table 태그
작성방법
<table>
<thead> : 무조건 사용하는 것은 아니나 추천하는 항목: head를 선언해줌
<tr> table row : 가로줄을 만들 것을 선언
<th>테이블 헤더(제목)</th>
<th>테이블 헤더(제목</th>
<th>테이블 헤더(제목</th>
</tr>
</thead>
<tbody> : 마찬가지로 추천하는 항목
<tr>새로운 row 만들것을 선언
<td>테이블내용</td>
<td>테이블내용</td>
<td>테이블내용</td>
</tr>
</tbody>
<tfoot>최종합계, 최종결론 등이 들어갈 수 있다.
</tfoot>
<table>table 심화
2줄을 병합하고 싶을 때 <td rowspan="2" >로 속성을 주고 두번째 줄에서는 이미 병합되어있기 때문에 skip 하면 된다.
마찬가지로 칸을 병합할 때는 <td colspan="2"> 를 쓰면 된다.
scope = "row/col" 속성
header를 줄 때 가로줄의 헤더인지 세로줄의 헤더인지 속성을 줄 수 있다.
<th scope="row>"</th>
<th scope="col"></th> 와 같이 작성한다.MEDIA 파일
먼저 Editor에서 미디어 파일이 들어있는 폴더를 업로드한다.
작성법은 이미지태그와 동일하다.
audio
<audio src="경로" controls ></audio>
라는 속성을 주면 재생,음량조절 등이 가능한 controler 가 삽입됨.
autoplay 속성 : 컨트롤러 없이 바로 재생됨
loop 속성 : 반복재생
<audio> 안에서 바로 src 속성을 주지 않고 태그 내부에 <source = src"" type="">태그 여러개를 이용하는 방법이 있는데 이것은 브라우저에 따라 지원하는 오디오 포멧이 다를 수 있기 때문이다.
video
<video> 태그 또한 <audio> 태그와 동일하게 사용할 수 있다.iframe
<iframe src="">다른 html 을 임베드 하고 싶을 때 사용한다.
attribute 로 width, height 등을 사용할 수 있다.
-abbreviation (약자)
<abbr title=""> 약자에 대한 설명을 해주고 싶을 때</abbr>마우스over을 하면 title 의 내용이 나타나게 된다.
Address
<address>주소</address>pre & code 태그
<pre></pre> pre-formatted 미리 포맷이 정해졌다는 의미. 내가 작성한 그대로 나타나게 하고 싶을 때.
<code></code> 코드를 작성할 때
pre태그와 code태그를 작성하는 경우가 많다. code 의 indent를 표현할 수 있기 때문.vscode 에서 소스 코드 정렬하는 방법
ctrl + a = 로 전체 영역 선택 후
Ctrl + K + F = 자동정렬
Aria 속성
시각으로 웹을 이용하지 못하는 사용자가 스크린 리더를 사용하여 웹을 이용할 때 도움을 주기 위한 속성
< a href="" aria-label="Go to Previous page">
스크린리더에서 읽지 못하게 하고 싶을 때 :
< aria-hidden="true"> 속성을 준다.
아이콘/폰트
css 적용이 엄청 느리게 되는 이유는 뭔지 모르겠다.
처음엔 코드에 문제가 있거나 오타가 있어서 그런줄 알았는데 일정 시간이 지나면 아무렇지 않게 적용이 되는데 이건 vscode 나 브라우저에서 확인할때나 똑같이 일어난다.
