기본 구조 태그 유효 여부 검증 태그의 종류 태그 소개
🥝 HTML - 1. 기본 구조
🥕 HTML 구조
<!DOCTYPE html> // 1)
<html>
<head> // 2)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head> // 2-1)
<body> // 3)
</body> // 3-1)
</html>1) : 문서의 타입이 명시되어 있다.
2) ~ 2-1) : Meta Data 등의 상세 정보가 명시되어 있다. 검색 타이틀, 부가설명, 북마크의 제목 등이 정의되어 있음, CSS 파일을 연결할 수 있다.
3) ~ 3-1) : 사용자에게 보여지는 태그들이 명시되어 있다.
🥕 웹페이지 구조
웹페이지를 제작을 하기 위해서는 웹페이지의 구조를 아는 것이 중요하다. 모든 웹사이트 구조가 같지 않기 때문에 정확하지는 않더라도 구조를 파악할 수 있어야 한다. 아래 이미지는 직접 큰 틀에서 웹페이지의 구조를 분석해본 것이다.
Ctrl+Shift+C개발자 툴을 사용하여 웹페이지 구조를 확인할 수 있다.
-
Header
웹사이트의 상단에 위치하며 큰 제목, 로고, 태그라인 등이 있다. 보통 다른 웹페이지로 이동할 때에도 동일하게 유지된다.<header>태그를 사용한다. -
Navigation bar
메뉴버튼, 링크나 탭 등이 표시되는 메인 섹션의 링크들이다. Header처럼 다른 웹페이지로 이동 시 동일하거나 비슷하게 유지된다. 그렇지 않다면 사용자들이 웹페이지를 사용하는 데 있어 불편할 수 있다.<nav>태그를 사용한다. -
Main content
화면 중앙의 넓은 부분에 해당한다. 비디오, 글, 뉴스, 지도 등의 다양한 콘텐츠들이 표시되는 부분이다.<main>태그를 사용한다. 하위 섹션으로는<article>,<section>그리고<div>태그를 사용한다. -
Sidebar
주변 정보, 링크들, 문구나 광고 등이 표현되는 부분이다. 보통 메인 콘텐츠의 정보에 따라 Sidebar에 표시되는 정보도 달라진다. 가령 뉴스 기사 페이지가 메인 콘텐츠라면 Sidebar에는 작성자의 정보 또는 그와 관련 기사에 대한 링크가 포함될 수 있다.<aside>태그를 사용하며<main>내부에 위치한다. -
Footer
화면 하단에 위치하며 주로 저작권 표시, 연락처, 회사 정보 등의 내용을 담고 있다. 보통 부가적인 내용이 많이 위치한다.<footer>태그를 사용한다.
🥝 HTML - 2. 태그 유효 여부 검증
브라우저와 호환 가능한 태그를 사용했는지 여부를 검사하고 싶다면 Validator 홈페이지에서 확인할 수 있다. 간혹 브라우저에 에러가 있어도 브라우저는 똑똑하게 회복하여 사용자에게 보여주는 특징이 있다.
🥝 HTML - 3. 태그의 종류
태그는 크게 Box가 되는 태그들과 Item이 되는 태그로 나뉜다. 사용자가 볼 수 있는 Item 태그들이 있는가 하면 이 Item 태그들의 정리(Sectioning)를 도와주는 보이지 않는 Box 태그들이 있다. 이 Box 태그들은 CSS를 통해 스타일링이 가능하다.
🥕 Box
<header>, <footer>, <nav>, <aside>, <main>, <section>, <article>, <div>, <span>, <form> …
🥕 Item
<a>, <button>, <input>, <label>, <img>, <video>, <audio>, <map>, <canvas>, <table> …
🥝 HTML - 4. 태그 소개
기본적으로 흔하게 쓰이는 태그 몇 가지를 정리해본다.
🥕 링크 걸기
<a> 는 href (abbr. of Hypertext Reference) 속성을 사용하여 웹 페이지, 파일, 이메일 주소, 동일한 페이지의 위치 또는 URL이 지정할 수 있는 모든 항목에 대한 하이퍼링크를 생성한다.
1) 태그가 웹의 왕국이라면 <a> 는 그 왕국의 제왕이다.
2) 현대 HTML은 약 150여개로 이루어져 있지만 이들 모두 <a> 아래에 있다.
3) 검색 엔진은 <a> 덕분에 전 세계의 웹을 항해하며 결과를 얻어낼 수 있으며 <a> 없다면 검색 엔진은 존재하지 않는다.
4) <a> 는 도시를 연결하는 혈관, 도로와 같으며 <a> 가 없다면 전 세계 모든 웹페이지는 고립되었을 것이며 정보 혁명도 일어나지 않았을 것이다.
5) <a> 는 우리 일상에서 100번도 넘게 사용한다.
<a href="https://www.google.com" target=_blank>Google</a>- 주요 속성(Attribute)
1) href - 하이퍼링크를 가리키는 URL을 표시할 때 사용한다.
2) target - 링크된 URL을 표시할 위치나 화면을 가리킬 때 사용한다.
-_self: 현재 보고 있는 창 혹은 탭 (기본값)
-_blank: 보통은 새로운 탭을 의미. 사용자가 새 창에서 열도록 구성할 수 있음.
🥕 이미지 넣기
<img> 태그는 문서에 이미지를 넣을 때 사용한다. src 속성은 필수이며 포함하려는 이미지의 경로나 주소를 포함한다.
<img src="coding.jpg" width="450">
// 혹은
<img src="coding.jpg" width="100%">- 주요 속성(Attribute)
1) height - 이미지의 고유 높이(픽셀)다. 단위가 없는 정수여야 한다.
2) width - 이미지의 고유 너비(픽셀)이다. 단위가 없는 정수여야 한다.
3) src - 이미지 URL로써<img>태그에 필수이다.
🥕 Block level vs Inline
Block-level element는 parent element(컨테이너)의 전체 수평 공간을 차지하고 내용 높이와 동일한 수직 공간을 차지하여 "블록"을 만든다고 하여 Block-level element라고 이름 붙여졌다. 항상 새 줄에서 시작하고 사용 가능한 전체 너비를 차지한다.
- 주요 태그
<p>,<div>,<ol>,<ul>,<table>,<h1>…
Inline element는 내용의 흐름을 끊는 대신 요소를 정의하는 태그로 둘러싸인 공간만 차지하는 요소이다. 새 줄에서 시작하지 않고 필요한 만큼(보통 글자 주변)만 너비를 차지한다.
- 주요 태그
<a>,<br>,<em>,<span>,<u>…
🥕 목록 만들기 list (ol vs ul)
<ol>는 순서가 지정된 항목 목록을 나타내며 일반적으로 번호가 매겨진 목록으로 만들어진다.
<ul>는 순서대로 정렬되지 않은 항목 목록을 나타내며 일반적으로 글머리 기호 목록으로 만들어진다.
<li>는 목록의 항목을 나타내는 데 사용된다. 순서가 지정된 목록(<ol>), 순서가 지정되지 않은 목록(<ul>) 또는 메뉴(<menu>)와 같은 상위(부모) 요소에 포함되어야 한다.
유용한 shortcut :
ol(ul)>li*n(생성하고자 하는 갯수)+tab
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
</ol>
<ul>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ul>
// 1. Mix flour, baking powder, sugar, and salt.
// 2. In another bowl, mix eggs, milk, and oil.
// • Stir both mixtures together.
// • Fill muffin tray 3/4 full.
// • Bake for 20 minutes.- 주요 속성(Attribute)
1) reversed - 이 불리언 속성(Attribute)은 목록이 역순이 되도록 한다. 항목은 높은 것에서 낮은 순으로 번호가 매겨진다.
2) type - 번호 매기는 유형을 설정한다.
-a: 소문자 알파벳
-A: 대문자 알파벳
-i: 소문자 로마 숫자
-I: 대문자 로마 숫자
-1: 숫자 (기본값)
<ol type="I" reversed>
<li>apple care plus</li> Ⅲ. apple care plus
<li>apple care</li> Ⅱ. apple care
<li>apple</li> Ⅰ. apple
</ol>🥕 Input and type
<input> 은 사용자로부터 다양한 데이터를 받을 수 있으며 가장 많이 쓰이는 요소 중에 하나이다. 자기 자신의 범위만을 갖는 inline 요소이다. <input>은 굉장히 많이 사용되기 때문에 각각의 태그마다 id를 통해 고유한 식별자를 주게 된다.
1)
<label for="input_name">Name:</label>
<input id="input_name" type="text">Name :
2)
<label for="input_checkbox">check</label>
<input id="input_checkbox" type="checkbox">check
<input>속성(Attribute)의 types
-button
-color
-date
-file
이외에도 다양한 속성은 MDN에서 확인 가능하다.
<출처>
드림코딩
생활코딩
MDN - Document and website structure
MDN - HTML elements reference
