<9> HTML & CSS

[전역 속성]

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

class: 공백으로 구분된 요소의 별칭을 지정, CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근(중복 사용가능)

id: 문서에서 고유한 식별자(idenifier, ID)를 정의, CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근(고유한 요소여야 함)

style: 요소에 적용할 CSS를 선언

title: 요소의 정보(설명)을 지정

lang: 요소의 언어(ISO 639-1)를 지정

data-*: 사용자 정의 데이터 속성을 지정, HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용

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

값: true, false 기본값:auto(브라우저가 판단)

hidden: 요소를 숨김

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

대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨

비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용

tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능

tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음

[생략한 요소]

<template>: 렌더링되지 않는 콘텐츠를 보유, JavaScript를 사용해 렌더링

반복적으로 사용하는 콘텐츠에 활용, IE 지원 불가

<map>, <area>: 클라이언트 측 이미지 맵(<map>)과 클릭 가능한 영역(<are>)을 정의(<img />와 연결해 사용)

<picture>: 이미지를 삽입(<img />의 srcset, sizes로 대체 가능)

<source>: 브라우저가 선택 가능한 <audio>, <video>, <picture>등의 다중 미디어 리소스를 지정

<track>: <audio>, <video> 같은 미디어가 재생 중일 때 표시될 자막, 캡션 파일 등을 지정

<param>: <object>의 매개 변수를 정의

[절대경로와 상대 경로]

상대경로: 한 파일을 기준으로 주변에서 찾는 개념

ex) <img src="./assets/images/xxx.jpg"> →에서 ./는 생략 가능

절대경로: 경로가 절대적임(바뀌지 않는 경로)

ex)http(http), /(//)→도메인 주소를 생략하는 것

[주석]

화면에 출력되지 않게 메모해놓는 것, 하고자하는 곳을 드래그 한 후 "ctrl + /"

ex) (html), // const a = 0;(js)

[특수기호]

  : 띄어쓰기

< , > : <, >

Hyeon_E의 배움터