HTML 클래스/아이디/스타일/경로

전역속성(Gloval Attributes)

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

 

class

• 공백으로 구분된 요소의 별칭 지정

• CSS 혹은 JavaScript에서 요소 선택 혹은 접근 가능함

id

• 문서에서 고유한 식별자를 성의

• CSS 혹은 JavaScript에서 요소 선택 혹은 접근 가능함

 

style

• 요소에 적용할 CSS를 선언

 

title

• 요소의 정보를 지정

 

lang

• 요소의 언어를 지정

 

data-*

• 사용자 정의 데이터 속성을 지정

• JavaScript에서 이용할 수 있는 데이터를 저장하는 용도로 사용

• (html에서는 -를 사용하지만 js에서는 카멜표기법을 사용해야 함)

 

draggable

• 요소가 Drag and Drop API를 사용 가능한지 여부를 지정

• Default 값은 auto임

 

hidden

• 요소를 숨김

tabindex

• tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정

• 대화형 컨텐츠는 코드 순서대로 탭순서가 지정됨

• (audio, img, input, menu, button 등)

• tabindex="0"을 지정해 코드 순서대로 포커스를 하게 할 수 있음

• tabindex="1" 이상의 양수를 넣으면 숫자 순서대로 포커스를 하지만 논리적 흐름 방해할 수 있음

• tabindex="-1" 과 같이 음수를 넣으면 포커스는 되지만 tabindex에서 제외 됨

 

절대경로와 상대경로

 

상대경로

• ./: 주변에 있는 파일 혹은 폴더를 찾음(생략가능)

• ../: 폴더 밖에 있는 폴더나 파일을 찾음

 

절대경로

• http(https): 전체 틀을 기준으로 경로에 해당하는 파일을 찾아나가는 방법, 똑같은 이미지에 대해서 어디서 불러오든 같은 경로를 입력 하는 것임

• /(//): 도메인 주소를 생략할 때 사용함

 

주석(Comment)

• 대부분의 에디터에서는 ctrl +/를 누르면 주석처리가 됨

• HTML: <!--주석-->

• CSS: /* 주석 */

• JavaScript: //주석, /*주석*/

특수기호(Entities)

• &nbsp; -> 띄어쓰기 한번을 의미함, 여러번 중첩 사용 가능

• &lt;tag&gt; -> 꺽새괄호(<>)를 표시하는 방법

• HTML Entity List 사이트에서 확인 하기