[HTML] HTML 정리
HTML
-
Hyper Text Markup Language은 웹 문서를 만드는 언어
-
하이퍼텍스트는 문서를 서로 연결해 주는 링크를 의미
-
마크업은 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미
-
웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
HTML 개론
<section class="article">테스트 용입니다</section>
-
Opening tag: Element의 이름과 열고 닫는 꺽쇠 괄호로 구성
-
Closing tag: Element의 끝(이 경우 단락의 끝 부분)에 위치
-
Content: Element의 내용
-
Element: Opening tag + Closing tag + content, 단 모든 요소가 이러한 구조를 따르는 것이 아니면
<img>인 경우 content가 없으며 이와 같은 void element라고 함 -
Element 안에 다른 Element가 들어갈 수 있으며, 이를 안에 있는 Element는 Nesting Element
-
attributes: Element에서 실제로 보이지는 않지만, 추가적인 내용을 의미. 따옴표를 붙이지 않아도 작동은 하지만, 속성이 복수일 경우 문제 발생
HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<article>테스트 용입니다.</article>
</body>
</html>
-
<!DOCTYPE html>: Document type 지정 부분. html5를 사용한다는 것을 의미 -
<html lang="en">:<html>은 문서의 시작을 알리는 태그.lang속성은 문서에서 사용할 언어를 지정. 검색 사이트는 특정 언어로 제한해 검색할 때 이를 이용 -
<head>: 이용자에게는 보이지 않지만 문자 인코딩, content에 관한 HTTP 헤더, 표시영역과 같은 문서 정보(<meta>)와 문서 제목(<title>)으로 이루어짐. -
<body>: 실제 이용자가 보는 모든 화면을 의미
Semantic Tag
이름을 봐도 의미를 알 수 있는 태그. 기존의 태그는 소스 코드를 봐도 의미를 이해하기 힘들었으며, 문서 구조가 정확히 나누기 힘들었음. 그 결과 검색을 할 때에도 비효율성이 존재.
-
<header>: 헤더 영역. 주로 검색 창이나 사이트 메뉴를 삽입 -
<nav>: 웹 문서 안에 다른 위치로 연결하거나 또는 다른 웹 문서를 연결하는 링크 -
<main>: 메인 콘텐츠 영역 -
<article>: 독립적인 콘텐츠 영역.<section>영역과 병행해서 사용 -
<aside>: 사이드 바 영역 -
<footer>: 푸터 영역
Various Tags
-
<h1>: 제목을 나타내는 태그. 페이지 당<h1>은 하나만 사용 가능, 표제에 순서 대로 사용해야 하며, 꼭 필요한 경우가 아니라면 heading의 깊이는 3개 이하로 사용 -
<p>,<br>: 전자의 경우 텍스트 단락. 후자의 경우 줄 바꿈 -
<blockquote>: 인용할 때 사용 -
<strong>,<b>: 텍스트를 굵게 표시 -
<em>,<i>: 텍스트를 기울임 -
<ol>,<li>: 순서 있는 목록. type 속성은 영문자와 로마 숫자 등으로 순서를 나타낼 수 있으며, start 속성은 시작 번호 -
<ul>,<li>: 순서 없는 목록. -
<dl>,<dt>,<dd>: 이름과 값 형태로 된 목록 -
<table>,<caption>: 전자는 표의 시작과 끝, 후자는 표의 제목이며 표의 위쪽 중앙에 표시 -
<tr>,<td>: 전자는 행을 만들며, 후자는 셸을 만듬. 이때 td에서rowspan과colspan을 사용가능하며, 쉘을 합칠 수 있음 -
<thead>,<tbody>,<tfoot>: 표의 구조 -
<img>: 이미지를 삽일할 때 사용. src 속성은 이미지 파일 경로를 의미, alt 속성은 텍스트로 이미지를 설명하는 속성 -
<a>: 링크를 삽일할 때 사용. href 속성은 링크 경로를 의미, target 속성은 새 창에서 열리게 할 지를 판단(_blank)
댓글남기기