[용어정리] Part2 HTML | Learn the basics | HTML시멘틱구조

Front-end 로드맵 따라하기

(요약) 키워드로 알아보기

HTML(Hypertext Markup Language)란?
- 문서의 구조와 정보 위계가 명확하게 보이는 아름다운 HTML코드를 작성해야한다.
- 프로그래밍 언어X ,우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
-HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업한다

※ 들어가기앞서, 강조의 말.

웹페이지의 모든 것의 시작은 HTML에서 비롯된다 (얘가없으면 브라우저를 열었을때 뭔가 볼수가없다!)
예) image파일, .pdf파일 등 모든것이 개발자 도구로 확인하면 태그로 보인다.
이는 즉, 웹페이지에 보이는 모든 것들은 기승전 HTML태그의 결과물!

Semantic Markup :

'의미의, 의미가있는' 구조에 잘 맞게 작성한다 (시멘트하게 마크업을한다라고 표현한다)
이렇게 의미있게 작성을 해놓으면, 브라우저가 전달하고자하는 콘텐츠가 어떤게 중요하고, 어떤게 덜 중요한지를 더 정확하게 파악 할 수록 검색엔진최적화(Search Engine Optimizaion)에 아주 큰 도움이된다.
내가 HTML 마크업한것이 브라우저에서 조금은 다른 스타일로 나와도 이건 모두 style즉, css의 영역이기 때문에 이런건 중요하지않고, 어떤 태그를 썼을때 그 태그를 보고 브라우저로 하여금 알게하는것에 중요도를 두자.
브라우저는 정보의 위계질서(중요도)를 파악할 때 사람의 언어를 직접 이해한 후 중요도를 판단하는 것이 아니라, 우리가 HTML마크업을 한 중요도를 알 수 있는것이다. 이 중요도가 바로 검색엔진에 반영이 되는 것이다.

더 알아보기

다양한 태그와 웹 표준에 맞는 올바른 사용법을 익힌다.
협업을 위해서, 나를위해서 필요하다.
브라우저한테 확실하게 메시지를 전달하자!

HTML 주요 내용 :

1) 꺽쇠에서 시작해서 꺽쇠에서 끝나는 <태그>
2) 태그의 성격을 조금 더 디테일 하게 주고싶을때 attribute을 통해 추가적인 정보를 제공한다.

HTML 목차 (필요한 태그 ctrl+F로 찾기) :

제목과 문단 Heading & Paragraph

강조 Emphasis

링크 Anchor

이미지 Image

리스트 List

정의 목록 Description List

인용 Quotations

인용 Div & Span

제목과 문단 Heading & Paragraph

태그<tag>	속성(attribute)	설명
h1, h2, h3, h4, h5, h6		Headings 태그 - 제목으로 총 6개지 종류 (문단에 대한 주제를 Headings태그 적용)
p		Paragraph - 문단

강조 Emphasis

태그<tag>	속성(attribute)	설명
em, strong		Emphasis -강조

링크 Anchor

태그<tag>	속성(attribute) (반드시 명시 해야하는 attr)	설명
a	href(hypertext reference주소값)	Anchor-링크 (내가 이동하고자 하는 '주소값' 명시)

href주소값 표기 방법

1) 웹URL  
<a href="https://naver.com">Naver</a>

2) 페이지 내 이동
<a href="#Hello">here Go hello</a>
...
<section id="Hello">...</section>

3)메일쓰기<a href="mailto:메일주소"></a>
<a href="mailto:thxjek@gmail.com">MI개발꽃 이메일보내기</a>

4)전화걸기 ex. 전화번호눌렀을때 바로 통화연결이 되는경우
 <a href="tel:01000000000">MI개발꽃 전화걸기</a>
 
5)target
<a href="https://naver.com" target="_blank">Naver</a>

이미지 Image
(뒤에 미디어 파일에서 또 나옴) -> 너무 자주사용해서 앞으로 우선 빼뒀음

태그<tag>	속성(attribute) (반드시 명시 해야하는 attr)	설명
img	src(source) , alt(altrnative text)대체텍스트	Image-링크 (내가 이동하고자 하는 '주소값' 명시)

※ 웹을 사용하시는 분들중에 앞을 못보시는 사용자들도 있다.

혹은 인터넷상황이 좋지않아서 이미지를 볼 수 없을 수도있다.

그런분들을 위해 screen reader(스크린리더)라는 즉, 웹을 읽어주는 그런 도구가있는데,
"이 이미지는 뭐뭐뭐야~~~"라고 알려주는 텍스트이다.

리스트 List (HTML에서 목록을 사용하고 싶을 때 사용)

태그<tag>	속성(attribute)	설명
ol (신호탄 선언)		ordered list-순서가 중요한 목록 ex. 요리법 , 실시간 검색어 등
ul (신호탄 선언)		unordered list-순서가 중요하지 않은 목록
li (리스트항목 나열)		list item-항목 표시

※ Syntax Alert :
ul과 ol의 자식요소는 무조건 li만 가능 즉, 자식요소로 div , a 택그들은 절때 사용 할 수 없다.

❓질문 : ( 항목이 링크를 줘야 할 경우는 어떤게 맞는 방법일까? )

<ol>
    <a>
    	<li>MI개발꽃</li>
    </a>
    <li>
    	<a>프론트엔드 개발</a>
    </li>
</ol

1. a 태그로 list태그를 감싼다.

2. list안에다가 a태그를 감싼다

정답은 2번이다.

왜냐면 ol이랑 ul의 직계자식의 요소는 다른 요소가 될 수 없다. list-item이 무조건 와야한다.

(유용)정의 목록 Description List

사용 용도 2가지 :

1. 용어를 정의할 때 사용하는 정의 리스트

2. key-value로 정보를 제공 할 때

태그<tag>	속성(attribute)	설명
dl (신호탄 선언)		description list
dt		description term - {key : value} 중에 key(용어)에 해당
dd		description data
dfn		definition- 사전적으로 좀 더 구체적 정의를 내리고 싶을때 dt가 용어를 나타내는 약자 였는데 얘 말고,dfn라는 애를 사용.

※ dl태그 안에는 무조건 dt, dd태그가 따라와줘야한다.
dl의 자식요소는 오직div, dt, dd만 가능하다.

예)

인용 Quotations

태그<tag>	속성(attribute)	설명
blockquote	cite="가져온 출처"	어떤 문단이라던가 내용전체가 하나의 인용문일 경우에 사용한다. (q 보다 훨씬 많이 사용)
cite		인용을 어디서 했는지 알려줄때 사용 즉, blockquote의 출처 가 된다.
q		문장내에서 살짝 들어가는 인용문 같은 것을 사용할때

인용 Div & Span

※ 아무런 의미가 없다. (단호)

다만, 스타일링할때 요소를 묶어야 할때가 있는데, 그럴때 유용한 애들이다.

Form Syntax Alert 문법주의

※위에까지 배웠던 태그들은 사용자에게 정보를 올바르게 제공하는것에 집중을했었다 즉, 목적이 다르다.

Form - 기본구조, Input, Label, Radio&Checkbox, Select & Option, Textarea

태그<tag>	속성(attribute) (반드시 명시 해야하는 attr)	설명
form	action="API주소", method="GET\|POST"	Form은 사용자로부터 인풋Input을 받기 위한 태그
<input /> 닫는 태그 없다.	type="?" (? 안에는 number, text, email 등) 이 외 더 넣을 수 있는 속성 : placeholder="안내문구", maxlength="제한하고싶은 숫자", minlength="~이상이 되어야함" required (무조건 입력해야됨) disabled (사용못하게 막음) value="초기값 설정"	입력창===인풋 필드(Input field) ✨Input에 대한 각각의 다른 type을 살펴보기 email, password, url, file (accept=".png,.jpg" 허용하는 파일 확장자명 설정) number(min max를 사용해서 ~세 이상 ~세 이하 설정)
label	for="누구를위한label이야"	폼 양식 필드들에 이름을 붙이는 태그 부가적인 태그 (반드시 사용해야하는건 아니다)
input, label태그와 같이사용	radio <input />사용시, name, value 속성 반드시 추가 (서버한테 전달하기위함) 예) name="소속설정"	라디오박스 (둘중에 하나만 선택)
input, label태그와 같이사용	checkbox name, value 속성 반드시 추가 (서버한테 전달하기위함)	여러개 선택 가능(다중 선택)
select(option 같이사용)	name속성 반드시 추가 (서버한테 전달하기위함)	name으로 option에 있는 리스트를 같은그룹으로 묶음
option(select 같이사용)	value속성 반드시 추가 (서버한테 전달하기위함)	Select의 풀다운메뉴 리스트를 만들기위해서 사용
textarea		여러줄에 걸쳐 많은 양의 글을 받을 때 사용
button	type="?" 예) button, submit, reset (reset의 거의 쓰지않음)	눌렀을때 다른 이벤트가 일어남

👍추가 메모 :
label 태그:
어떤 input필드와 연결 되어있는지를보여준다.(이때 input의 id는 label에서 #을 사용하지 않는다)

(이름을 눌렀는데 오른쪽이 포커스되었다.)

radio속성 :
radio속성 사용시, 반드시 적어줘야 될 속성으로 name, value 2개(서버한테 알려주기위함)가있다.
name목적 : input type의 radio들이 "나랑서로 연관이되어있구나~" 라는거를 알려주기위해 같은 값을 적어야함

value목적 : 어떤 하나의 항목이 선택이돼서 서버한테 전달이 될때 어떤 항목이 선택 되었는지에 대해 구분해줌

checkbox속성 :

radio랑 다 비슷하며 다만 다중선택이 되냐 안되냐의 차이이다.

Select 태그 :

값을 바꾸고자 하는 아이의 이름은 무엇이고,

이 아이의 입력필드의 name(이름)은 무엇이고,

그래서 선택된 value(값)은 무엇인가? 를 서버한테 전달해줘야한다.

Textarea 태그 :

표 Table -기본구조, 심화
짜증내하지 말자, 스도쿠 게임처럼 생각하자!

태그<tag>	속성(attribute)	설명
table(기본)		데이터를 담은 표를 만들 때 사용
thead		명확하게 구조화 할 수 있음
tr(기본)		가로줄 만들때 사용
tbody		명확하게 구조화 할 수 있음
th(기본)	colspan="차지할 숫자" - 가로합치기 ---------------------------------- scope="row \| col" -테이블헤더만 쓸 수 있다. -어떤건 가로줄 어떤건 세로줄의 헤더인데, th를 쓸때 가로줄혹은 세로줄 헤더를 즉, 스코프 범주에 대해 더 명확하게 해준다 (이는 우리 눈에는 똑같지만, 브 라우저에는 훨씬 더 풍부한 정보를 제공한다)	셀을 만드는데, 테이블 헤더를 만듬
td(기본)	rowspan"차지할 숫자" - 세로합치기 - 그 다음<tr>까지 영향을 준다	셀을 만드는데, 테이블 데이터를 만듬
tfoot		명확하게 구조화 / 총 합 / 결론부분

table을 만드는 기본 원리

1. 가로줄을 기준으로 보자

2. 그 가로줄안에 넣고자하는 셀을 넣어주자(셀 제목? 셀 데이터?)

앞서 내가 정의했던 셀(th)의 갯수만큼 뒤에 셀(td)을 채워져야하는 룰이 있다.

Escape(이스케이프) <- 브라우저가 헷갈릴수도있어서 &를 사용하기보다 저렇게 구체적 명시

예 ) &

미디어 파일 Media

텍스트가 아닌 형태의 데이터를 집어넣는 경우를 '미디어 파일을 넣는다'라고 표현

태그<tag>	속성(attribute) (반드시 명시 해야하는 attr)	설명
img	src(source) , alt(altrnative text)대체텍스트	Image-링크 (내가 이동하고자 하는 '주소값' 명시)
audio	src controls autoplay( controls없어도될때) loop	type확인 : https://url.kr/vj6qgh 지원하는 브라우저 확인 : https://url.kr/flkahu
video	src controls autoplay( controls없어도될때) loop
iframe	src	(Embed)우리가 html문서를 작성하고있는데, 그안에 또다른 html문서 혹은 콘텐츠를 첨부하고싶을 때 사용

✨ (조금 더 친절하게)
audio혹은 video를 지원못하는 브라우저한테 사용자에게 아래의 링크를주며, 업데이트하라고 알려준다.

https://browsehappy.com/

기타 Etc

태그<tag>	속성(attribute) (반드시 명시 해야하는 attr)	설명
abbr	title="풀네임"	abbreviation-약자, 약어, 줄임말 - 작은디테일이지만, 사용성을 높일 수 있는 디테일
address		address - 연락처에 관한 정보를 마크업
pre	pre태그안에 code태그 사용 (하지만 항상 같이 쓸 필요는x)	preformatter text - (서식이 설정된)html문서상에서도 코드를 작성하고 싶을때 사용
code	보통 pre태그안에 code태그 사용 (하지만 항상 같이 쓸 필요는x)	code - 인덴트(indentation)즉, 들여쓰기가 중요 여러줄에 걸쳐서 간지나게 사용하고 싶을때, pre랑 사용

👍추가 메모 :

address 태그 :

연락망에 대한 예 )

1. (물리적) 주소

2. URL

3. email 주소

4. 전화번호

5. SNS

~~6. 사업자번호를 연락망으로하기에는....?(애매)~~

❗ Doctype & Document Structure

(다른 강의에서는 맨 앞에 두는 내용)
눈에 보이지는 않지만 근본적으로는 매우 중요하다!

태그<tag>	속성(attribute)	설명
<!DOCTYPE html>		-가장최신 html5를 사용할꺼야 라고 선언하는것과 동일한 효과를 갖는다 -HTML의 모든 문서의 시작은 <!DOCTYPE html> 으로부터 시작된다.
html		-별명 : root 태그라고도한다. -반드시 head와 body 2개의 태그만을 작성 할 수있다.
head		-사람으로치면 뇌라고 생각하면된다. 우리가 뇌에서 무슨일이 일어나는지는 모르지만, 하지만 뇌는 한 사람에 대한 굉장히 많은 중요한 정보들을 갖고있는것처럼, head또한 이 웹 문서에 관한 중요하지만 보이지는 않는 meta데이터를 선언할 때 사용하는 태그 -우리눈에는 보이지 않는 정보들을 담아두는 곳
body		웹 문서에서 모든 콘텐츠를 담아내는 태그

HTML문서는 지켜야할 기본 규격이 있다. (아래사진의 골격을 맞춰야한다)

Document Type Declaration

- DTD 선언

- 문서 형식 선언

document === 문서 ===HTML그 자체

❗ Meta - Title, Link, Style & Script

태그<tag>	속성(attribute) (반드시 명시 해야하는 attr)	설명
title		(필수-검색 최적화에 매우 중요)html문서의 대제목 역할
link		CSS 스타일시트를 첨부하는 태그 spoqa han sanse폰트
style		( ❗ 비추 )HTML문서 내에 CSS코드를 작성할 때 태그 link태그로 내가 열심히 작성한.css파일을 불러왔는데도 문서안에 <style>...</style>태그를 사용한 순간 <-얘가 덮어버린다.
script		HTML문서 내에 JavaScript파일을 첨부할 때 사용 태그