HTML이란 (Hypertext Markup Language,하이퍼텍스트 마크업 언어) 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
HTML의 기본 구성요소
태그(Tag): 태그는 <와 >로 묶어서 표현하는 명령어를 말합니다. 기본 형식은 <tag>~</tag>입니다.
속성(Auttribute):시작태그는 태그의 의미와 필요에 따라 개별적인 옵션을 가질 수 있습니다. 이러한 옵션을 속성이라고 합니다.
값(Value): 각 속성이 가지는 값을 의미합니다.
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 합니다.
그렇다면 다음 문장의 단락을 나누기 위해서는 어떻게 해야할까요?
일방통행
빛나는 항상
직진
아무도 말리지 못해요.
나는 항상 일방통행
아무도 날 막지 못해요.
때론 오목이가 와서
우리 사이를 벌려놓아도
때론 볼록이가 와서
우리 사이를 모아놓아도
요것들아 그래도
나는 항상 직진이다.
다들 해보셨나요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>헤드라인</title>
</head>
<body>
<p>일방통행</p>
<p>빛나는 항상
직진
아무도 말리지 못해요.</p>
<p>나는 항상 일방통행
아무도 날 막지 못해요.</p>
<p>때론 오목이가 와서
우리 사이를 벌려놓아도
때론 볼록이가 와서
우리 사이를 모아놓아도
요것들아 그래도
나는 항상 직진이다.</p>
</body>
</html>
이렇게 <p>태그로 요소를 감싸 단락을 나눌 수 있습니다.
마지막에 </p>로 닫아주셔야 합니다! 간혹 <p>태그 그대로 닫으시는 분들이 계셔서 꼭 닫는태그를 사용해주셔야 합니다.
p요소는 텍스트를 문단으로 정의할 때 사용합니다.
문단 요소 안에는 <a>,<img>와 같은 인라인 요소와 텍스트만 포함 할 수 있습니며, 블록 요소는 사용할 수 없습니다.
HTML의 목록
다음은 HTML의 목록에 대해서 배워보겠습니다.
목록은 3가지의 유형이 있습니다
1. 비순서형 목록<ul>
-비순서형 목록은 항목의 순서를 따지지 않고 목록을 나열할 수 있습니다.
-오직 li만 자식으로 가질 수 있습니다.
2. 순서형 목록<ol>
-항목의 순서대로 목록을 나열할 수 있습니다.
-오직 li만 자식으로 가질 수 있습니다.
-번호 목록 대신 알파벳이나 로마자 표현이 가능합니다.
3.정의형 목록<dl><dt><dd>
-dl 요소는 'Definition List'의 약자로, 용어 정의 리스트를 생성할때 사용합니다.
-dl 요소의 경우 단순히 정의형 목록만이 아니라 주종 관계가 성립되는 콘텐츠에 사용할 수 있습니다.
→dl :블록 요소로 dt요소와 dd요소만 포함 가능합니다.
→dt: 블록 요소로 정의형 항목의 용어 입니다.
→dd: 블록 요소로 정의형 항목의 설명입니다. 여러개의 dd도 사용 가능합니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트 소설</title>
</head>
<body>
<article>
<h1>취미목록</h1>
<ul>
<li>독서</li>
<li>잠</li>
<li>쇼핑</li>
</ul>
</article>
<article>
<h1>인기검색어순위</h1>
<ol>
<li>입시현황</li>
<li>필리핀태풍</li>
<li>오늘의 날씨</li>
</ol>
</article>
<article>
<h1>이력서</h1>
<dl>
<dt> 성명</dt>
<dd>이아무개</dd>
<dt> 주소</dt>
<dd>서울시 마포구 0000동 0000</dd>
<dt>연락처</dt>
<dd>000-0000-0000</dd>
</dl>
</article>
위의 코드와 같이
취미목록은 순서가 중요하지 않은 내용임으로 비순서형 목록인 ul을 사용할 수 있습니다.
인기 검색어 순위는 순위가 정해져있음으로 순서형 목록인 ol을 사용합니다.
마지막으로 이력서는 제목과 내용이 정해져있음으로 정의형 목록인 dl,dt,dd를 사용할 수 있습니다.
결과를 확인해보면 위와 같이 작성되는 것을 알 수 있습니다.
HTML의 시맨틱 웹
시맨틱 웹이란 마크업에 의미를 부여하는 요소입니다. 웹 페이지에서 데이터를 효율적으로 추출하기 위해 특정한 태그에 의미를 부여하는 시맨틱이 사용되기 시작했습니다.
시맨틱 태그 사용 시 주의 사항
CSS사용 시 문제가 있으면 display속성을 block으로 설정하여 사용
역할에 따른 시맨틱 요소
(지금 소개하는 태그는 HTML5에서 사용할 수 있습니다.)
<header></header>
-소개 및 네비게이션의 목적으로 사용되는 그룹을 묶는 컨테이너
-위치는 꼭 위에 있지 않아도 된다.
<footer></footer>
-저작권 정보, 링크, 작성자 등에 쓰인다
-adress와 small로 연락처와 저작권을 표현할 수 있다.
<aside></aside>
-부가 콘텐츠, 사이드바와 같은 느낌으로 사용된다.
-인용문,광고 등과 같은 요소의 그룹
<nav></nav>
-주로 네비게이션에 관한 정보를 포함
-다른 페이지로 이동하기 위한 일을 하는 그룹
내용에 의한 구분
<section></section>
-테마 별로 연관된 콘텐츠를 묶는 데 사용되는 콘텐츠이기 때문에 section안에는 꼭 제목이 필요하다.
<article></article>
-section의 특화 된 모습으로 해당 문서나 페이지등을 독립적으로 구성할 때 사용된다.
위의 이미지처럼 시맨틱 웹을 구성하려면 어떻게 해야할까요?
코드소스를 보지마시고 먼저 해보시길 바랍니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layout요소</title>
</head>
<body>
<header>
<h1>스파게티 하우스</h1>
<nav>
<h2>메인내비게이션</h2>
</nav>
</header>
<main>
<article>
<h3>스파게티에 대해서 알아보기</h3>
<section>스파게티의 역사</section>
<section>스파게티의 유래</section>
</article>
<article>
<h3>스파게티의 재료</h3>
<section>면류</section>
<section>채소류</section>
<section>육류</section>
</article>
<article>
<h3>스파게티 고장</h3>
</article>
<article>
<h3>스파게티 추천 레스토랑</h3>
</article>
</main>
<aside>
<section>
<h4>이벤트</h4>
</section>
<section>
<h4>광고모음</h4>
</section>
</aside>
<footer>
<h5>패밀리사이트</h5>
<address>copyright © 2013 HANSSEM co., Ltd All rights reserved</address>
</footer>
</body>
</html>
시맨틱 웹은 검색 엔진에서 필요한 부분만 쉽게 찾아서 검색 할 수 있고, 스크린 리더 같은 웹 보조기구에서 정확하게 웹 문서를 분석하고 전달 할 수 있다는 장점이 있습니다.
프론트엔드라면 알아야할 HTML 기초내용
공부하시는 분들도 같이 따라해보시고 내용 공유해주시면 빠르게 답글 달아드리겠습니다. 시맨틱 웹은 정말 중요한 내용이니 한번씩 HTML작성해보시면 공부하시는데 도움이 될 것 같습니다.
다음에는 아웃라이너(outliner) 경로 지정하기, 미디어 콘텐츠에 대한 내용으로 돌아오겠습니다.
'HTML' 카테고리의 다른 글
| HTML-lesson06(미디어 콘텐츠-오디오) (0) | 2022.06.18 |
|---|---|
| HTML-lesson05(미디어 콘텐츠-비디오) (0) | 2022.06.18 |
| HTML-lesson04(미디어 콘텐츠-이미지) (0) | 2022.06.17 |
| HTML-lesson03(책갈피) (0) | 2022.06.16 |
| HTML-lesson02(Outliner,경로지정하기) (0) | 2022.06.16 |