[HTML] HTML 기초

힛짱·2022년 10월 10일

emmet html 시멘틱 태그 웹 접근성

HTML

목록 보기

1/1

html 기초

오늘 배운 것 중, 가장 중요하다고 생각되는 두 가지

1. 시멘틱한 태그의 사용

html 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정해야 한다.

시멘틱 태그 사용의 장점

	1. 검색엔진최적화(SEO)
	2. 시각장애가 있는 사용자들의 페이지 탐색을 도움
	3. 의미있는 요소는 명확한 의미를 전달함

2. 웹 접근성의 중요성

시멘틱 태그 사용은 결국 웹 접근성을 더 좋게 하기 위한 게 아닐까 생각한다.
네이버 홈페이지를 뜯어보니, 페이지를 만들 때 정말 많은 것을 고려해야 한다는 것을 알게 되었다.

Emmet

강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인

	h1 : <h1></h1>
    h1{hello} : <h1>hello</h1>
    h1{hello world} : <h1>hello world</h1>
    p{hello}*5 : 
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
    p>strong : <p><strong></strong></p>
    h1+h2+p : 
        <h1></h1>
        <h2></h2>
        <p></p>
    h1#one : <h1 id="one"></h1>
    h1.one : <h1 class="one"></h1>
    #one : <div id="one"></div>
    .one : <div class="one"></div>
    h1#one.two.three.four : <h1 id="one" class="two three four"></h1>
    
	h$*6 : 
        <h1></h1>
        <h2></h2>
        <h3></h3>
        <h4></h4>
        <h5></h5>
        <h6></h6>
    h${hello}*6 : 
        <h1>hello</h1>
        <h2>hello</h2>
        <h3>hello</h3>
        <h4>hello</h4>
        <h5>hello</h5>
        <h6>hello</h6>
    div.container_$*6 : 
        <div class="container_1"></div>
        <div class="container_2"></div>
        <div class="container_3"></div>
        <div class="container_4"></div>
        <div class="container_5"></div>
        <div class="container_6"></div>
    div.container_$.row_$*6 :
        <div class="container_1 row_1"></div>
        <div class="container_2 row_2"></div>
        <div class="container_3 row_3"></div>
        <div class="container_4 row_4"></div>
        <div class="container_5 row_5"></div>
        <div class="container_6 row_6"></div>

    lorem
    lorem5 : 단어
    lorem*5 : 문단
    img : <img src="" alt="">
    img:z : <img src="" alt="" sizes="" srcset="">
    p[a="value1" b="value2" c=1 d=value3] : <p a="value" b="value2" c="1" d="value3"></p>
    a[href="https://www.naver.com"] : <a href="https://www.naver.com"></a>
	
	<!-- table -->
    table>tr>td*5 :
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    table>tr>td*5 :
    table>(tr>td{hello}*5)*5 :
    table>tr*5>td*5 :
    table>(thead>tr>th{제목}*5)+(tbody>tr*5>td{내용}*5)+tfoot>tr>td*5 :

Element & metadata

HTML의 가장 기본적인 요소

<!DOCTYPE html> : 문서의 타입에 대한 정보를 제공

<html> : lang 속성을 통해 주 언어 설정(검색엔진, 스크린리더 작동에 영향을 줌)

<head> : 문서에 적용되는 메타데이터의 집합

<title> : 문서의 제목(반드시 한번만 사용)

<link> : 외부의 자원을 문서와 연결

<meta> : 인코딩, 페이지 설명 정보, 모바일 사이즈 값 설정 ..

Section

<body> : 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소

<header> : 특정한 컨텐츠의 시작 부분을 나타내는 요소 → 구역의 제목을 포함

<section> : 연관성 있는 문서의 구획을 나누고자 할 때 사용하는 요소

<article> : 독립적으로 구분하거나 재사용할 수 있는 구획을 나타내는 요소

❓ section vs article

	- section : 사이트 내 연관 콘텐츠
	- article : 독립적 콘텐츠
	- heading 요소와 함께 사용하는 것을 권장(비워두기도 함)

<h1> .. <h6> : 제목을 지정하기 위한 요소 → 중요도에 따라 사용

힛짱