[zb]007-러닝메이트 html-css : html 편

html개요

html, css, javascript

구조-html 웹 문서의 기본 골격이자 뼈대
표현-css 각 요소들의 레이아웃과 스타일링, 배치와 ux 증대
동작-javascript 동적요소, ui에 따른 행동

html과 css를 구분하여 사용하면

• 하나의 html에 두개의 css를 적용할 수도 있고
• 여러개의 html에 하나의 css를 적용할 수도 있다.(사용성 증가)
  스타일드 컴포넌트보다 sass를 선호하는 이유가 될 수도 있겠다.

웹표준과 웹접근성, 호환성

알아두면 웹페이지 제작의 올바른 방향성을 띄며 진행할 수 있다.

크롬-사파리-파이어폭스
이 서로 다른 웹 브라우저에 < button >버튼< /button > 을 실행하면 브라우저마다 다른 기본값을 갖고 있어서 다르게 표현된 버튼을 확인할 수 있다.

만약 이 차이가 더 극명하다면?

어쩌면 유저가 버튼이라고 인지하지 못하는 버튼이 생길 수도 있을 것이다.

=> 이를 방지하고자 문법 사전을 만들기로 함. = 웹표준 HTML5버전(w3c_2014)
이후 2019 WHATWG(애플,모질라,구글,MS)가 제안한 HTML Living Stansard를 w3c가 수용하면서 공식 웹표준으로 인정.

• 웹접근성 (Web Accessibility)
  장애여부와 관계없이 웹을 사용할 수 있게 만드는 것. 이는 일시적 장애, 상황적 제약 등을 모두 포함한다.
  
• 웹호환성 (Cross Browsing)
  웹 브라우저 버전, 종류에 관계없이 웹사이트에 접근이 가능하게 만드는 것. 웹표준을 준수하여 브라우저의 호환성을 확보할 수 있다.

html은 어떻게 생겼는가

• 웹페이지를 구성하고 있는 요소(element) 하나하나를 <태그> 라는 표기법을 사용하여 표현함
• <태그>를 통해 요소의 역할 (제목,본문,버튼,이미지...)을 명시함
• <태그>의 이름은 웹표준(html5)에 맞게 작성함

• 요소는 오프닝 태그 + 내용 + 클로징 태그 로 만들 수 있다.
• html은 일반적인 엔터를 이용한 줄바꿈은 무시한다.
• 그래서 오프닝 태그와 클로징 태그가 다른 줄에 있어도 인식할 수 있다.
• 태그명은 대소문자를 구분하지 않지만 소문자로 작성하는 걸 권장한다.

빈요소(Empty Elements)

• 요소에 내용이 없이 사용할 수 있는 태그들도 있다.
• 내용없는 태그를 빈요소(Empty Elements)라고 한다.
• 클로징 태그</> 없이도 사용이 가능하지만, 명시적으로 오프닝 태그 마지막에 /슬래시를 적어 빈요소 임을 표현하는 것이 권장된다.
• Empty Elements, Self-Closing Element, Voud Element, Single Tag 라고도 부른다.
• 빈요소가 아닌 요소에 내용과 클로징 태그를 안 붙인다고 빈요소가 되는건 아니다.

요소 중첩(Nesing)

• 요소 안에 다른 요소가 들어갈 수 있다.
• 부모-자식 관계는 들여쓰기(Tab)으로 구분한다.

<ul>
  <li></li>
  <li></li>  
</ul>

<a>
  <img src=""/>
</a>

주석

• html의 주석처리는 < !--내용-- > 으로 한다.

html 문서의 구조

• html = 페이지 전체를 감싸는 최상위 루트(root) 요소
• head = 웹 페이지의 정보. 기계(브라우저)가 식별할 수 있는 문서정보를 담는다. 단 하나의 < title > 태그를 찾는다.
  • < title >
  • < script >
  • < styled >
• body = 웹 페이지에 보이는 모든 콘텐츠를 보여준다. 특성, 속성, Attribute는 body 안에 사용되는 태그이다.

head 태그

• 기계(웹브라우저)가 식별할 수 있는 메타데이터 정보를 담는다.
  • 문서의 제목, 스크립트, 스타일시트 등...

body

• 사용자에게 보여지는 내용을 담는다.
• 속성 Attribute

body 영역에서 태그를 구분 짓는 특성

구획을 나누는 태그

• container 역할 (container 안에 container 가능)
• 단독으로 사용해도 눈에 보이지 않음 < div >
• 여러 요소를 묶어서 그룹화, 섹션 구분, layout을 정할 때 사용한다.

그 자체로 요소인 태그

• 단독 사용도 눈에 보인다. < input > < button > ...

블록(Block) 과 인라인(Inline)

• 구획을 나누는 요소이면서 블록이거나 인라인 일 수 있다.
• 블록 요소와 인라인 요소는 default로 정해져 있으며, css를 통해 layout을 변경할 수 있다.

블록(block)
언제나 새로운 라인에서 시작하며 실제 사용하는 공간에 상관없이 부모가 허용한 최대 width를 사용한다.
인라인(Inline)
줄 어디에서나 시작할 수 있고, 이전 요소가 끝나는 지점부터 시작해 요소의 내용(content)만큼 차지한다.

콘텐츠 카테고리

• HTML5부터 비슷한 특징을 가진 요소끼리 묶어 7개 카테고리로 세분화
• 하나의 html요소가 여러 콘텐츠 카테고리에 포함될 수 있다.

카테고리

• 메타데이터 콘텐츠 : 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
• 플로우 콘텐츠(flow) : 웹 페이지상에 메타 데이터를 제외한 거의 모든 요소
• 섹션 콘텐츠 : 웹문서의 구획(Section)을 나눌 때 사용하는 요소. 헤딩 콘텐츠와 완전히 구분된다.
• 헤딩 콘텐츠(heading) : 섹션의 제목(heading)과 관련된 요소. 섹션 콘텐츠와 완전히 구분된다.
• 프레이징 콘텐츠(phrasing) : 문단에서 텍스트를 마크업하는 자간, 행간, 폰트사이즈 등을 나타낸다.
• 임베디드 콘텐츠 (Embedded) : 이미지나 비디오iframe 등 외부소스를 가져오거나 삽인할 때 사용하는 요소
• 인터렉티브 콘텐츠 (Interactive) : 사용자와 상호작용을 위한 콘텐츠 요소

https://www.w3.org 참고

html의 텍스트 요소 MDN html

제목 H1~H6

• H1이 제일 크고 H6이 제일 작다. H7은 존재하지 않음
• 브라우저는 H1~H6을 기준으로 웹페이지를 목록화 하기 때문에 되도록 순서대로 용도에 맞게 쓰는게 좋다.
  • 글씨 크기를 위해 H1을 쓰지 말 것.
  • 지금 보이는 H1이 모든 브라우저에 동일하게 표현되는 건 아니니 글씨 크기는 CSS를 통해 변경할 것.
  • 페이지단 하나의 H1만 사용하는 것이 스크린리더와 SEO에 적합하다.
  • h1 은 반드시 title 작성. 나머지로 글쓰기.

본문) p (paragraph)

• 블록단위 요소 (block-container)
• html은 엔터를 인식하지 않고 스페이스(사이띄기)는 1개만 인식한다.

본문) br

• 텍스트 요소 안에서 줄바꿈을 생성한다.(line-breaker 일종의 엔터)
• 빈요소 < br > < br/ >
• < br/ >은 문장 하나의 크기만큼 줄바꿈 된다. => 더 많은 줄바꿈을 원한다면 < br/ > 을 중첩하지 말고 css를 통해 변경하기
• < br/ >은 문단의 구분이 없다. => 접근성에 대한 고려가 필요함

본문) blockquote, q 인용요소

• blockquote는 블록요소, q는 인라인 요소로 둘 다 인용하고 싶은 텍스트를 가져올 때 사용한다.
• blockquote는 p 태그로 감싸면 안됨. p태그가 자동으로 닫히기 때문이다.

본문) pre (preformatted 미리 서식이 준비된)

• < pre > 태그 안에 있는 내용은 입력값 그대로 모든 개행요소가 표현된다.
• < pre > 안에는 스페이싱과 엔터가 입력값 그대로 표현된다.
• 고정폭 글꼴을 사용하여 모든 텍스트가 동일한 너비를 갖는다. 즉, A와 I가 동일한 글자폭을 갖는다.

본문) figue, figcaption

• figue 독립적인 콘텐츠를 표현할 때 사용한다.
  • < pre > 태그에 쌓인 콘텐츠, < blockquote > 의 긴 인용글
• figcaption figue 태그 안에 콘텐츠의 위나 아래에 설명을 붙일 수 있다.
  

본문) hr 경계선 horizon

• 문단 레벨에서의 주제 분리
• 빈요소 < hr > < hr/ >
• 모양 변경을 희망하면 css를 통해 스타일을 바꾼다.

본문) abbr

• 약어표시
  

본문) adress

• 주소

본문) cite

• 인용한 것에 출처를 남기는 것
  

본문) bdo

• bidirectional override 양방향
  

포메팅 MDN text-formatting

b, strong 강조

• 텍스트에 포매팅을 한다 : 나열된 문단 속 문장이나 단어를 강조하는 것.
• b (bold) 굵은 글씨 요소 : 요약의 키워드, 리뷰 속 제품명, 별로중요하진않지만괜히굵게표시해서있어보이고싶은것 등에 사용
• strong 높은 중요도 요소 🟡 : 키워드 부터 문단까지 중요한 요소에 적용시킬 수 있다.

i, em

• i : 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타낸다.
• em : 강세 요소.

mark, small, sub, sup

• mark : 현재 맥락에 관련 깊거나 중요할 때 하이라이트 표시
  • < p> 네가 < mark > 웃으면 < /mark > 나도 좋아 < /p > ( 네가 웃으면 나도 좋아 )
• small : 덧붙임 글 요소small 태그
• sub : 아래 첨자sub
• sup : 위 첨자sup

del, ins, code, kbd

• del : 텍스트 취소선, 삭제
• ins : 추가된 텍스트 표시
  • 토끼 나비 당근 < del>딸기 < ins>젤리 말랑
  • 토끼 나비 당근 딸기 젤리 말랑
  • cite : 이슈 추적 내용 추가 가능 (삭제이유, 추가이유)
  • datatime : 변경 발생 일자
• code : 인라인 요소, 문장 중간에 짧막하게 코드 요소를 넣고 싶을 때 사용. 고정폭 글씨체.
  여러 줄을 표시하고 싶으면 겉에 < pre > 로 감싸고 < code >를 적으면 된다.
• kbd : 키보드 표현 요소 .
  • cmd + s 는 저장 단축키 이다.
  • < kbd > cmd < /kbd > + < kbd > s < /kbd >

a태그와 하이퍼링크 MDN a태그

a태그

앵커 Anchor 요소. href를 통해 특정 주소로 이동하는 하이퍼링크를 만든다.

절대경로 : 현재 위치와 관계없이 정해진 위치로 이동할 수 있다.

<a href="https://www.mozilla.com">

상대경로 : 브라우저나 로컬상태와 같이 다른환경에서 변화하는 이동경로.(로컬 환경에서 폴더위치 등)

href 로 메일이나 연락처를 연결할 수 있다.

<a href="mailto:glow2myself@gmail.com"> 이메일 연결 </a>
<a href="tel:010-000-0000"> 연락처 연결 </a>

href 로 지정한 링크를 어디에 띄울 것인지 정할 수 있다.
_self : 기본값. 현재 브라우저, 현재 탭에 열기
_blank : 현재 브라우저, 새로운 탭에서 열기

<h3> 속성2 = terget </h3>
<a href="https://www.mozilla.com" target="_blank">Mozilla</a>

엔티티(Entity)

html에서의 엔티티는 < 나 > 또는 " & 같은 태그 예약어를 그대로 사용하고 싶을 때 쓰는 방법을 말한다.

< p > 해당 태그를 html파일에 그대로 적으면 태그로 인식되어 페이지에 보이지 않지만
<p><p> 이런식으로 엔티티를 사용해 태그 그대로를 표현할 수 있다.
"힣" &qout;힣&qout;
(여백)    

구조를 나타내는 요소

container 요소

div(division)

특정 구획이나 구역을 나누는 태그
flow contents를 위한 통용 컨테이너
블록 요소이고 순수 컨테이너로 내용이 없으면 css를 주지 않을 때는 보이지 않는다.
*순수컨테이너 _ div 자체는 의미없는 태그이다.

기획에 맞는 태그(nav, article...)을 우선 사용해야 한다. div 남발은 ㄴㄴ

span

div와 사용은 동일, 순수 컨테이너
다만, 인라인 요소로 구문 컴텐츠를 담는다 (text)

시멘틱웹 Semantic Web

Semantic : 의미, 의미론적인
요소의 의미를 고려하여 구조를 설계하고 코드를 작성한다.

의미론적인 마크업을 사용하면 생기는 장점

• SEO에 용의하다.
• 스크린 리더 사용 시 정확한 전달이 가능하여 접근성을 높일 수 있다.
• 의미있는 코드블록을 사용했을 때 개발자간의 소통이 원활해지고 코드 찾기도 쉽다.
• 의미있는 이름짓기는 사용자 정의 요소/ 구성 요소의 이름짓기를 반영한다.

* 기획에 맞는 요소를 먼저 사용하고 무분별한 div/span은 사용을 지양한다.
* 내가 만드려는 요소의 콘텐츠(내용)에 적합한 Tag를 먼저 찾고, 의미있는 클래스명(네이밍 컨벤션)을 정한다.

header, footer

• header
  Semantic Tag, Block Container
  소개, 탐색에 도을을 주는 콘텐츠
  제목, 로고, 검색, 폼 등을 포함할 수 있다.
  웹페이지의 header는 하나만 사용 가능하다.
  header 안에 다른 header 나 footer는 올 수 없다.
  페이지제목 < h1 >, 글제목 < h2 >

• footer
  Sementic Tag, Block Container
  웹페이지 정보, 연관사이트연결, 홈페이지 단체, 연락망 등의 정보를 포함한다.
  footer안에 다른 footer나 header는 올 수 없다.

nav(navigation)

• nav
  탐색, 구획 요소
  -> 웹 전체 nav 또는 페이지 내 목차형 nav (ex 나무위키)
  
  

aside(sidebar)

본문과 직접적인 관련은 없지만 옆에 적고싶은 내용

main

< body >태그 하위의 자식 태그로 오직 1개만 사용할 수 있다.

• body의 핵심주제나 핵심 기능이 직접적인 연관있는 것을 담는다.
• 문서에 2개 이상의 main이 존재할 경우, 하나 이외의 main은 hidden 속성값으로 숨겨야 한다.

#### article 문서, 페이지 또는 사이트 내에서 독립적으로 구분되어 배포, 재사용 가능한 구획

• 하나의 문서 안에 여러개의 aritcle이 존재할 수 있다.
• article 내에 구분되는 h2 제목이 사용되면 좋다.

session

article로 사용할 수 없는 독립 객체

목록

ul, ol, li

• ol
  orderd list
  순위가 있거나 단계적으로 수행해야 하는 레시피 같은 것.
  기본적으로 숫자로 정렬 (type="1")
  • type 속성
    < ol type="1" > 1.2.3....
    < ol type="i" > i. ii. iii....
    < ol type="a" > a.b.c....
    < ol type="A" > A.B.C....
  • start 속성
    항목을 셀 때 시작하는 수를 설정할 수 있다.
    type이 'a','A'이거나 'i','I' 인 경우,
    'd'나 'iv' 부터 세고 싶다면 start="4" 라고 적으면 된다.
  • reversed
    목록의 순번이 역전된다.
    1.2.3. -> 3.2.1
• ul
  unordered list
  비정렬 목록, 순서없는 목록
  목록 내 중첩이 가능하고, 불렛 포인트의 차이로 구분된다.

=> ol과 ul은 중첩하여 사용 가능하다.

• li
  list item
  ul과 ol 안에 속하는 단일 아이템

dl, dt dd

• dl
  defination list : 용어를 정리, 설명하는 목록
  dt로 표기한 용어와 dd로 표기한 목록을 감싸서 dl을 생성한다.
  여러 dt-dd가 가능하다.
  단, dt-dd의 형제는 dt-dd만 가능하고 다른태그(예로 div)는 오면 안된다.
  

표

table

tr table row
th table head = colum/row scope를 사용할 수 있다.(로⇨ 컬⇩)

임베디드 요소 (외부소스를 삽입)

< img />

• src = 경로, 주소

• alt = alternative text 대체 텍스트

  • title 로 작성하면 마우스 hover 시 툴팁으로 보여준다.

• width, height = 가로, 세로 너비. 픽셀 기준

• 웹 이미지 유형

  • jpeg = 정지 이미지 손실 압축
  • png = 배경 투명도 지원
  • gif = 여러 장의 이미지로 이루어진 애니메이션
  • webp = 구글이 만든 포맷. 품질, 압축면에서 더 우수하나 지원 브라우저 제한적
  • svg = 벡터 이미지. 이외에는 래스터 이미지
    

  https://www.caniuse.com

• 반응형 : srcset

  • 여러 개의 이미지 경로 지정 가능. 사용자의 뷰포트에 따른 반응형에 적용할 수 있다.
  • srcset = "소스주소 너비w 픽셀밀도x,
    소스주소 너비w 픽셀밀도x"

	<img
         src = "../img/large.png"
         srcset = "../img/small.png 300w,
                   ../img/medium.png 450w,
                   ../img/large.png 600w"
         alt = "image set"
    />

• 반응형 : sizes = min-width : 지정값보다 큰 화면일 경우, max-width

	<img
         src = "../img/large.png"
         sizes ="(min-width: 600px) 600px,
                 (min-width: 460px) 450px, 
                 300px"
         alt = "image set"
    />
/*600px 보다 큰 화면이면 600px로, 460px 보다 큰 화면이면 450px로, 그것도 아니면 300px로 보여줘*/

< video > < /video >

• src : 경로. video 태그의 src는 선택사항이다. 이유는 video 태그 내부에 < sourse src="./video/location.mp4" >로 여러개의 소스를 적용 가능하기 떄문이다.
• 빈 요소가 아니므로 내용 = alternative 속성처럼 브라우저가 미지원 시 대신 적용된다.
• controls : boolean 속성. 입력하면 컨트롤 패널이 보인다.
• autoplay : 자동재생. 페이지를 새로고침하면 멈추게 된다.(사운드가 있을 경우)
• mute : 영상의 음성을 막는다. 영상이 음소거 된 경우는 autoplay는 자동으로 실행된다.
• poster : 지정하지 않을 경우 영상의 첫 프레임이 썸네일이 된다.

audio

• src : video와 같이 선택사항으로 태그 내부에 < source src="" >로 여러개의 소스를 적용 가능하다.
• controls : boolean 속성. 입력하면 컨트롤 패널이 보인다.
• autoplay : 자동재생. 사용자 경험을 이유로 audio 속성은 자동재싱이 적용되지 않을 수 있다.

canvas, iframe

• canvas는 자바스크립트를 사용해야 함.
• 인라인 프레임 안에 다른 html 페이지를 삽입할 수 있다.(보통 지도, youtube)

⭐︎ form 폼 (사실 form보다는 input)

:: 사용자가 작성하는 정보를 받을 수 있다. 단독 사용은 안되고 내부에 input 같은 요소를 넣어주어야 한다.

action, method

• action : 양식데이터를 처리할 프로그램의 url (절대, 상대경로)
• method : GET, POST 등 메소드를 지정할 수 있다.
  특히 GET 메소드는 제출 시 주소창에 입력내용이 드러나므로 비번 같은 민감정보는 해당 방식으로 보내면 안된다.
  주로 키워드, 검색창 등에 사용한다.
  
  

label 과 input

• input 영역을 설명해주는 label을 붙여주면 사용자의 편의성이 좋아지고 접근성도 좋아진다.
• input MDN 링크 바로가기
• input은 다양한 type을 갖는다.
• ⭐︎ label의 for과 input의 id를 동일한 이름을 사용해 연결할 수 있다.
• label은 이미지 등이 올 수 없다. >css / bg-img로 넣어보니까 label에 적용은 되는데 텍스트가 옆으로 옮겨지지 않음. 상위 div에 적용하고 label에 마진으로 넓히는 건 가능.

  <div>
    <label for="color"> 좋아하는 색  :: 
      <input type="text" id="color">
    </label>
  </div>

feildset, legend

여러 input을 역할 별로 구분할 수 있게 만든다.
legend는 fildset의 자식으로 올 수 있다.
feildset의 첫번째 자식이 legend가 와야 한다.

<form>
  <fieldset>
    <legend>제일 좋아하는 것</legend>

    <input type="radio" id="쿠키" name="좋아" value="K">
    <label for="쿠키">마카다미아 쿠키</label><br>

    <input type="radio" id="음료" name="좋아" value="S">
    <label for="음료">딸기우유</label><br>

    <input type="radio" id="한식" name="좋아" value="M" />
    <label for="한식">된장찌개</label>
  </fieldset>
</form>

input type(1) :: text입력

• input type="text"
  한 줄만 입력 가능. 개행을 위해 Enter 입력 시 제출.
  min-length 와 max-length 로 글자수 제한 가능.
  min-length 미만 입력 후 제출 시 브라우저 제공 툴팁이 확인 가능

• input type="password"
  type="text"와 동일하나 마스킹 처리되어 보인다.

• input type="email"
  브라우저가 자동으로 이메일 형식인지를 파악하여 형식에 맞지 않으면 경고 툴팁을 보여준다.

• input type="tel"
  형식은 판단하지 않으나 모바일의 경우 자동으로 숫자판을 띄워주기도 한다고 함.

input type(2) :: 날짜/숫자 입력

• input type="number"

• input type="range"

• input type="date"

• input type="month / week"

• input type="time"

input type(3)

• input type="submit"
  button이 아니지만 버튼처럼 보여지고, 제출 text는 자동으로 생성된다. 변경희망 시 value="제출하기" 로 변경 가능하다.

• input type="button"
  별다른 기능 없이 버튼형식으로 변경됨. js 추가가 필요함.

• input type="reset"
  초기값으로 되돌려준다.

• input type="checkbox"
  name="check1"으로 지정한 값이 전송된다. check1=on
  checked 속성을 넣어두면 기본이 체크된 상태로 표기

• input type="radio"
  하나만 선택하여 전송할 수 있는 radio.
  같은 name 을 주어 여러개의 radio 그룹을 만들고 value 속성으로 구분하여 전송한다.

<input type="radio" name=colors value="c1"/>
<input type="radio" name=colors value="c2"/>
<input type="radio" name=colors value="c3"/>

input 속성 :: name, placeholder, autocomplete, required

• input name=""
  전체 form 에서 해당 필드가 어떤 데이터를 갖고 있는지 구분하는 역할을 한다. label=""과 동일하게 작성하여 구분할 수 있다. get일 경우 주소창에 입력되고, post일 경우 리퀘스트바디에 들어간다.

• input placeholder="입력예시:"

• input autocomplete="on"
  자동완성을 켤지 아닐지 지정. on/off

• input required
  필수 입력 요소를 지정할 수 있다.

input 속성 :: disabled, readonly

• input disabled
  입력을 막는다. 폼 전송에도 제외된다.
  js로 특정 필드 입력 시 입력하지 못하게 만들 수 있다.

• input readonly
  입력을 막는다.
  value로 기본입력값을 넣어줄 수 있다.
  사용자가 입력은 불가하지만 폼 전송에는 포함된다.
  사용자가 수정 못하는 기본값을 설정할 수 있다.

input 속성 :: step, min, max

• input type="number / range" name="스코어" min="-10" max="999" step="2"
  입력 최소값과 최대값을 지정할 수 있다.
  step은 숫자 범위내의 이동 간격을 정한다. (-10 -8 -6 ... 0 2 4 6 ... 994 996 998)
  

button

• button type="submit / reset / button"

  • submit : 버튼이 서버로 form 데이터를 제출한다.
  • reset : 모든 컨트롤 값 초기화
  • button : js를 연결하여 사용할 수 있다.

  button과 input 차이
  버튼이 인풋보다 스타일 적용이 수월함.
  인풋은 value에 텍스트만 적용가능하지만
  버튼은 내부에 html 태그(img, a 등)를 추가할 수 있고 가상선택자(::before ::after)도 적용할 수 있다.

  그러므로 form 데이터 제출용 버튼이 아니라면 type="button"을 해줘야 한다.

  <div>
    <input type="reset" value="😈"/>
    <input type="submit" value="제출!"/>
    <input type="button" value="버튼!"/> <!-- input type="버튼"은 없다. -->
  </div>
  
  <div>
    <button type="reset">👻</button>
    <button type="submit">제출@</button>
    <button type="button">버튼@</button>
  </div>

select, option, optgroup

• select
  일반적인 드롭박스 같은 것 이다.
  option의 value를 넣으면 해당 내용으로 전송된다.
  단, 상위 option을 제출하지 않게 하려면 value를 빈 값으로 두어야 선택하라는 툴팁이 나온다.
  selected를 넣어두면 해당 값이 초기값으로 잡힌다.

  <select name="colors" id="color-select" required>
    <option value="">색상을 선택해주세요</option>
    <optgroup label="무채색">
      <option value="black">검정</option>
      <option value="white">흰색</option>
      <option value="gray">회색</option>
    </optgroup>
    <optgroup label="유색">
      <option value="red">빨강</option>
      <option value="green">초록</option>
      <option value="blue">파랑</option>
    </optgroup>
  </select>

⭐️ input list 와 datalist

label for = input id
input list = datalist id
name은 data 전송 시 구분

  <label for="colors">좋아하는 색</label>
  <input list="favorite-color" id="colors" name="choice-color">

  <datalist id="favorite-color">
    <option value="">색상을 선택해주세요</option>
    <optgroup label="무채색">
      <option value="black">검정</option>
      <option value="white">흰색</option>
      <option value="gray">회색</option>
    </optgroup>
    <optgroup label="유색">
      <option value="red">빨강</option>
      <option value="green">초록</option>
      <option value="blue">파랑</option>
    </optgroup>
  </datalist>

textarea

  <label for="comment">댓글</label>

  <textarea id="comment"
            name="repl"
            rows="5" 
            cols="33">
  올바른 댓글 문화를 만들어 갑시다.
  </textarea>
  
id = label for 과 연결짓는 속성. 페이지에서 id값은 중복 될 수 없다.
name = 전체 form 에서 해당 필드가 어떤 데이터를 갖고 있는지 구분하는 역할.
rows = 한번에 보여지는 가로 줄 수(줄 수 증가 시 스크롤 생성
cols = 한번에 보여지는 글자 수 (영문 33자)

메타데이터 요소

메타데이터의 역할

html head에 들어가는 메타데이터
head에 들어가는 내용은 화면에 보이지 않는다.
metadata란
데이터를 설명하는 데이터
책이라는 데이터를 설명하는 지은이,출판사,발행일 등을 보여주는 것

title

문서제목요소
브라우저 제목 표시줄이나 페이지 탭에 보이는 문서를 정의.
오직 문자열만 사용 가능하고 다른 title 태그를 중복하여 사용할 수 없다.
페이지 제목과 SEO > 검색엔진의 결과페이지에 노출되는 순서를 결정하는 요소 중 하나가 title
=> 키워드 뭉치 스타일. 명사 나열의 제목은 검색엔진에서 광고로 인식한다.

meta - 문서정보

meta 태그는 빈 요소로 여러개 사용하여 정보를 나열할 수 있다.
name 속성과 content 속성은 함께 사용해야 한다.
< meta name="" content=""/ >
meta name에는 표준메타데이터 이름을 참고하여 작성한다
meta data는 필수는 아니지만 검색엔진이 웹의 정보를 쉽고 정확하게 파악할 수 있도록 도와주는 정보이다.
application-name = 웹 페이지에서 구동중인 애플리케이션 이름 하나.

author = 문서 저작자
description = 페이지에 대한 설명. 파이어폭스, 오페라 등 몇몇 브라우저는 즐겨찾기에 해당 설명이 삽입된다.
generator = html 작성에 도움을 주는 소프트웨어 식별자.
keyword = 해시태그 같은 것
referrer = 웹페이지 링크로 이동 시 흔적을 남기는 것.

meta - 문자 인코딩, 뷰포트

문자인코딩은 charset 으로 표기

페이지의 문자 인코딩을 선언하는 것. 유니코드를 사용한다. charset 은 head의 첫번째 자식으로 넣어주고 title 전에 넣는 것을 권장한다. 뷰포트 별도의 태그는 없고 nema 과 content에 작성하면 된다.

viewport 전체 브라우저 중에서 웹 페이지를 볼 수 있는 영역
width = divece-width 웹페이지의 가로와 사용자의 디바이스 가로를 동일하게 만들으라는 의미.
initial-scale 초기비율. 실제 디바이스 비율과 웹페이지의 비율을 맞추는 것
user-scalable 손가락으로 화면을 확대-축소하는 동작을 허용할 지 여부
확대 비율은 maximum-scale과 minimum-scale을 사용하여 조절한다

link

외부의 리소스를 연결하기 위한 태그. 주로 스타일시트나 파비콘을 추가할 때 사용한다.
< link href="/불러오려는 소스의 경로" rel="relationship 현재 파일과 불러오려는 파일의 관계 명시 stylesheet, icon 같은 종류가 정해져있다." >
type

MIME타입

파일 경로를 해석하지 못하는 경우를 대비하여 파일경로가 어떤 문자열로 구성되어 있는지를 설명해주는 것을 말한다.

type/subtype
text/html, audio/midi...

style

head 태그 내부에 style 태그를 작성하고 그 내부에 css 문법을 이용해 적용한다.

script

자바스크립트를 담을 수 있는 태그
css처럼 인라인 적용도 가능하고 외부 요소를 불러 올 수도 있다.
< script src="경로" >
< script > alert("hello world!"); < /script >
브라우저는 위에서 아래로 읽어내리는 도중
스크립트 태그를 만나면 자바스크립트를 읽느라 body의 내용을 불러오는게 늦어질 수 있다. 해서 되도록이면 body 태그의 제일 마지막에 적는 것을 권장한다.

전역속성

어떤 태그에서도 적용시킬 수 있는 속성(Attribute)

id

label과 input을 연결해줄 때 id로 연결 할 수 있다.

• id는 유일한 식별자로 문서 내에서 동일한 이름의 id는 재사용 할 수 없다.
• id는 공백이 들어가서는 안된다. 공백이 필요하다면 _언더바 를 사용하여 구분한다.
• id는 소문자로 시작한다.

class

id와 다르게 class는 여러 요소에 중복하여 사용할 수 있고, 하나의 class에 여러 요소를 중첩하여 적용할 수 있다.

• 클래스는 중간에 공백을 사용할 수 있다. 이때 공백은 요소를 구분하는 구문으로 사용된다.

style

하나의 요소에만 style을 적용할 때 사용한다.
< div style="backgdround: #eeee; border: 2px solid #eeee;" >
그러나 외부 파일로 css 파일을 작성하여 적용하는 것이 권장된다.
인라인 요소로 style을 적용할 경우 외부 css 파일보다 먼저 적용된다.

title

하나의 태그에 추가적인 설명을 툴팁으로 보여줄 수 있다.
이때 title에 적힌 요소는 pre 태그처럼 개행이 전부 확인된다.
title 요소가 부모-자식 관계를 가질 때 부모-자식이 중복 적용되는 요소는 가장 내부(자식)요소가 적용된다.

lang

읽는 사람을 위한 언어 명시
웹 접근성을 높이기 위한 요소로 전체 문서가 어떤 언어로 이루어 졌는지를 표현한다.
또는 페이지 일부에 다른 언어가 적용될 경우 태그에만 lang을 적용할 수도 있다.

data

data-*
data 속성은 사용자가 custom한 속성으로 표준이 아닌 속성을 뜻한다.
자바스크립트 적용 시 해당 요소에 대한 정보를 기입하여 자바스크립트의 이해를 올리고 접근하기 위해 암시적으로 사용하는 태그이다.

draggable

이미지를 드래그 할 수 있는지 여부를 지정할 수 있는 속성.
boolean 속성은 아니라 true=드래그 가능, false=드래그 불가능 을 표기해주어야 한다.
자바스크립트에서 '이미지클릭' '드래그' '이미지드랍' 이라는 각각의 이벤트에 따른 자바스크립트 함수를 적용할 수 있다.

hidden

무언가를 숨기거나 드러낼 때 사용하는 속성.
boolean 속성으로 작성하면 true 실행, 작성하지 않으면 기본값 false 비실행 으로 진행된다. hidden을 추가하면 해당 요소의 시각적 장식 외에도 스크린 리더 등 다른 모든 표현 방식에서 숨겨진다. 하지만 보안상의 가림을 원할 경우 이 hidden 속성을 사용하면 안된다.
또한 속성값으로 hidden을 사용하더라도 css에서 display를 사용하면 다시 화면에 보이게 된다는 점을 주의할 것.