[HTML] 정리

wonyu·2022년 5월 7일
html
0

약 1년 전에 프로그래밍을 혼자 처음 공부하기 시작했을 때 생활코딩에서 HTML 강의를 들으면서 처음 들어보는 온갖 내용을 정리하기 바빴던 기억이 있다. 하지만 지금도, 어떤 HTML 강의를 들어도 왠지 새롭거나 자꾸 잊어버리는 용어/개념들이 있는 것 같다. 언젠가 또 다시 배울 날이 있을 수도 있지만 우선 지금 부족한 내용들을 정리해보고자 한다.

HTML

Hyper Text Markup Language

  • Markup Language의 특징: 정보를 구조적으로 표현 가능하다.

HTML 문법

  • HTML tags
  • 요소
    • 내용을 포함한 태그 전체 (태그와 혼동하지 않도록 주의)
  • 속성
    • 태그에 추가로 정보를 제공하거나, 태그의 동작/표현을 제어할 수 있는 설정값
    • 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성, 선택적으로 쓸 수 있는 속성과 필수 속성으로 구분된다.
    • 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
  • 태그 중첩
  • 빈 태그
    • 종료 태그가 필요하지 않은 태그 ex) <br> , <img src="">
  • 공백
    • 기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다.

문서의 기본 구조

  • 문서 타입 정의

    • <!DOCTYPE html>
    • 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언문
    • 반드시 문서 내 최상단에 선언되어야 함
  • 요소
    • <html lang="ko"></html>
    • lang 속성: 문서가 어느 언어로 작성되었는지를 의미
    • 자식으로 <head> 태그와 <body> 태그를 가짐
      • <head> 태그에 위치하는 태그들은 브라우저 화면에 표시되지 않음
        • 문서의 기본 정보 설정, 외부 css 및 js 파일을 연결하는 등의 역할
      • <meta> 태그의 charset 속성: 문자의 인코딩 방식 지정
        • ex) <meta charset="UTF-8">
      • <body> 태그에는 실제 브라우저 화면에 나타나는 내용이 들어감

HTML 태그

  • 테이블 요소
    • 구성요소
      • <table> : 표를 나타내는 태그
      • <tr> : 행을 나타내는 태그 (table row)
      • <th> : 제목 셀을 나타내는 태그
      • <td> : 셀을 나타내는 태그
    • 예시
      <!-- 하나의 table은 하나 이상의 tr로 이루어짐 -->
<table>
<!-- 위에서 밑으로, 좌측에서 우측으로 작성 -->
  <tr>
		<!-- tr은 th, td를 자식으로 가짐 -->
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
     <td>7</td>
    <td>8</td>
  </tr>
</table>
    • 표의 구조와 관련된 태그
      • <caption> : 표의 제목을 나타내는 태그
      • <thead> : 제목 행을 그룹화하는 태그
      • <tfoot> : 바닥 행을 그룹화하는 태그 (<tbody> 뒤에 위치해야 함)
      • <tbody> : 본문 행을 그룹화하는 태그
    • 예시
      <table>
  <caption>Monthly Savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
       <td>February</td>
       <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
     </tr>
  </tfoot>
</table>
  • 폼 요소
    • <label>
      • 의 for 속성과 form 요소의 id 속성을 같게 적어서 연결해줌 → label 클릭 시 해당 form 요소를 클릭한 것처럼 동작 & 스크린 리더를 통해 해당 form 요소에 접근 시 label을 함께 읽어줌 → 사용성&접근성 측면에서 중요한 역할
    • <fieldset>
      • 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
    • <legend>
      • 폼 요소의 제목. <fieldset> 내부 최상단에 작성
    • <form>
      • 대표적인 속성
        • action: 데이터를 처리하기 위한 서버의 주소
        • method: 데이터를 전송하는 방식을 지정 → get/post
    • 예시
      <!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	<form action="">
		<h1>Form 관련 요소</h1>
		<fieldset>
			<legend>기본 정보</legend>
			<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
			<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
			성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
		</fieldset>
		<fieldset>
			<legend>부가 정보</legend>
			취미 : 영화 감상 <input type="checkbox" name="hobby" checked>, 음악 감상 <input type="checkbox" name="hobby">, 독서 <input type="checkbox" name="hobby"><br>
			프로필 사진 업로드 : <input type="file"><br>
			사는 지역 : 
			<select>
				<option>서울</option>
				<option>경기</option>
				<option>강원</option>
				<option selected>제주</option>
			</select><br>
			자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
			<button type="submit">전송</button>
			<button type="reset">취소</button>
		</fieldset>
	</form>
</body>
</html>

HTML 시맨틱 요소


profile
wonyu
이전 포스트

[JavaScript] var, let, const 키워드 비교

다음 포스트

[CSS] 정리

0개의 댓글