HTML 태그, 속성

min seung moon·2021년 10월 14일
0

HTML5,CSS3,JavaScript

목록 보기
3/10

1. 태그(Tag)

  • Tag 또는 Element라고 부른다
    • 정확하게는 다르나 혼용해서 사용
  • 태그는 AttributesValue를 가지고 있다
    • <tag attributes="value"></tag>
  • 태그는 Parent, Child 관계를 갖는다
    <html> -- 부모 태그(조상)
    	<head>  -- 자식태그
      	</head>
          	<body> -- 자식태그(자손)
            </body>
    </html>

01. HTML 구조

  • DOCTYPE(DYD[Document Type Definition], 버전지정)
    • 마크업 언어에서 문서 형식을 정의
    • HTML은 크게 1,2,3,4,X-,5 버전이 있다.
<!doctype html>
<html>
    <head>
        문서의 정보
    </head>
    <body>
        문서의 구조
    </body>
</html>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="개발자OOO">
        <meta name="description" content="html study">
        <title>mms</title>
        <link rel="stylesheet" href="./css/main.css">
        <script src="./js/main.js"></script>
    </head>
    <body>
        <section>
            <h1></h1>
            <div>
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </section>
    </body>
</html>

02. HTML 문서 정보

-1. TITLE tag

  • <title></title>
  • 웹 페이지의 제목

-2. META tag

  • <meta/>
  • 웹 페이지에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등) 검색엔진이나 브라우저에 제공
<meta charset="UTF-8"> : 문자 인코딩, 텍스트 렌더링 과정 중 문자 인코딩 방식
<정보 문자인코딩방식="UTF-8">

<meta name="author" content="mms"> : 제작자
<정보 정보종류="사이트제작자" 정보값="mms">

<meta name="descripttion" content="html 공부"> : 웹 페이지 설명
<정보 정보종류="사이트설명" 정보값="html 공부">
  • charset(문자 인코딩 방식) : UTF-8, EUC-KR 등..
  • name(검색엔진 등에 제공하기 위한 정보의 종류(meta data)) : author, description, keyword, viewport 등..
  • content : name 이나 http-equiv 속성의 값을 제공
  • < link rel="stylesheet" href="" />
  • 외부 문서를 연결할 때 사용(css file, Favicon 등 ...)
<link rel="relation(관계)" href="hiper text reperence(경로)">
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="favicon.ico">
  • rel(relation(필수)현재 문서와 외부 문서와의 관계를 지정) : stylesheet, icon 등..
  • href(hiper text reperence, 외부 문서의 위치를 지정) : 경로

-4. STYLE tag

  • <style></style>
  • css를 외부문서가 아닌 html 문서 내부에 작성할 때 사용
<style>
	img{
		width: : 100px;
		height: 200px;
	}
	p{
		font-size: 20px;
		font-weight: bold;
	}
</style>
<스타일 정의>
	css 코드
</스타일 정의>

-5. SCRIPT tag, NOSCRIPT tag

  • <script></script>, <noscript></noscript>
  • css는 link or style 태그를 활용해 외,내부에서 작업을 한다면 JS는 script tag로 이 두가지 방식을 모두 사용가능하다.
<script src="js file source route"></script>
<자바스크립트 문서경로="js file source route"></자바스크립트>

<scipt>
	funtion windowOnClickHandler(event){
		console.log("hi");
	}
</scipt>

<noscript>
	<p>Your browser does not support JavaScript</p>
</noscript>

01. script

  • 스크립트 코드를 무서에 포함하거나 참조(외부 스크립트).
  • async : 스크립트의 비동기적(Asynchronously) : boolean, src 속성 필수
  • 동기(순서 대로(순차적) 실행, 앞에 코드가 실행되고 뒤에 코드 실행)
  • 비동기(필요에 희해 건너뛰거나 되돌아가서 코드를 실행)
  • crossorigin : 별도의 도메인을 사용하는 사이트(CORS)의 오류 로깅(Errorlogging)을 허용하기 위해 사용(anoymous, use-credentials)
  • defer : 문서 파싱(구문 분석) 후 작동 여부, HTML문서를 읽고 나서 JS 실행(boolean, src 속성 필수)
  • src : 참조할 외부 스크립트 URL(포함된 스크립트 코드는 무시 됨)
  • type : MIME 타입

02. noscript

  • 스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의

03. 태그의 종류

-1. Self Closing Tag

  • <tag></tag> : 일반적인 형태
    • html, head, body, div, span ... 등
  • <tag> : 내용이 없고 속성만 가지는 형태
    • meta, link, img ... 등
    • 이 태그는 닫아주는 태그가 없기에 <tag/> 이러한 형태로 작성하기도 한다, 이렇게 태그 자신이 스스로 닫는다 하여 Self Closing Tag라고 불린다

-2. Heading Tags

  • h1 ~ h6
  • 주제, 제목, 타이틀 등에 사용되는 태그
  • 페이지 당 h1은 하나만 사용

-3. Paragraph Tag

  • p
  • 하나의 문단(단락)을 설정
  • 정보통신보조기기 등은 다음 문단(p)으로 넘어갈 수 있는 단축키를 제공

-4. Multimedia Tags

01. img Tag

  • 이미지 삽입 태그
  • src : (필수) 이미지 URL(URL)
  • alt(alternate) : (필수) 이미지의 대체 텍스트
  • width : 이미지의 가로 너비
  • height : 이미지의 세로 너비
  • srcset : 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의(w, h(반응형))
  • sizes : 미디어 조건과 해당 조건일 때의 이미지 크기를 정의((반응형))
  • https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/

02. audio Tag

  • 소리 콘텐츠(mp3) 삽입
  • autoplay가 지정된 경우, preload는 무시 됨
  • autoplay : 준비되면 바로 재생(boolean)
  • controls : 제이 메뉴를 표시(boolean)
  • loop : 재생이 끝나면 다시 처음부터 재생(boolean)
  • preload : 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)(none(로드하지 않음) | metadata(메타데이터만 로드) | auto(전체 파일 로드))
  • src : 콘텐츠 URL(URL)
  • muted : 음소거 여부(boolean)

03. video Tag

  • 동영상 콘텐츠(MP4) 삽입
  • autoplay가 지정된 경우, preload는 무시 됨
  • autoplay : 준비되면 바로 재생(boolean)
  • controls : 제어 메뉴 표시(boolean)
  • crossorigin : 가져 오기가 CORS를 사용하여 수행되어야하는지 여부(anoymous, use-credentials)
  • loop : 재생이 끝나면 다시 처음부터 재생(boolean)
  • muted : 음소거 여부(boolean)
  • poster : 동영상 썸네일 이미지 URL(URL)
  • preload : 페이지가 로드될 때 파일을로드할지의 지정(힌트 제공)(none(로드하지 않음) | metadata(메타데이터만 로드) | auto(전체 파일 로드))
  • src : 콘텐츠 URL(URL)
  • width : 동영상 가로 너비
  • height : 동영상 세로 너비

04. figure & figcaption Tag

  • figure Tag는 이미지나 삽화, 도표 등의 영역을 설정
  • figcaption Tag는 figure Tag에 포함되어 이미지나 삽화 등의 설명을 표시.

05. iframe Tag

  • 다른 HTML 페이지를 현재 페이지에 삽입 (중첩된 브라우저 컨텍스트(프레임)를 표시)
  • name : 프레임의 이름
  • src : 포함할 문서의 URL(URL)
  • width : 프레임의 가로 너비
  • height : 프레임의 세로 너비
  • allowfullscreen : 전체 화면 보드 사용 여부(boolean)
  • frameborder : 프레임 테두리 사용 여부(0, 1)
  • sandbox : 보안을 위한 읽기 전용으로 삽입(boolean or allow-form(양식 제출 가능)| allow-scripts(스크립트 실행 가능) | allow-same-origin(같은 출처(도메인)의 리소스 사용 가능))

06. canvas Tag

-5. Division Tag, span Tag

  • div, span
  • 의미없는 태그, 구역을 나누는 태그
  • 시멘틱 태그가 나오기전 나오고 나서도 가장 많이 사용되는 태그이다

-6. List Tag(1)

  • ol, ul, li
  • 각 항목 li tag의 정렬된 목록 ol tag나 정렬되지 않은 목록 ul tag로 설정
  • (Ordered List, Unordered List, List Item, 순서가 필요하거나(ol) 순서가 필요하지 않은(ul) 목록 정의)
  • ol&ul운 자식으로 li만 포함 가능
  • li는 단독 사용 불가, ol, ul에 자식으로 포함되어야 함
  • ol의 항목 순서는 중요도를 의미할 수 있음
  • ol, ul (block), li(list-item)

-7. List Tag(2)

  • dl, dt, dd
  • 용어(dt)와 정의(dd) 쌍들의 영역(dl)을 설정
  • (Description List, Definition Details, Definition Term)
  • dl tag는 dd, dt만 포함
  • key/value 형태를 표시할 때 유용
<dl>
	<dt>Coffee</dt>
	<dd>Coffee is a brewed drink prepared from roasting species.</dd>
	<dt>Milk</dt>
	<dd>Milk is a nutrient-rich, white liquid food produce</dd>
</dl>
      
<ul>
	<li>
		<dfn>Coffee</dfn>
	</li>
	<li>
		<p>Coffee is a brewed drink prepared from roasting species.</p>
	</li>
	<li>
		<dfn>Milk</dfn>
	</li>
	<li>
		<p>Milk is a nutrient-rich, white liquid food produce</p>
	</li>
</ul>
  • dfn : definition의 줄임말 태그
  • 용어 하나를 정의하는 태그

-8. hr Tag, br Tag

  • hr(Horizontal Rule), br(break)
  • 문단의 분리(주제에 의한)를 위해 설정, 줄바꿈을 설정
  • 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로 사용
  • border properties로 속성 변경
  • a(anchor)
  • 다른 페이지, 같은 페이지 위치(#, 해시태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 잇는 하이퍼 링크를 설정
  • (Anchor, 외부로 내보내기)
  • href(링크 URL) :URL (생략 가능)
  • target(링크 URL의 표시(브라우저 탭)위치) : _self(default), _blank
  • rel(현재 문서와 링크 URL의 관계(Link Types)) : license, prev, next ...
  • download(리소스를 다운로드하는 용도로 사용) : boolean
  • hreflang(링크 URL(페이지) 언어(ISO 639-1)) : ko, en ...
  • types(링크 URL의 MIME 타입) : text/html ...

-10. Font Tag

01. b Tag

  • 문체가 다른 글자의 범위를 설정 (Bring Attention)
  • 특별한 의미를 가지지 않음.
  • 읽기 흐름에 도움을 주는 용도로 사용
  • 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용
  • 기본적으로 글자가 두껍게(Blod) 표시 됨

02. mark Tag

  • 사용자의 관심을 끌기 위해 하이라이팅 할 때 사용 (Mark Text, 형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미)
  • 글자 배경이 노란색(Yello)으로 표사
  • 의미 < 사각

03. em Tag

  • 단순한 의미 강조를 표시 (Emphasis)
  • 중첩이 가능
  • 중첩될수록 강조 의미가 강해짐
  • 정보통신보조기기 등에서 구두 강조로 발음
  • 기본적으로 이탤릭체(Italic Type)로 표시

04. strong Tag

  • 의미의 중요성을 나타내기 위해 사용 (Strong Importance)
  • 기본적으로 글자가 뚜껍게(Blod) 표시

05. i Tag

  • em, strong, mark, cite, dfn 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용. (평범한 글자와 구분(아이콘이나 특수기호 같은)하기 위해 사용)
  • 기본적으로 이탤릭체(Italic Type)로 표시
  • fontawesome에서 사용

06. u Tag

  • 밑줄이 있는 글자를 설정 (ubderline)
  • 순수하게 꾸미는 용도
  • a Tag와 헷갈릴 수 있는 위치에서 사용 주의
  • <span style="text-decoration: underline;"></span>을 활용할 수 있어 사용을 권하지 않음

07. sup&sub Tag

  • 위 첨자(sup)와 아래 첨자(sub)를 성정 (Superscripted text, Subscript text)
  • X4 + Y2, H20
  • X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>0

-11. Table Tag

01. table

  • display : table
  • 데이터 표(table)의 행(줄/tr)과 열(칸,cell/th,td)을 생성.

02. tr(Table Row)

  • display:table-row
  • 테이블의 행

03. th(Table Header)

  • display : table-cell
  • '머리글 칸'을 지정
  • abbr : 열에 대한 간단한 설명
  • headers : 관련된 하나 이상의 다른 머리글 칸 id 속성 값
  • colspan : 확장하려는(병합) 열의 수 : 1
  • rowspan : 확장하려는(병합) 행의 수 : 1
  • scope : 자신이 누구의 '머리글 칸'인지 명시 : col(자신의 열) | colgroup(모든 열) | row(자신의 행) | rowgroup(모든 행) | auto : auto

04. td(Table Data)

  • display : table-cell
  • '일반 칸'을 지정
  • headers : 관련된 하나 이상의 다른 머리글 칸 id 속성 값(th의 id 값을 연결)
  • colspan : 확장하려는(병합) 열의 수 : 1
  • rowspan : 확장하려는(병합) 행의 수 : 1

05. caption Tag

  • 표의 제목을 설정
  • 열리는 Table 태그 바로 다음에 작성
  • table 당 하나의 caption만 사용 가능
  • caption(display:table-caption)

06. colgroup & col Tag

  • 표의 열들을 공통적으로 정의하는 컬럼(col,emptyTag)과 그의 집합(colgroup)
  • span : 연속되는 열 수 : Number : 1
  • colgroup(display:table-column-group)
  • col(display:table-column)
<col  style="background-color: tomato;" span="2" width="100">

07. thead & tbody & tfoot Tag

  • 표의 머리글(thead), 본문(tbody), 바닥글(tfoot)을 지정
  • 기본적으로 테이블의 레이아웃에 영향을 주지 않음
  • thead(display:table-header-group)
  • tbody(display:table-row-group)
  • tfoot(display:table-footer-group)

-12. Form Tag

01. form Tag

  • 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
  • form 이 다른 form을 자식 요소로 포함할 수 없음
  • block Tag
  • action : 전송한 정보를 처리할 웹페이지의 URL : URL
  • autocomplate : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
  • method : 서버로 전송할 HTTP 방식 : GET(default), POST
  • name : 고유한 양식의 이름
  • novalidate : 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
  • target : 서버로 전송 후 응답받을 방식을 지정 : _self(default), _blank

02. input Tag

  • 사용자에게 입력 받을 데이터 양식

  • empty Tag

  • autocomplate* : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off

  • autofocus* : 페이지가 로드될 때 자동으로 포커스 : boolean, 문서 내 고유해야 함

  • checked* : 양식이 선택되었음을 표시 : boolean, type 속성 값이 radio, checkbox 일 경우만

  • disabled : 양식을 비활성화 : boolean

  • form* : form의 id 속성 값 : 해당 form의 후손이 아닐 경우만

  • list : 참조할 datalist Tag의 id 속성 값

  • name* : 양식의 이름

  • max : 지정 가능한 최대 값 : Number, type 속성 값이 number 일 경우만, min 속성보다 큰 값만 허용

  • min : 지정 가능한 최소 값 : Number, type 속성 값이 number 일 경우만, max 속성보다 작은 값만 허용

  • maxlength : 입력 가능한 최대 문자 수 : Number(52488), type 속성 값이 text, email, password, tel, rul 일 경우만

  • muliple : 둘 이상의 값을 입력 할 수 있는지 여부 : boolean, type 속성 값이 email, file 일 경우만, email일 경우 , 로 구문

  • placehorder : 사용자가 입력할 값의 힌트 : type 속성 값이 txt, search, tel, url, email 일 경우만

  • readonly : 수정 불가한 읽기 전용 : boolean

  • step : 유효한 증감 숫자의 간격 : Number, type 속성 값이 number, range일 경우만

  • src : 이미지의 URL : URL, type 속성 값이 image 일 경우만

  • alt : 이미지 대체 텍스트 : type 속성 값이 image일 경우만

  • type* : 입력 받을 데이터의 종류 : text

  • value : 양식의 초기 값

  • button* : 일반 버튼 : button tag처럼 사용

  • checkbox* : 체크 박스

  • email* : 이메일

  • file* : 파일

  • password* : 비밀 : 가려지는 양식

  • submit* : 제출 버튼 : 해당 form 범위 내 고유한 양식

  • text* : 일반 텍스트

  • color : 색상 : IE 지원 불가

  • hidden : 보이지 않지만 전송할 양식 : value 속성으로 값을 지정

  • image : 이미지 제출 버튼 : img Tag 처럼 사용

  • number : 숫자

  • radio : 라디오 버튼 : 같은 name 속성 그룹 내 하나만 선택 가능

  • range : 범위 컨트롤 : min, max, step, value (기본값) 속성 사용

  • reset : 초기화 : 해당 form 범위 내 모든 양식

  • search : 검색

  • tel : 전화 번호

  • url : 절대 URL

03. label Tag

  • 라벨 가능 요소(labelable)의 제목(Caption)
  • for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠를 포함
  • 라벨 가능 요소 : button, input, progress, select, textarea
  • for : 참조할 라벨 가능 요소의 id 속성 값
  • inline Tag

04. button Tag

  • 선택 가능한 버튼을 지정
  • autofocus : 페이지가 로드될 때 자동으로 포커스 : boolean, 문서 내 고유해야 함
  • disabled : 버튼을 비활성화 : boolean
  • form : form Tag의 id 속성 값 : 해당 form의 후손이 아닐 경우만
  • name : 폼 데이터와 함께 전송될 버튼의 이름
  • type : 버튼의 타입 : button, reset, submit

05. textarea

  • 여러 줄의 일반 텍스트 양식
  • autocomplate : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
  • autofocus : 페이지가 로드될 때 자동으로 포커스 : boolean, 문서 내 고유해야 함
  • disabled : 버튼을 비활성화 : boolean
  • form : form Tag의 id 속성 값 : 해당 form의 후손이 아닐 경우만
  • maxlength : 입력 가능한 최대 문자 수 : Number(무한)
  • name : 폼 데이터와 함께 전송될 버튼의 이름
  • placehorder : 사용자가 입력할 값의 힌트
  • readonly : 수정 불가능한 읽기 전용 : boolean
  • rows : 양식의 줄 수 : Number

06. fieldset & legend Tag

  • 같은 목적의 양식을 그룹화(fieldset)하여 제목(legend)을 지정
  • disabled : 그룹 내 모든 양식 요소를 비활성화 : boolean
  • form : 그룹이 속할 하나 이상의 form tag의 id 속성 값
  • name : 그룹의 이름

07. selec Tag

  • 옵션을 선택하는 메뉴
  • autocomplate : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 : on(default), off
  • disabled : 선택 메뉴를 비활성화 : boolean
  • form : 선택 메뉴가 속할 하나 이상의 form Tag의 id 속성 값
  • muliple : 다중 선택 여부 : boolean
  • name : 선택 메뉴의 이름
  • size : 한 번에 볼 수 있는 행의 개수 : Number, 0(1과 같음, default)

08. optgroup

  • option을 그룹화
  • label : (필수)옵션 그룹의 이름
  • disabled : 옵션 그룹을 비활성화 : boolean

09. option

  • 선택 메뉴(select)나 자동완성(datalist)에서 사용될 옵션
  • 선택적 empty tag로 사용 가능
  • disabled : 선택 메뉴를 비활성화 : boolean
  • label : 표시될 옵션의 제목 : 생략되면 포함된 텍스트를 표시
  • value : 양식으로 제출될 값 : 생략되면 포함된 텍스트를 값으로 사용
  • selected : 옵션이 선택되었음을 표시 : boolean
<select name="Coffee">
	<optgroup label="Coffee">
		<option>Americano</option>
		<option>Caffe Mocha</option>
		<option value="Cappuccino" label="cappuccino"></option>
	</optgroup>
	<optgroup label="Latte" disabled>
		<option>Caffe Latte</option>
		<option>Vanulla Latte</option>
	</optgroup>
	<optgroup>
		<option>Plain</option> 
	</optgroup>
</select>

10. datalist

  • input Tag에 미리 정의된 옵션을 지정하여 자동 완성(Autocomplete)기능을 제공하는 데 사용
  • input Tag의 list 속성 바인딩
  • option Tag을 포함하여 정의된 옵션을 지정
 <input type="text" list="fruits">
<datalist id="fruits">
	<option>Apple</option>
	<option>Orange</option>
	<option>Banana</option>
</datalist>

11. progress Tag

  • 작업의 완료 진행률을 표사(load bar)
  • inline-block
  • max : 작업의 총량 : Number
  • value : 작업의 진행량 : Number, max 속성을 생략할 경우 0~1 사이의 숫자여야 함

04. Block & Inline Tag(Level)

-1. block

  • div, h1, p ..
  • 사용 가능한 최대 가로 너비를 사용한다.
  • 사용 가능한 최대 가로 너비를 사용한다.
  • 크기를 지정할 수 있다.
  • (default, width:auto; height: auto;)
  • (시작, width:100%, height:0;)
  • 수직으로 쌓임
  • margin, padding 위, 아래, 좌, 우 사용 가능하다.
  • 레이아웃

-2. inline

  • span, img ..
  • 필요한 만큼의 너비를 사용한다.
    -크기를 지정할 수 없다.
  • (width:0; height:0; 시작)
  • 수평으로 쌓임
  • margin, padding 위, 아래 사용 불가
  • TEXT

-3. display

  • 강제로 요소를 변경(CSS3)
  • display : inline | block | inline-block ..
  • 태그 요소를 변경할 때 사용하는 css properties

05. Semantic Tags

  • 의미가 있는 태그, 구역을 나누는 태그

-1. header tag

  • <header></header>
  • 소개 및 탐색에 도움을 주는 콘텐츠(로고, 메뉴)
  • header tag and footer tag, address tag 안에서는 자손으로 올 수 없다.
  • <footer></footer>
  • 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냄
  • 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
  • header tag and footer tag, address tag 안에서는 자손으로 올 수 없다.

-3. main tag

  • <main></main>
  • 문서 body tag의 주요 콘텐츠를 나타냄
  • 콘텐츠 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적 연관된 콘텐츠들로 이루어짐
  • 문서 당 하나의 태그
  • 인터넷 익스플로럴에서는 호환되지 않음

-4. article tag

  • <article></article>
  • 독립적으로 구분되거나 재사용 가능한 영역을 설정
  • (매거진/신문 기사, 블로그 포스터 등)
  • 일반적으로 h1 ~ h6를 포함하여 식별
  • 작성일자와 시간을 time tag의 datetime 속성으로 작성

-5. section tag

  • <section></section>
  • 문서의 일반적인 영역을 설정
  • 일반적으로 h1 ~ h6를 포함하여 식별
  • 의미가 강한 순서
    • article : 독립, 제목
    • section : 제목
    • div : X

-6. aside tag

  • <aside></aside>
  • 문서의 별도 콘텐츠를 설정 (보통 광고나 기타 링크 등의 사이드바 설정)

-7. nav tag

  • <nav></nav>
  • 다른 페이지 링크를 제공하는 영역 (Navigation, 보통 메뉴 Home, About, Contact, 목차, 색인 등을 설정)

-8. address tag

  • <address></address>
  • body, article, footer tag 등에서 연락처 정보를 제공하기 위해 포함

-9. time tag

  • <time></time>
  • 날짜나 시간을 나타내기 위한 목적
  • detetime(유효한 날짜 문자) : Date
  • IE 지원 불가
  • <p>The Cure will be celebrating their 40th annibersary on <time datetime="2018-07-07">July 7</time> </p>

06. 전역 속성(Global Attributes)

  • 모든 HTML 요소에서 공통적으로 사용 가능한 속성

-1. class Attributes

  • 공백으로 구분된 요소의 별칭을 지정
  • CSS혹은 JS의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근
  • 별명, .class명

-2. id Attributes

  • 문서에서 고유한 식별자(Idenifier, ID)를 정의
  • CSS 혹은 JS의 요소 선택기(CSS 선택자나 GetElementsById, QuerySelector 같은)를 통해서 요소를 선택하거나 접근
  • 이름(고유), #id명

-3. style Attributes

  • 요소에 적용할 CSS를 선언.
  • 인라인 방식(Tag 내에 직접 입력)

-4. title Attributes

  • 요소의 정보(설명)을 지정
  • 인라인 방식
<h2 title="이 부분은 제목2입니다">제목2</h2>

-5. lang Attributes

  • 요소의 언어(ISO 639-1)를 지정
<p lang="en">This paragraph is English</p>

-6. data-* Attributes

  • 사용자 정의 데이터 속성을 지정
  • HTML에 JS에서 이용할 수 잇는 데이터(정보)를 저장하는 용도로 사용
  • data-뒤에는 내가 원하는 대로 작성
<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div>
<script>
	const $me = document.getElementById("me");
	console.log($me.dataset.myName);
	console.log($me.dataset.myAge);
</script>

-7. draggable Attributes

  • 요소가 Drag and Drop API를 사용 가능한지 여부를 지정
  • draggable = "auto"(default)
<div draggable="true">The element to drag</div>

-8. hidden Attributes

  • 요소를 숨김
<form action="" id="hiddenForm">
	<!-- 숨겨진 양식들 -->
</form>
<button form="hiddenForm" type="submit">전송</button>

-9. tabindex Attributes

  • Tab 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
  • 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정 됨
  • 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용
  • tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능
  • tabindex="1"이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음

07. 경로

-1. 상대 경로

  • 현재 파일 위치를 기준으로 경로 찾는 방법
  • ./(생략 가능) : 현재 위치
  • ../ : 상위 위치

-2. 절대 경로

  • 최상위를 기준으로 경로 찾는 방법
  • http(https)
  • /(//)

-3. HTML Entitties

2. 추가 설명

01. Semantic Tags(Semantic Markup)

  • 의마의, 의미가 있는
  • SEO(Search Engine Optimization)(검색 최적화)
  • Accessibility(웹 접근성, 스크린리더, 키보드만을 사용하는 경우에 정적힐 동작)
  • header : 웹 사이트의 브랜드를 나타내는 로고나 메뉴가 들어가는 경우
  • nav : 헤더안의 다양한 메뉴를 나타낼 때
  • footer : 부가적인 정보나 링크가 들어가는 경우
  • main : 중요한 콘텐츠
  • aside : 페이지와 상관이 없는 부가적인 정보(광고)
  • section : 연관된 내용들을 묶어줄 때
  • article : 블로그 포스트의 포스트 하나, 신문 기사의 기사 하나, 독립적인 콘텐츠

02. i vs em

  • 이탤릭체
  • i는 시각적으로만 이탤릭체
  • em은 강조하는 이탤릭체

03. b vs strong

  • 볼드체
  • b는 시각적으로만 볼드체
  • strong은 정말 중요한 볼드체

04. ol vs ul vs dl

  • ol : 순서가 중요
  • ul : 순서 없음
  • dl : 정의, 설명 목록

05. img vs background-image

  • img : 이미지가 웹 페이지 안에서 하나의 중요한 콘텐츠 일경우 사용
  • background-image : 콘텐츠와 상관없는 경우

06. button vs a

  • button : 특정한 액션을 위해서
  • a : 어디론가 이동할 때(링크)

07. table vs css

  • table : 데이터의 양이 많아서 처리해야 되는 경우
  • css : 단순히 구조를 위한 경우 flex, grid 사용
profile
아직까지는 코린이!

0개의 댓글