2024.08.12 기록

스타벅스 클론페이지 html5 웹표준 검사

<section>
	<h3>제목</h3>
</section>

section 태그는 h2~h6 제목 태그가 포함되어야함.
article 태그 내 section 태그 사용가능.

li 태그 앞 점 지우기

li {
    list-style: none;
}

---

<ul>
	<li>리스트
    	<div>내용</div>
    </li>
	<li>리스트
    	<div>내용</div>
    </li>
</ul>

ul 태그 내 직계 자식으로는 li 태그만 허용.
li 태그 내 div 사용가능.

---

Xhtml

<img src="image.jpg" alt="description"/>
<input type="text" name="username"/>
<link rel="stylesheet" href="styles.css"/>
<br/>

html5

<img src="image.jpg" alt="description">
<input type="text" name="username">
<link rel="stylesheet" href="styles.css">
<br>

등등, self-closing 태그 내에서는 끝에 붙는 / (슬러시)는 제거함.
Xhtml에서는 호환성 문제로 규칙이었으나 html5에서는 필요하지 않음.

---

as="style"

태그에서 as 속성을 사용할 때, rel="preload" 또는 "modulepreload" 값 포함
as="style"와 함께 rel="stylesheet"를 사용하려는 경우 as 제거, rel ="preload"로 설정.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" crossorigin>

<link rel="preload" as="style" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" crossorigin>

as="style"를 사용하는 경우 rel="preload"로 해야함.
기본적으로 as 속성을 제거, rel="stylesheet"만 사용하는 것이 표준.

웹표준 검사 완료.