HTML 요약 정리
HTML
웹페이지라는 문서에 마크업 하기 위한 언어 또는 구문
마크업 언어, 완전한 프로그래밍 언어가 아니다.
문서에 마크업을 할 뿐이다.
HTML은 텍스트 컨텐츠를 마크업하여 구조화 하는 목적으로 사용된다.
태그를 통해서 텍스트를 마크업 하여 엘레먼트 요소를 만든다.
단락요소 <p>
HTML에서 단락처럼 묶고 싶은 내용이라면 텍스트만을 의미하는 것은 아니고 묶고 싶은 단락을 <p>태그로 묶을 수 있다.
HTML에서 단락처럼 묶고 싶은 내용이라면 어떤 것이든<p> 태그로 묶을 수 있다. 이미지일 수도 있고 input 태그나 label 태그일 수도 있다.
제목 요소 <h1> ~ <h6>
한 페이지에 최상위 주제가 두 가지일 수 없기 때문에 <h1>은 최상단에 딱 하나만 사용한다.그 다음에는 하위 제목 또는 하위 섹션이 있을 수 있다.
<h2>와 <h1> 없이는 <h3>이 존재할 수 없습니다 .또한 <h1>부터 <h5>까지가 없다면 <h6>도 있을 수 없다.
각각의 글자 크기는 바꿀 수 있지만 각각의 숫자에는 고유한 의미가 있다.
HTML 상용구
모든 HTML 문서에 들어가야 하는 표준화된 마크업이다. 상용구 없이도 브라우저에서 보여주지만 꼭 갖춰야 한다.
<!DOCTYPE html>은 HTML5를 사용하고 있다는 표식이다.
루트 요소로도 불리는 HTML 요소는 문서의 최상위 요소를 뜻한다.
하나의 <html>요소에는 하나의 <head>와 <body> 요소가 있다.
<head>는 메타데이터 요소라고 부르기도 하는데 대신 웹 페이지와 스크립트에 관한
모든 메타데이터 정보이다. CSS에서 스타일 속성을 입력하기도 한다.
실제로 문서에 나타나는 건 아니지만 모든 메타 정보를 담고 있다.
모든 문서는 HTML 안의 <head>에 타이틀 요소가 있어야 한다.
title은 페이지에는 뜨지 않지만 브라우저에 탭에 보이는 부분이다.
Google은 타이틀 요소로 검색을 하며 HTML의 타이틀을 검색결과로 보여준다.
한 <head>에는 하나의 <body>가 필요한데 문서의 모든 내용을 담고 있는 요소이다.
<body>는 문서에서 단 하나만 있을 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<!-- Content -->
</body>
</html>
목록 요소 <ul> <ol> <li>
<ul> 태그는 순서가 없는 목록, <ol> 태그는 순서가 있는 목록을 나타낼 때 사용된다.
<li>는 목록 내의 단일 아이템을 표시하는 태그이며 <ul> 안에 들어갈 수 있는 건 <li> 태그 뿐이다.
<li> 태그의 안에도 다른 요소를 중첩 시킬 수 있으며 이 말은 <li> 밑에 목록 안의 목록을 더 추가하여 중첩 목록을 만들 수 있다는 말이다.
<ul>
<li> 가
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
</li>
<li> 나
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
</li>
</ul>
앵커 요소 <a>
하이퍼링크를 만드는 데 쓰는 앵커 요소이며 <a> 태그를 통해 다른 웹페이지나 이메일 주소, 파일 혹은 현재 페이지의 다른 위치로 연결할 수가 있다.
앵커 태그로 만드는 모든 하이퍼링크에는 href를 사용하여 목적지를 지정해주어야 한다.
<a href="about.html">About Me<a>
이미지 <img>
이미지, 즉 img라는 태그만 있고 사이에 아무 콘텐츠가 없기 때문에 닫기 태그가 없다.
이미지가 있는 URL만 제공하면 되고 브라우저가 알아서 이미지를 불러와 이미지 그 자체가 컨텐츠이다.
src 속성을 통해서 이미지 경로를 설정한다.
이미지를 찾을 수 없거나 인터넷 상태가 안 좋거나 이미지가 없어지면
이미지를 불러오지 못할 수 있다.
alt 태그로 이미지를 불러올 수 없을 때 이미지의 설명을 넣을 수 있다.
<img src="images/1.png" alt="1번 이미지"/>
주석
주석은 요소가 아니며 브라우저에서는 보이지 않는다.
브라우저에는 보이지 않는 텍스트를 HTML 문서에 넣는 것
보통 메모나 피드백이나 리마인더 용도로 사용한다.
<!--메모하고 싶은 내용 -->
블록 요소와 인라인 요소 <div>, <span>
블록 수준 요소는 한 줄을 차지하고 인라인 수준 요소는 콘텐츠가 있는 영역만 차지한다.
<div>는 제네릭 컨테이너이고 블록 수준 요소이다.
<span>은 제네릭 컨테이너이고 인라인 수준 요소이다.
기타 요소
<sub> : 아래 첨자를 표현 할 때 사용
<sup> : 위 첨자를 표현 할 때 사용
<hr> : 구분선
<br> 줄바꿈
엔티티 코드
HTML 대신 쓸 수 있는 특별한 코드 또는 시퀀스이며 이걸 사용하면 다른 글자가 표시된다.
모든 엔티티 코드는 &로 시작해서 ;로 끝난다.
HTML에 입력하면 안 되는 글자들이 몇 개 있는데 이를 예약 문자라고 하며 예약문자를 표현할 때 주로 사용된다.
‘<’문자를 표현하고 싶을 때 브라우저가 태그 열기로 인식하여 문제가 발생될 수 있기때문에 엔티디 코드 < 로 표현한다.
시멘틱 마크업
시맨틱 마크업의 '시맨틱’은 ‘의미와 관련된'이라는 뜻이다.
그래서 시맨틱 마크업은 의미 있는 마크업을 뜻하거나 또는 그 요소의 내용의 의미에 관련된 마크업이다.
시멘틱 마크업이 없던 때에는 요소들을 전부 <div>로 구분 하였다.
<div>태그는 내용을 담고만 있는 제네릭태그이기때문에 요소들이 사용된 목적과 의미를 알 수 없다.
- 시멘틱 마크업을 사용하는 이유
- 의미부여 : 마크업에 의미를 부여하는 것이 중요하기 때문이다. 부여된 의미는 다른 컴퓨터나 Google 같은 크롤러 프로그램에 의미가 있다. 크롤링 프로그램은 주로 nav 바에 있는 모든 링크나 꼬리말에 있는 모든 링크를 찾아서 그것들을 수집한 후 그 페이지를 방문하고 그 과정을 계속 반복하는 전략을 쓴다. 크롤러가 더 쉽게 코드를 알아보도록 다른 어플리케이션 또는 코드와 더 잘 융합되도록 하기 위해서 시멘틱 마크업을 사용한다.
- 접근성 : 렌더링된 내용을 보지 못하는 사람들은 스크린 리더를 사용하는데 이 스크린 리더는 nav 요소나 머리말, 꼬리말 article, main, section 등을 찾고 그것들을 표지판으로 사용한다. 시멘틱 요소를 사용하면 이러한 탐색 과정이 훨씬 쉬워진다.
- 가독성 : 개발자가 만든코드나 마크업을 더 쉽게 읽어낼 수 있다. 수정 해야하는 요소가 있을 때 <div> 태그를 사용하면 다 열어 보면서 찾아내야 하지만 시멘틱 요소를 사용하면 찾아내기가 쉽다.
<main> : 문서의 주요 내용
<nav> : 페이지에서 내비게이션 링크를 제공
<section> : 제네릭한 시멘틱요소, 다른 특정한 시맨틱 요소 없이 독립적인 부분을 나타 낼 때 사용
<article> : 독립적인 구성,독립적으로 나뉠 수 있거나 다시 사용될 수 있는 것
<aside> : 엄밀히 말하자면 문서의 일부는 아니지만 부수적인 내용
<time> : 시간이나 날짜를 의미, datetime 속성을 명시
<figure> : 독립적인 내용을 나타내는데 캡션이 달린 경우, figcation 요소와 함께 사용
테이블 요소
90년대와 2000년대 초로 돌아가 보면 표는 웹 사이트 레이아웃에 사용되었다.
웹디자인 초기에는 개발자들이 표 사용을 좋아했는데 셀을 많이 만들어서 그 사이사이에 있는 빈 공간을 채울 수 있었기 때문이었다.
요즘은 레이아웃 배치가 쉬워졌기때문에 이런 용도로 테이블을 사용하는 것은 바람직하지 않다.
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2"></th>
<th rowspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<table>
댓글