HTML REFERENCE

HTML이란?

  • 웹 페이지를 만들기 위한 언어
  • HT - Hyper Text : 문서와 문서를 연결
  • M - Markup : 마크업, 태그
  • L - Language : 언어
  • 즉 HTML이란? 문서와 문서로 연결된 태그 언어를 말합니다.

태그란?

  • 태그란 정보를 정의하는 방식을 의미합니다.

태그의 형식

  • 태그는 열린 태그와 닫는 태그가 있습니다.
  • 닫는 태그에는 "/"가 있어야 합니다.
  • 닫는 태그가 필요없는 태그도 있습니다.
  • HTML5에서는 "/"가 생략이 가능합니다.

블록/인라인 요소

  • 블록 엘리먼트(Block Element)
    • 독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있다.
    • 블록요소에는 블록요소와 인라인 요소를 포함 할 수 있습니다.
    • div, p, h1, h2, h3, h4, h5, h6, ul, li, ol, dt, dd
  • 인라인 엘리먼트(Inline Element)
    • 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현 할 수 있습니다.
    • 인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.
    • span, a, strong, em, img, b, i

HTML

div

  • div 태그는 문서의 영역을 나누거나 그룹화 할 때 사용합니다.

em

  • emphasized text 즉 특정 텍스트를 강조하고자 할 때 사용함

strong

  • 글자를 굵게 표시하여, 텍스트를 중요하게 보이고자 할 때 사용함

ul

  • unordered list의 약자로, 순서가 필요없는 목록을 만듬

ol

  • ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용함

dl

  • definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만듬

dt

  • definition term의 약자로, 정의되는 용어의 제목을 넣을 때 사용

dd

  • definition description의 약자로, 용어를 설명하는데 사용

input

  • 사용자가 데이터를 입력할 수 있는 입력 영역을 지정하는 태그
  • form 요소 안에 사용 되며 input태그는 닫는 태그가 없음
  • input type 속성의 속성값
    • text 기본값. 한 줄의 텍스트 입력 칸을 만듦
    • password text속성과 같지만, 문서를 숨겨서 표시(별표 처럼)
    • checkbox 체크박스를 만듦
    • radio 라디오 버튼을 만듦
    • button 누름 버튼을 만듦
    • submit 전송 버튼을 만듦
    • reset 재설정 버튼을 만듦
    • file 파일 선택 창을 만듦
    • hidden 사용자에게 보이지 않는 숨김 창을 만듦
    • image 이미지로 된 전송 버튼을 만듦. src속성으로 이미지 url 지정
  • name="text" input요소의 이름
  • value="text" input 요소의 값
  • size="숫자" input 요소의 너비
  • src="url" submit버튼(type="image"일때)으로 사용할 이미지 주소
  • maxlength="number" input요소에서 허락된 문자열의 최대 숫자
  • checked type="checkbox"나"radio"일 경우, 페이지가 로드될 때 요소가 미리 선택되어 있음
  • accept media_type type="file"일 경우 서버가 받아들일 파일의 종류
  • alt="text" type="image"일 경우, 이미지의 대체 텍스트
  • diabled input 요소가 비활성화 상태
  • readonly 입력 영역이 읽기만 가능하게 지정
  • autocomplete="on/off" input요소 자동 완성 여부 지정
  • autofocus input요소가 자동으로 포커스 됨
  • form:form_id input요소가 속한 하나 이상의 form을 지정
  • formaction="url" 양식이 전송될 때 (type="submit","image"일 경우) 입력 제어 장치를 처리할 파일 주소
  • formenctype 서버에 전송될 때 (type="submit", "image"일 때) 데이터의 보호화 방식
  • formmethod="get/post" action url에 대한 (type="submit", "image"일 경우) 자료를 보낼 때 HTTP방법
  • formnovalidate 양식 요소가 전송 될 때 유효화되지 않아야 하는지 지정
  • formatarget type="submit", "image"일 때 창이 열릴 곳. _blank, _self, _parent, _top, frame 이름 중 선택
  • height="px" input요소의 높이(type="image"일 때)
  • width="px" input요소의 너비(type="image"일 때)
  • list="datalist_id" input 요소를 위한 미리 지정된 옵션을 담은 datalist요소를 참조
  • max="number/data" input요소의 최대값
  • min="number/data" input요소의 최소값
  • step="number" 입력 영역의 요구되는 숫자 간격
  • multiple 사용자가 하나 이상의 값을 입력할 수 있도록 지정
  • pattern="regexp" input요소 값이 체크될 보통 표현
  • placeholder="text" input요소의 예상된 값을 설명하는 짧은 힌트
  • required 입력 영역이 양식 전송 전에 채워져야함을 지정

fieldset태그, legend태그

  • fieldset은 form양식에서 관계된 요소들끼리 묶어주며, 관계 요소 주위에 박스를 그린다
  • fieldset은 주로 legend태그와 함께 쓰인다

label 태그

  • label태그는 양식 입력 창(form control)을 설명하는 이름표이다
  • label 요소로 묶인 텍스트를 클릭하면, form control(양식입력창)이 선택된다
  • *form control이란 input, textarea, button, select 요소로 생성된 입력 제어 장치
  • label로 묶는 방법은 두가지가 있는데,
    1. for 속성을 사용하거나
    2. label요소 안에 form control을 두는 것

iframe 태그

  • html웹 문서 안에 또 다른 웹 문서를 넣을 수 있고 뮤비나 동영상등도 넣을 수 있음
  • 링크(a)의 target frame으로 사용될 수 있는데 링크의 target 속성은 iframe의 name 속성을 언급해야 함.
  • 함께 사용할 수 있는 속성
    • src iframe에 삽입될 문서의 주소
    • width iframe의 너비 지정(px,%가능)
    • height 높이 지정(px,%가능)
    • frameborder 테두리를 표시할지 말지를 지정 1(테두리가 있음), 0(테두리가 없음)
    • scrolling 스크롤바 유무를 선택. yes(스크롤바 표시), no(스크롤바 없앰), auto(자동)
    • longdesc iframe에 담길 내용을 설명하는 페이지
    • marginheight 내용의 top(위) bottom(아래) margin
    • marginwidth 내용의 left(좌), right(우) margin
    • align iframe을 정렬
    • name target이 필요한 프레임의 이름(id와 같)

HTML5

section

  • 일반적으로 문서의 콘텐츠 섹션을 의미합니다.
  • 콘텐츠와 관련된 한가지 주제 영역을 말합니다.
  • section 요소는 문장이나 문서의 스타일링 요소가 아니기 때문에 편의나 영역을 위함이라면 div 요소가 좋습니다.
  • section 요소는 제목이 없는 경우는 섹션이라고 할 수 없기 때문에 제목을 제공해야 합니다.
  • section 요소는 일반적인 주제가 아니라면 구체적인 요소는 (article, aside, nav)를 사용하는 것이 더 적절합니다.

article

  • 콘텐츠의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.
  • article은 포럼, 신문기사, 잡지, 블러그 항복, 게시판 글 등 콘텐츠의 독립적인 항목을 나타냅니다.
  • section은 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠입니다.
  • section요소 안에는 article 요소를 쓸 수 있으며, article 요소 안에도 section 요소를 쓸 수 있습니다.

nav

  • 페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹입니다.
  • nav는 문서의 핵심적인 ㅠ페이지의 메뉴 및 서브 메뉴에서 사용하고, 문서에서 주로 한 번만 사용합니다.
  • 문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다.
  • nav는 핵심적인 네비게이션에 사용해야 하므로 footer 내에 링크 그룹의 사용은 적절하지 않습니다.

main

  • 웹 문서의 주요 콘텐츠 영역을 나타낼 때 사용합니다.
  • main은 웹 페이지에서 한 번만 사용 할 수 있으며, 접근성과 검색영역에 노출을 향상시킵니다.
  • article, aside, footer, header, nav를 하위 요소로 사용할 수 있습니다.

aside

  • 웹 문서의 메인 콘텐츠와 관련된 사이드 컨텐츠 영역을 나타냅니다.
  • aside는 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 그룹화 할 때 사용합니다.

header

  • 웹 문서의 헤더 영역을 나타냅니다.
  • header는 웹 페이지에 대한 소개, 네이게이션 영역, 테이블 영역, 검색 영역, 로고 영역을 포함한 영역입니다.
  • header는 제목 태그가 포함 될 수 있으며, 필수 조건은 아닙니다.
  • header는 섹션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함 할 수 없습니다.

footer

  • 웹 문서의 푸터 영역을 나타냅니다.
  • footer는 저작권 정보, 회사 정보, 관련 링크, 주소, 바닥글, 사이트 정보 등을 포함하는 콘텐츠 영역입니다.
  • footer는 섹션 컨텐츠가 아닌 그룹을 나타내는 요소이며, section, articl, aside 등을 포함 할 수 있습니다.

HTML5에 새로 생긴 태그

  • dialog
    • 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 dt에 말하는 사람 dd에 내용을 작성한다.
  • figure
    • 이미지, 그래프, 사진, 예제코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함 시켜 서로의 관계를 명확히 구조화 시킨다.
    • 반드시 메인이 되는 문서 안에 삽입 될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.
  • mark
    • 형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 em, strong과는 다른 개념이다. 시각적 주목효과만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.
  • time
    • 날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서도 사람도 이해할 수 있게 노출시킨다. YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태)로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.
  • meter

    • 통화, 인구, 점수, 치수와 같은 숫자들과 같이 특정 범위내에 있는 숫자 값을 시스템에 인지시킬 필요가 있을 때 사용할 수 있다.

    %나 '분수'형태로도 사용할 수 있다.

    속성명 속성기능
    value 실제로 측정된 진짜 데이터를 지정한다.
    title 튤팁 입력을 할 수 있다.
    high 입력된 데이터들 중의 사용자가 허용할 수 있는 최대값을 지정한다.
    low 입력된 데이터들 중의 사용자가 허용할 수 있는 최저값을 지정한다.
    max meter에서 인식할 수 있는 최고 값을 지정한다.
    min meter에서 인식할 수 있는 최저값을 지정한다.
    optimum 최적의 측정값을 지정해 준다.min으로 설정된 최저값과 max로 설정된 최대값 사이에서 가능한 한 최고 적합한 값을 지정해준다.
  • progress
    • 다운로드 진척 상태를 알려줄때 유용하게 사용할 수 있는 태그로 최대값 max속성과 현재 다운로드한 값 value속성을 가진다. 이는 자바스크립트와 연동하여 동적으로 다운로드상태를 제공할 수 있다.
  • ruby
    • 한자, 일어등의 발음들을 표기하기 위해 사용하며 rp와 rt를 사용한다. 5.5pt의 작은 글씨를 사용해 첨언을 넣는 영국출판문화에서 기원한 단어
    • rp는 루비의 앞뒤로 붙게되는 괄호등을 지정하고 지원 브라우저에서는 보이지 않는다.

    HTML5에 의미가 변한 속성

    • HTML5의 DTD 선언:!DOCTYPE html
    • HTML5의 인코딩 선언:meta charset="utf-8"
    • hr - 원래 단순한 가로줄을 나타내는 태그 였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다.
    • u - 양식상 일반적인 텍스트보다 돋보여야 할 때 쓴다. 예를 들어 철자가 틀린 단어나, 중국어로 번역된 고유 명사등이 있다. 별도의 CSS없이 쓰면 브라우저에서는 밑줄을 긋는 것이 기본값이다.
    • i -어떠한 이유로 일반적인 텍스트보다 돋보여야 할 때 쓴다. 예를 들어 전문 용어, 외국어의 구절등이 있다. 별도의 CSS없이 쓰면 브라우저에서는 이태릭체로 표기하는 것이 기본 값이다.
    • s - 더이상 옳지 않은 내용을 나타내는 데에 쓴다. 별도의 CSS없이 쓰면 브라우저에서는 취소선을 긋는 것이 기본값이다. 더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다.
    • strong- HTML4에서는 강한 강조를 의미했지만, HTML5에서는 중요성으로 의미가 변경되었다.

    HTML5에서 없어진 요소

    • basefont
    • big
    • center
    • font
    • s
    • strike
    • tt
    • u
    • frame
    • framesets
    • noframes
    • acronym
    • applet
    • isindex
    • dir

    Media Query

    미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다. css2에서는 "print", "screen"에서 사용했던 것을 css3에서는 확대되어 스크린 폭/높이 등 여러가지 정보를 이용하여 스타일 속성을 바꿀 수 있습니다.

    @media only all and (조건문){실행문}

    • @media : 미디어쿼리가 시작됨을 표시합니다.
    • only : 미디어쿼리 구문을 해석하라는 명령어입니다.(생략가능)
    • all : 미디어쿼리를 해석할 대상을 나타냅니다.(생략가능)
    • and : 앞과 뒤에 조건을 나타냅니다.(조건이 하나 일 경우생략가능)
    • 조건문 : 폭, 높이 등의 조건을 설정합니다.
    • 실행문 : 조건에 따른 스타일 속성을 실행합니다.