HTML

seumomo_TAEILKIM·2023년 5월 30일

frontend html 프론트엔드

총정리

목록 보기

1/8

2023/08/23

HTML

HyperText Markup Language
=> 웹을 이루는 기초적인 구성 요소로써, 컨텐츠의 의미와 구조를 정의한다

HyperText
=> 웹 페이지를 다른 페이지로 연결하는 링크

Markup
=> 컨텐츠를 표시하기 위한 구조

기본문법

<여는태그 속성="값">컨텐츠<닫는태그>

닫는 태그를 사용하지 않을 수 있는 태그도 있다
=> 컨텐츠를 감싸지 않음

<html>
	<head>
	</head>
	<body>
	</body>
</html>

html 태그 안에 head 태그와 body 태그만을 자식요소로 순서대로 삽입한다.

html
=> 문서의 루트

head
=> 기계가 식별할 수 있는 문서 정보

body
=> 문서의 내용

문서 타입 정의

<!DOCTYPE html>을 최상단에 선언함으로써 해당 문서는 표준 모드로 렌더링 되도록 한다.

웹브라우저를 표현하기 위한 레이아웃 엔진으로는 호환 모드, 거의 표준 모드, 표준 모드가 존재한다

호환 모드
=> 과거의 방식으로 제작된 웹사이트들을 표현하기 위함

거의 표준 모드
=> 소수의 호환 모드만을 지원

표준 모드
=> 오늘날 제작되는 브라우저들은 W3C에서 제정된 웹표준을 기반으로 만들어진다

언어 설정

html 태그에 lang 속성을 삽입하여 값으로 해당 문서에서 주로 사용될 언어를 설정한다.

<html lang="언어-국가코드">
=> 한국어의 경우, <html lang="ko-KR">

스크린 리더에서 읽어줄 때 사용될 언어로 설정되기도 한다

제목(heading)

h1태그부터 h6태그까지 사용하며, 구획의 단계와 컨텐츠의 구조를 나타낸다.

h1은 필수적으로 문서에서 한번만 사용한다

무조건 h1부터 시작하며, heading 레벨을 건너뛰면 안 된다

글씨 크기를 위해 heading 요소를 사용해서는 안 된다

단락(paragraph)

p태그를 사용하며, 하나의 단락을 나타낸다.

block 요소이며, 하위에 다른 block 요소가 오게 되면 닫는 태그를 생략할 수 있다

피규어(figure)

주로 이미지, 영상,도표 등을 감싸주며, 문서 내에서 삭제하거나 이동해도 문서의 흐름과 상관없을 때 사용한다.

컨텐츠와 하나의 figcaption 요소를 감싸준다
=> figcaption은 figure 요소의 처음이나 끝에 위치하며, 해당 컨텐츠에 대한 설명을 나타낸다

이미지(image)

이미지를 삽입하는 방법 중 하나로 src 속성을 필수로 가지며, 선택적으로 alt 속성을 가진다.

src 속성으로 해당 이미지의 경로를 설정한다

alt 속성은 해당 이미지에 대한 간단한 설명을 나타내며, 필수는 아니지만 접근성 측면에서 사용하는 것이 좋다
=> figcaption 등을 사용해서 이미지에 대한 설명이 존재한다면 생략해도 무방하다

srcset 속성으로 이미지의 후보를 지정하고 반응형 이미지를 구현할 수 있다

닫는 태그는 가지지 않는다

이미지로 삽입하면 키보드로 선택이 안 된다

순차 목록, 비순차 목록

순차 목록은 ol, 비순차 목록은 ul을 사용하고, 각 목록의 항목은 li를 사용한다.

자식 요소로써는 <li>, <script>, <template>만 가질 수 있다.

순차 목록(ordered list)

순서를 바꿀 때 의미도 바뀌면 순차 목록을 사용한다.

reversed 속성으로 순서를 역순으로 배열되도록 할 수 있다

start 속성으로 순서의 시작을 바꿀 수 있다

type 속성으로 기본적으로 표시될 list-type을 지정할 수 있다
=> 기본값은 1(숫자로 표현)

비순차 목록(unordered list)

기본적으로 list-type은 불릿 기호로 표현된다.

목록의 항목(list item)

각 목록의 항목들을 나타낼 때 사용되며, ul, ol, menu 안에만 위치할 수 있다.

바로 뒤에 다른 li가 오거나 마지막 li인 경우에는 닫는 태그를 생략할 수 있다

value 속성을 사용하여 순서의 시작을 지정하거나, type 속성으로 list-type을 지정할 수 있다
=> ol 요소에서 지정하는 유형을 덮어쓴다

설명 목록

용어와 그에 대한 설명을 나타낼 때 사용한다.

문법상 제한이 많아 현업에선 선호하지는 않는다.

가능한 자식요소로써는 <dt>, <dd>, <div>, <script>, <template>만 가질 수 있다.
=> <dt>, <dd>는 반드시 1개 이상 가져야 한다.

<dl>(description list)
=> 설명 목록

<dt>(definition term)
=> 설명할 용어

<dd>(definition description)
=> 용어를 설명할 내용

앵커(anchor)

href 속성을 통해 주로 다른 페이지나 같은 페이지 내의 지정한 위치로 이동한다.

줄 수 있는 속성

href
=> 하이퍼링크가 가리키는 url

download
=> 링크로 이동하는 대신 url을 저장할 수 있도록 한다

target
=> url을 표시할 위치를 설정한다
=> 주로 _blank의 값을 줘서 새 탭/창에 url이 표시되도록 한다

target="_blank"가 적용된 링크 열 때를 이용한 탭 내빙 공격이 있다
(새롭게 열린 페이지에서 원본 페이지에 접근하는 피싱공격)

rel="noopener" 속성값으로 원본 페이지와 별개로 새로운 최상위 브라우징 컨텍스트를 생성하도록 링크를 열어서 방지한다.

rel="noreferrer" 속성값으로 해당 링크를 클릭할 때 사용자가 어디서 왔는지에 대한 정보를 주지 않는다.
=> 구형 브라우저에서는 norefferer만 사용이 가능하여, 일반적으로 두 속성값을 같이 사용한다.

접근성 고려하기

새 탭/창을 열거나 다운로드되도록 앵커를 설정했을 때, 갑자기 탭/창이 열리는 등 예상치 못한 일이 벌어졌을 때는 당황할 수 있기 때문에 링크를 클릭했을 때 일어날 일에 대한 설명을 해야 한다.

<a target="_blank" href="링크 주소">
설명 텍스트
</a>

위와 같이 a 태그 안에 설명 텍스트를 삽입해서 사전에 정보를 제공해 준다.

인용문

짧은 인용문에서는 <q>를 사용하고, 긴 인용문에서는 <blockquote>를 사용한다.

자동으로 큰 따옴표가 삽입된다.

<blockquote>에서는 자동으로 들여쓰기가 된다.

인용문의 출처를 가리킬 때는 cite속성을 사용한다.

cite속성

값에는 반드시 제목을 포함해야 한다.

자동으로 기울임꼴로 표현된다.

어휘 요소

텍스트를 강조하거나 다른 일반적인 텍스트와 구분하기 위해 사용되며, 스타일을 위해서 사용해서는 안 된다.

의미가 있는 요소

strong
중요한 부분을 강조할 때 사용된다.

em
음성의 강조처럼 문장의 일부분을 강조해서 의미를 변경하는 데에 사용된다.

의미가 없는 요소

b
과거에는 의미 없이 굵은 글씨를 나타낼 때 사용되었으나, 굵은 글씨는 CSS로 구현하기 때문에 사용할 일이 잘 없을 것 같다.

i
기술 용어, 외국어, 생각 등 단순히 주위의 텍스트와 구분하기 위해 사용된다.

섹션/메인 요소

모든 섹션은 가급적 heading을 가진다.

section

컨텐츠의 그룹으로, 더 적합한 의미를 가진 요소가 없을 때 사용한다.

논리적인 흐름 없이 감싸기 위한 목적이라면 <div>가 적합하다.

<address>의 자손이 될 수 없다.

article

문서 내에서 독립적으로 구분되는 섹션에서 사용한다.

독립적인 요소이기 때문에 다른 <article>과 구분이 되기 위해 가급적 heading을 가지도록 한다.

<address>의 자손이 될 수 없다.

제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함한다.

<header>, <footer>가 자손으로 올 수 없다.

<address>, <footer>, <header>의 자손이 될 수 없다.

main

문서의 body로써 주요 컨텐츠들을 포함한다.

main은 여러개가 있어도 되지만 보이는 것은 1개여야만 한다.
=> 나머지 main은 hidden되어야 한다.

article, section, aside, nav의 자식이 될 수 없다.

header, footer의 자식이 될 수 없다.

일반적으로 작성자 및 저작권의 정보, 관련 문서의 내용을 담는다.

header와 다른 footer를 자손으로 가질 수 없다.

address, header의 자손이 될 수 없다.

접근성 고려하기

일부 스크린 리더에서 footer의 랜드마크 역할을 표시하지 않는 문제가 있다.
=> role="contentinfo"를 추가해서 해결한다.

랜드마크
nav, main 등과 같은 요소가 올바르게 사용된다면 스크린 리더 사용자들이 찾고자 하는 정보에 더 편하게 접근할 수 있다.

nav

문서 내/외부의 링크를 카테고리처럼 보여준다.

각 카테고리들을 나열할 때 ul을 사용한다.

aside

주로 사이드바 등과 같이 광고를 담거나, 메인 컨텐츠와 관련이 적은 컨텐츠를 담는다.

address의 자손이 될 수 없다.

address

사람, 단체 조직 등에 대한 정보만을 담는다.

보통 footer 안에 위치한다.

컨테이너 요소

컨테이너 요소들은 의므는 가지지 않고 다른 요소들을 감싸줄 때 사용한다.
=> 감싸줄 다른 적절한 요소가 없을 때에 사용한다.

<div>
=> block 요소
<span>
=> inline 요소

텍스트 레벨 요소

<sub>
=> 아래 첨자
<sup>
=> 위 첨자
<mark>
=> 주변 텍스트의 참조 목적으로 강조할 때 사용한다.
<s>
=> 더이상 관련이 없거나 정확하지 않을 때 사용한다.
<time>
=> 시간, 날짜, 기간을 나타낼 때 사용한다.
=> datetime속성의 값으로 yyyy-mm-ddThh:mm:ss을 줘서 기계가 읽을 수 있는 시간을 나타낸다.
<abbr>
=> 약어를 나타낼 때 사용한다.
=> title속성으로 약어에 대한 설명을 제공한다.

폼 요소

input

input에 들어가는 숫자 값은 string이다.

patter 속성
=> pattern="^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[~!@#$%^&*]).{8,15}$"
=> 영어 대소문자(A-Za_z), 숫자(0-9), 특수문자(~!@#$%^&*)를 각각 포함해서 8~15자

HTML 표준

HTML 4.01

HTML 5

XHTML 1.0

웹 접근성

모바일 세로모드
=> portrait모드

모바일 가로모드
=> landscape모드

임베디드

문서에 포함할 수 있는 컨텐츠 요소

picture
=> 반응형 이미지 구현

video
=> 자동재생하려면 autoplay 논리속성 추가
단, muted 속성을 추가해야 함(웹 접근성 고려)

map
=> 하나에 사진에서 좌표값으로 각각 다른 링크로 연결되도록 하고 싶을 때

source
=> picture, video, audio 요소에 사용
=> 환경이나 조건에 맞는 최적의 요소를 출력하기 위해 사용
=> source 요소는 존재하지 않을 수 있음
=> source 요소를 지원한다면 우선하여 출력됨

iframe
=> 외부의 html 페이지를 문서에 포함시킬 때 사용

fallback
=> 여러가지 확장자의 파일들을 추가로 넣어서
올려둔 파일을 지원하지 않을 경우에 대체되도록 하여 출력되도록 하는 것

테이블

가급적 caption(제목)을 추가하도록 하자

tr
=> 행

th
=> 열 머리글 또는 행 머리글에 사용
=> scope 속성으로 열인지 행인지 표시하기
=> 복잡할 때는 id/headers 방식 사용

td
=> 내용

thead, tfoot은 한번만 사용하나,
tbody는 여러번 사용할 수 있다

폼

웹 문서가 상호작용되도록 사용

action 속성에 전송할 주소를 적는다

민감한 개인정보는 method에 POST방식을 사용한다
=> 기본값은 GET방식

폼 관련 요소에는 lable이 반드시 있어야 한다.

lable
=> 폼 관련 요소에 대한 설명
=> for 속성과 이름표를 붙일 태그의 id 속성과 연결시킨다

button태그가 form태그 밖에 있어도 가능하다.
=> form태그에 id를 주고 button태그에 form속성을 줘서 연결

button의 type값을 생략하면 기본값은 submit이다

기능을 구현할 때 button 요소 사용

name 속성
=> 저장될 때에 알아보기 위한 이름

input
=> minlength, maxlength 속성으로 최소 또는 최대 글자 수를 정할 수 있다

인터렉티브

dialog
=> 팝업, 경고창 등과 같이 대화상자가 열리고 사용자와 상호작용 할 수 있음
=> 논리속성 open을 줘야 대화상자가 열린다

details
=> 보다 자세한 정보를 담는다
=> 논리속성 open을 주면 요약 정보가 열린 채로 출력된다

summary
=> details 내부에 위치하며, 요약된 정보를 열고 닫을 수 있다

스크립팅

css파일을 연결할 때
=> link태그 삽입
=> link가 import보다 속도에서 유리하다

javascript파일을 연결할 때
=> script태그 삽입
=> script태그의 src속성 뒤에 defer논리속성을 주면 script태그 위치에 따라 HTML이 해석이 되지 않는 것을 방지할 수 있다

=> 스크립트를 바디의 해석이 끝난 이후에 실행되도록 한다

속성

유저 인터렉션

tabindex
=> focus되지 않는 요소를 focus가 가능하도록 한다
=> 순서를 정할 수 있다

accesskey
=> 단축키
=> 웹접근성 측면에서도 유용하다

contenteditable
=> true값을 주면 사용자가 편집할 수 있게 된다

웹 접근성

aria-hidden="true" 속성값을 주면 screen reader에서는 읽히지 않는다.
=> 특수문자같이 시각적으로는 필요하지만 읽어줄 필요가 없는 부분들에 사용

aria-lable
=> 요소를 설명할 텍스트가 마땅히 없을 때에만 간단한 텍스트를 값으로 한다
=> 상호작용 요소에만 사용한다
(비 상호작용 요소에 사용 시, 값이 읽히지 않거나 상호작용 요소로 혼동시킬 수 있다)
=> 시맨틱 요소가 아닌 것에 사용할 경우에는 role 속성을 부여하고 사용한다

사용자 정의 속성

data-

data-로 시작하는 속성의 이름을 정의하고 값을 부여한다
=> css로 값을 사용할 때에는 attr(data속성)함수를 사용한다

ETC

숨김 제목
=> 보이지 않게 처리하지만 구조상 존재해야 하는 경우에 사용

탭을 했을 때 테두리가 일그러지면 display를 block으로 주면 해결될 수 있다

seumomo_TAEILKIM

어제의 나보다 1% 발전하기💪

다음 포스트

HTML

총정리

HTML

기본문법

문서 타입 정의

언어 설정

제목(heading)

단락(paragraph)

피규어(figure)

이미지(image)

목록

순차 목록, 비순차 목록

순차 목록(ordered list)

비순차 목록(unordered list)

목록의 항목(list item)

설명 목록

앵커(anchor)

줄 수 있는 속성

접근성 고려하기

인용문

어휘 요소

의미가 있는 요소

의미가 없는 요소

섹션/메인 요소

section

article

header

main

footer

접근성 고려하기

nav

aside

address

컨테이너 요소

텍스트 레벨 요소

폼 요소

input

HTML 표준

웹 접근성

임베디드

테이블

폼

인터렉티브

스크립팅

속성

유저 인터렉션

웹 접근성

사용자 정의 속성

ETC

CSS

0개의 댓글