• 추가 24/08/25
• 추가 25/01/24

HTML ?

---

HyperTextMarkupLanguage

HyperText - 하이퍼텍스트를 특징으로 하는
Markup = 마크업이라는 형식을 가진
Language = 언어

HTML은 웹 브라우저에 표시되는 웹 페이지를 만들어달라고 컴퓨터에게 요청하는 언어

Tag

---

* html에서 가장 중요

<h1>은 heading1 이라는 제목태그 줄바꿈이 일어남

약속된 태그에 따라서 HTML 코드를 작성해서 브라우저에게 제공을 해야지 내가 원하는 웹 페이지를 만들 수 있다.

속성

---

<h1>오늘의 명언</h1>
우리 모두는 자신의 힘으로 발견한 내용을 가장 쉽게 익힌다. 
(<a href="https://ko.wikipedia.org" target="_blank">도널드 커누스</a>) 

<a> : anchor의 약자 / 하이퍼링크를 생성하는데 사용
href : <a>태그의 속성 / 링크가 가리키는 URL을 지정

태그의 중첩과 목록

---

<li> : list item의 약자/ 단독으로 쓰이지않고 <ul>과 같이 써 그룹핑을 함

<li>수학</li>
<li>과학</li>
<li>영어</li>
<li>미술</li>

위 코드는 아래와 같이 표시됨

수학

과학

영어

미술

<ul>태그와 같이 쓸 때

<ul> : unordered list

---

<ul>
  <li>수학</li>
  <li>과학</li>
  <li>영어</li>
  <li>미술</li>
</ul>
<ul>
  <li>수학 1</li>
  <li>수학 2</li>
  <li>미적분</li>
  <li>확률과 통계</li>
</ul>

• 수학
• 과학
• 영어
• 미술

• 수학 1
• 수학 2
• 미적분
• 확률과 통계

<ol> 태그

<ol> : ordered list

---

<ol>
  <li>수학</li>
  <li>과학</li>
  <li>영어</li>
  <li>미술</li>
</ol>

1. 수학
2. 과학
3. 영어
4. 미술

참고

---

태그사전

테이블 표 태그 (추가 : 24/08/25)

---

<th></th> : table head의 약자, 표의 제목
<tr></tr> : table row의 약자, 가로줄을 만드는 역할
<td></td> : table data의 약자, 셀을 만드는 역할

label 태그 (추가 25/01/24)

htmlFor

htmlFor속성은 label태그를 특정한 폼 요소에 연결하기 위해 사용된다.

• htmlFor 속성의 값은 연결할 폼 요소의 id값과 같아야 한다.
• 사용자가 해당 label을 클릭했을 때 연결된 폼 요소가 자동으로 포커스

<label htmlFor="username">Username</label>
<input type="text" id="username" />

label(Username) 태그 클릭하면 자동으로 input 태그에 포커싱

aria-label

• aria-label은 요소에 시각적 텍스트가 없을 때 유용
• 보조 기술을 사용하는 사용자들에게 특정 요소의 목적을 전달
• HTML의 label 태그를 사용하지 않더라도 접근성을 유지

<button aria-label="Submit Form">
  <svg>...</svg>
</button>

버튼 내부에는 시작적으로 보이는 텍스트가 없지만, 화면 읽기 프로그램(Screen Render)은
"Submit Form"이라고 읽는다.