개요
이전에 배웠던 HTML, CSS를 떠올리면서 이번에 배운 코드에 대해 면밀히 분석해보자.
1. test.html 코드 분석
HTML 기본구조
<!DOCTYPE html> : document 타입이 html 문서 <html> ~ </html> : 웹문서의 시작과 끝을 나타내는 태그 <head> ~ </head> : 웹문서의 정보에 대한 코드 작성 <body> ~ <body> : 웹문서에서 화면에 출력되는 코드 작성
HTML 페이지 구조
- 시멘틱 태그(
sementic tag) : 태그 이름으로 의미를 알수 있는 태그
- 그냥
<div>로 전부 해결 가능하기는 하지만, 이걸 사용함으로써 가시성이 높아짐- 시멘틱 태그로 웹페이지의 전체적인 구조를 구성
- 시멘틱 태그를 반드시 사용해야 하는것은 아님
<body> <div id="contents"> <header> <nav></nav> </header> <main> <section id="section1"></section> <section id="section2"></section> </main> <footer> </footer> </div> </body>
- ①
<header>: 헤더 영역 표현
- 웹 페이지의 맨 위에 위치하며, 일반적으로 사이트 로고, 메인 네비게이션, 검색 폼, 로그인 링크 등과 같은 중요한 콘텐츠를 포함합니다.
- ②
<nav>: 네이게이션 바 영역 표현
- HTML 문서에서 네비게이션 바(메뉴)를 표현하는데 사용됩니다. 이 요소는 주로 웹 페이지의 주요 링크나 섹션 간 이동을 위한 메뉴를 담습니다.
- ③
<main>: 전체 컨텐츠 영역 표현
- ④
<article>: 독립적인 컨텐츠 영역 표현
- ⑤
<section>: 컨텐츠 영역 표현 :article태그 안에 여러개의section태그 작성
<section>요소는 HTML 문서에서 콘텐츠를 그룹화하는 데 사용됩니다. 주로 관련된 콘텐츠를 묶거나 하나의 주제나 섹션을 나타냅니다. 이것은 웹 페이지를 구성하고 구조화하는 데 도움이 되며, 시맨틱 HTML을 사용하여 문서를 더욱 명확하게 만드는 데 기여합니다.
- ⑥
<aside>: 본문 오른쪽이나 왼쪽 영역 표현
- ⑦
<footer>: 웹문서 아래 영역 표현
실습1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>KT Aivle</title> </head> <body> <header> <img src="https://cfm.kt.com/images/v2/layout/gnb-ktlogo.png" alt="logo" /> Header <nav>nav</nav> </header> <main> Main <!--section1--> <section> <table> <caption> Title </caption> <thead> <tr> <th>#</th> <th>col1</th> <th>col2</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>kt</td> <td>aivle</td> </tr> <tr> <td>2</td> <td>html</td> <td>js</td> </tr> </tbody> </table> </section> <!--section2--> <section> section 2 <form action="https://kt.com/input_data" method="get"> <input class="name" type="text" /> <input class="age" type="text" /> <button type="submit">Send</button> </form> <a href="https://kt.com" target="_blank"> section 3</a> <input type="date" /> <input type="file" /> <input type="text" placeholder="아이디" /> <input type="checkbox" /> <label for="">아이디</label> <textarea name="" id="" cols="30" rows="10"></textarea> </section> </main> <footer>Footer</footer> </body> </html>section1 설명
- 현재 코드에서 첫 번째
<section>요소 안에는 하나의 테이블이 포함되어 있습니다.
- 이 테이블에는
캡션(Title)이 있고, 테이블 헤더(<thead>)와 본문(<tbody>)이 있습니다.
- 헤더에는 3개의 열로 이루어진 하나의 행(
<tr>)이 있으며, 각 열에는 #, col1, col2라는 제목이 있습니다.
- 본문에는 두 개의 행이 있으며, 각각의 행에는 번호와 두 가지 값이 있습니다.(1,kt,aivle) 과 (2,html,js)
section2 설명
"section 2": 이 섹션에 대한 제목이 포함되어 있습니다.
이는 해당 섹션의 주제나 내용을 간단히 설명합니다.
<form action="https://kt.com/input_data" method="get">: 폼 요소를 정의합니다.action속성은 데이터를 전송할 위치를 지정하고,method속성은 데이터를 전송하는 방법을 지정합니다.
<input class="name" type="text" />와<input class="age" type="text" />: 텍스트 입력 필드로, 각각 이름과 나이를 입력할 수 있는 필드입니다.
<button type="submit">Send</button>: 제출 버튼으로, 폼 데이터를 서버로 전송하는 역할을 합니다.
<a href="https://kt.com" target="_blank"> section 3</a>: 링크 요소로, "section 3"이라는 텍스트를 클릭하면 지정된 URL로 이동하게 됩니다.target="_blank"속성은 링크를 새 창에서 열도록 합니다.
<input type="date" />: 날짜를 입력할 수 있는 필드입니다.
<input type="file" />: 파일을 업로드할 수 있는 필드입니다.
<input type="text" placeholder="아이디" />: 텍스트 입력 필드로, "아이디"를 입력할 수 있습니다.placeholder속성은 입력 필드에 힌트를 제공합니다.
<input type="checkbox" />: 체크박스 요소로, 선택 항목을 표시하거나 선택을 해제할 수 있습니다.
<label for="">아이디</label>: 입력 필드에 대한 레이블을 나타냅니다.for속성은 해당 레이블과 연결된 입력 필드의 ID를 지정합니다.
<textarea name="" id="" cols="30" rows="10"></textarea>: 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역입니다.cols와rows속성은 텍스트 영역의 너비와 높이를 지정합니다.
2. Emmet
에밀렛(Emmet)은 HTML 코드를 빠르게 작성할 수 있는 도구입니다. 에밀렛을 사용하면 단축키를 통해 간단한 코드로 여러 요소를 생성할 수 있습니다.
p>span: 'p' 태그 안에 'span' 태그를 생성합니다. 예를 들어,<p><span></span></p>와 같이 'p' 태그 안에 'span' 태그가 만들어집니다.
p+span: 'p' 태그와 'span' 태그를 같은 레벨로 생성합니다. 즉,<p></p><span></span>와 같이 두 개의 엘리먼트가 생성됩니다.
(p>span)+(p>span): 괄호를 사용하여 묶으면 여러 그룹의 엘리먼트를 한 번에 생성할 수 있습니다. 이 경우에는<p><span></span></p><p><span></span></p>와 같이 두 개의 그룹이 생성됩니다.
p>span^p>span: '^'를 사용하면 상위 엘리먼트로 이동하여 엘리먼트를 생성할 수 있습니다. 이 경우에는<p><span></span></p><p><span></span></p>와 같이 두 개의 'span' 태그가 'p' 태그 안에 생성됩니다.
input:radio,input:checkbox,input:submit: 각각 라디오 버튼, 체크박스, 제출 버튼을 생성합니다.
#과.을 사용하여 아이디와 클래스를 지정할 수 있습니다. 예를 들어,p#data>span.text는 'p' 태그에 'data'라는 아이디를 주고, 그 안에 'span' 태그를 만들면서 'text' 클래스를 지정합니다.
*과$를 사용하여 반복되는 엘리먼트를 생성할 수 있습니다. 예를 들어,p#data>span.text*3는 'p' 태그 안에 'text' 클래스를 가진 'span' 태그를 세 번 생성합니다.
{}와[]를 사용하여 문자열과 속성값을 지정할 수 있습니다.{}안의 내용은 엘리먼트의 텍스트로 사용되며,[]안에는 속성과 값을 쌍으로 지정합니다.에밀렛을 사용하면 복잡한 HTML 코드도 간단하게 작성할 수 있어서, Velog와 같은 블로그나 문서 작성에 효과적으로 활용할 수 있습니다.
안녕하세요. 꾸준히 기록하는 hyowon입니다.