HTML 2

lazy loading 의 정의

페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술

사용자가 페이지의 최상단의 이미지만 확인하고 나가버리면 데이터나 메모리에 낭비가 발생하게 되므로

나중에 사용자가 필요로 하는 시점에 로딩하는 것

 

컨테이너 요소

span   : inline 요소

div   : block 요소

E 문자를 div로 둘러 싸면 div가 한줄을 다 차지해서 나머지 문자가 아래로 밀려남

 

텍스트 레벨 요소

sub   : 아래 첨자  /  H2SO4  /  화학식이나 수학식에 사용

sup   : 위 첨자  /  각주[1]  /  각주를 달거나 약어를 설명할 때 사용

  ** sub와 sup는 하이퍼링크로 위키와 연결하여 사용 함 

mark   : 형광펜 효과  /  삼각함수

abbr   : 쩜쩜밑줄

s   : 취소선  /  11,900원 

 

adress 요소

연락처   : a태그로 하이퍼링크를 연결하여 사용자가 영역을 클릭했을 때 바로 전화를 걸 수 있게 함

문의   : a태그로 이메일에 하이퍼링크를 연결하여 사용자가 영역을 클릭했을 때 바로 메일을 작성하는 창이 나오게 함

 

임베디드 요소

picture   :  srcset을 지원하지 않으면 png로 나옴 / source 태그의 srcset과 img 태그의 srcset의 차이점이 뭐지

video   : poster="이미지경로" / 비디오가 재생불가할 경우 포스터 이미지를 보여줌 / track src 부분 뭐지

iframe   : 웹에서 퍼가기 가능한 정보들을 가지고 옴 / 유튜브 동영상, 구글맵 지도 등 / autoplay muted 일때만 재생됨

map   : image-map  /  sns 연결 링크 등을 하나하나 따로 만들지 않고 map>area로 묶음

  ** title 문구는 링크부분에 커서를 올렸을 때 작게 보여 줄 문구

  ** coord 좌표는 map generator 활용하여 설정 

 

테이블 요소

caption   : 표 제목

tr   : 행

th   : 제목 셀  /  scope 속성 O (row, col)

td   : 내용 셀  /  scope 속성 X

이전엔 thead -> tfoor -> tbody 순서로 작성했으나 html5 에서는 순서 상관 없음

  ** tbody 태그에 항목이 계속 추가될 가능성이 많으므로 가장 밑에 씀

 

폼 요소

method   : get (default), post

  ** fieldset, legend = html5 에서 생략가능 flexbox 에서 문제생김

label :  모든 폼서식은 반드시 1:1로 대응되는 레이블이 있어야 함

 

<button>검색</button>

<input   value=“검색” />    위와 기능 같음