새로 알게된 내용과 정리하고 싶은 부분 위주로 쓰겠습니다.
HTML
1. HTML TAG
h1은 한 페이지당 하나만 있어야 한다.
h2와 h1없이는 h3가 존재 할 수 없다.(태그로 글의 구조(?) 예측 가능)
글자의 크기는 중요하지 않음.
HTML이 유효하려면 HTML 형식으로 작성해야 함.
<!DOCTYPE html>: 브라우저에 이 문서가 html5를 사용하고 있음을 알려준다.
<html>: root element
<head>: meta data element: 페이지에 보이지 않는 요소를 포함(css, js, title, 폰트, 아이콘 .. 등)
<body>: 문서의 모든 내용을 포함하고, 단 하나만 있을 수 있다.
Vscode 단축키
ctrl shift p(command pallete) -> alt shift f(format)
alt shift up/down: 해당 줄 복사
alt shift left/right: 하나의 단위씩 선택
ctrl+/: 주석
속성: 태그에 부여할 수 있는 정보
-<a>: href속성은 모든 앵커태그에 필요 (인라인 태그)
1. href="google.com": google.com파일로 이동 (두 html파일 연결 가능)
2. href="http://www.google.com": http프로토콜을 사용하여 google.com 페이지로 이동
-<img>: 닫는 태그가 없다. <img src="~~~">
온라인상 또는 다운받은 이미지 모두 가능(url); 로컬, 웹상 모두 가능
alt 속성: text description of the image. 이미지 못불러오면 설명 나옴 or 스크린 리더가 읽을 수 있음.
2. HTML 시맨틱
HTML은 기본적으로 HTML의 작동 방식에 대한 지침
HTML5: HTML을 정의하는 가장 발전된 표준, 새로운 형태의 HTML로 브라우저 구현을 위한 새로운 요소와 속성을 포함, 여러 추가된 기술 있음
브라우저의 역할: HTML의 규칙에 따라 HTML을 작동시키고 구현함.(HTML표준에 따라 HTML을 브라우저에 구현)
-제네릭 컨테이너
<div>: 블록 요소. 콘텐츠를 그룹화하여 여러 콘텐츠를 하나의 그룹으로 다룰 수 있음!
<span>: 인라인 요소. div와 마찬가지로 하나의 그룹으로 묶어서 스타일 지정할 수 있음.
<sup></sup>: 위 첨자
<sup></sup>: 아래 첨자
-HTML entity 표현
부동호와 같은 예약문자를 HTML 엔티티로 표현 한다.
타이핑하기 어렵거나 브라우저가 인식하기 힘든 글자를 표시할 수 있게 해준다.
&로 시작하고 ;로 끝남 ex)
시맨틱 마크업
시맨틱: 의미와 관련된.
시맨틱 마크업: 요소 내용의 의미에 관련된 마크업(마크업에 의미 부여)
<divgt;는 의미X (제네릭 마크업)
대부분 <div>와 동일하지만 각자 의미를 가진다.
-시맨틱 마크업 장점
1. 크롤러가 빠르게 정보를 찾을 수 있다. 다른 어플리케이션 또는 코드와 더 잘 융합하기 위해서
2. 접근성면에서 스크린 리더를 쓰느 사람들이 코드에 더 쉽게 접근.
3. 가독성이 좋음. 유지보수 용이.
-시맨틱 요소
<div>를 대신할 수 있는 요소
사람마다 다르게 씀. 시맨틱 요소의 의미에 맞으면 된다.
<main>: 문서의 주요 내용 의미. 여러 페이지에서 반복되는 것은 포함되지 않음(사이드바, 네비게이션, 저작권 정보, 사이트 로고... 등)
<nav>: 페이지에서 네비게이션 링크를 제공 하는 부분. 같은 페이지의 다른 부분/사이트 이동
<section>: 시맨틱 요소 중 꽤 제네릭한 요소. 웹 사이트나 애플리케이션의 독립적인 부분을 나타냄. 내용의 한 부분, 웹 사이트의 독립적인 부분이어야 한다.
<article>: 문서 내의 독립적인 구성을 나타낸다.
<aisde>: 부수적인 사이드바나 말풍선 등... 추가적인 부분
<header>: 서론(?) 느낌. 주로 내용을 소개 하는 부분. nav요소를 포함하는 경우가 많다.
<time>: 시간이나 날짜를 의미하는 내용에 사용. 인라인 요소이고 datetime 속성을 명시해야 한다.
<figure>: 독립적인 내용을 나타내고 캡션을 추가할 수 있음.(<figcaption></figcaption>;
Emmet 활용
ttps://docs.emmet.io/abbreviations/syntax/
- nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>- ul>li.item$*5 => $이용하여 번호 넘버링
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>- a{click me} => 중괄호 안 내용
<a href="">Click me</a>3. HTML Table
-table은 레이아웃에 쓰는게 아니다. -table형식에 적합한 데이터를 보여주는 경우에 사용함. -<thead>, <tbody>, <tfootgt;으로 섹션을 구분한다.4. Form Element
-Form: 여러 개별폼 컨트롤을 품은 컨테이너, 그릅화된 모든 입력을 담는 상자(정보를 전송하기 위한 interactive controls을 포함하는 문서 부분)action 속성으로 폼을 제출 했을 때 데이터를 어디에 보낼지 정한다. <form action="/search/">: search로 데이터를 보냄
Form을 제출하면 HTTP 요청이 전송되고 action 속성을 사용하여 해당 요청이 어디로 가는지 제어 method 속성을 통해 어떤 종류의 HTTP메서드를 사용할지 선택(get/post) => 뒤에서 다룸!
Form은 입력 내용을 그룹화 한 뒤, 작은 라벨을 달아 목적지로 제출
Form 요소
-<input>: type속성으로 입력 방식 설정(text, password, color, time, radio, week, number, button...), placeholder속성
<input>과 <inputgt;을 연결하여 작성 함.(for-id)
<label for = "cheese">labeling</label>
<input type = "checkbox" name="cheese" id="cheese"> -<button>(버튼 레이블)</button>: 폼 안에서 버튼 클릭하면 기본 설정으로 form에 설정된 action으로 제출. 폼 밖에서는 X
but <button type="button"></button>: type을 button으로 설정하면 폼 내부에서도 더 이상 제출하지 않는다.
기본 type은 폼 안에서는 "submit", 밖에서는 "button"이다.
이름 속성
데이터가 서버로 전송될 때 데이터 안에 있는 값을 지칭하기 위한 것. 서버가 찾으려는 값(데이터를 서버로 전송할 때 사용되는 name)
get 요청: 데이터가 url에 표시되면서 전송
post 요청: 데이터가 url에 표시되지 않고 전송
=>둘 다 action에 지정한 곳으로 데이터를 url에 실어서 전송함.
checkbox, radio, range
input요소O
1. type="checkbox": 여러개 선택 가능. check상태일 때 form전송 시 name속성=on으로 전달되고 check가 아니면 아무것도 전달하지 않음.
2. type="radio": 각각의 input으로 radio버튼을 만들고, 동일한 name으로 연결해야 함.(이렇게 하지 않으면 하나만 선택할 수 없음). form 전송 시 name속성=on이라고만 전송 된다. => value속성 필요. value: 폼 제출시 서버에 전송되는 값. 각각의 radio input마다 달라야 한다.
3.type="range": min, max속성으로 최소, 최대 설정하고 value속성으로 초기값, step속성으로 증가량 설정한다. 여기서 value는 위의 radio에서 value와 다른 기능.
select, textarea
input요소X
1. <select>: select 태그 내부에서 option태그를 사용하여 요소 추가. form 전송 시 서버에는 value값을 보낸다.
<select name="meal" id="meal">
<option value="fish" selected>Fish</option>
<option value="veg">Vegetarian</option>
</select>- <textarea></textarea>: 여러 줄의 텍스트를 입력함. input과 마찬가지로 for, id로 <label>요소로 라벨링 가능.
rows="10" cols="40"과 같이 초기의 행, 열 수를 늘릴 수 있음.
placeholder=""설정 가능.
name속성으로 서버에 전송.
HTML5 폼의 유효성 검사
:빈칸, 대문자 포함, 특수문자 포함 여부, 공백 없는지 검사 등을 한다.
클라이언트, 브라우저단에서의 유효성 검사(빌트인 유효성 검사); 서버측 유효성 검사는 별개임.
required: 입력을 필수로 요구하는 항목
type="email": 이메일 패턴으로 입력이 되었는지 확인
type="url": url입력인지 확인
