시멘틱 태그
의미론적 태그. 웹사이트의 공통적인 공간 구성요소를 태그 형식으로 분류한 것.
모든 시멘틱 태그는 div와 같으며 한줄을 차지한다.
헤더, 메인(섹션), 사이드, 푸터로 나뉜다.
<header>태그 : 속성은 div와 동일하다. 상단 공간을 의미
<nav> 태그 : 네비게이션 태그. 메뉴 바로가기
<aside> 태그 : 사이드의 공간. 화면의 몇프로를 차지할지 width로 지정 가능
<section> 태그 : 주된 공간. 화면의 몇프로를 차지할지 width로 지정 가능
<article> 태그 : 섹션 안에서 주로 글자를 담는 공간. 선택적.
<footer> 태그 : 바닥공간
<main> 태그 : section 과 article를 담는 공간
float 속성 : inline속성으로 변경하고 오른쪽으로 배치시킨다. clear속성으로 지워주지 않으면 속성이 선언된 태그 밖에서도 계속 유지된다.
meta태그의 속성
charset : 문자 인코딩 타입 설정
viewpoart : 모바일 해상도 대응
device-width : 웹페이지의 너비가 모바일기기 너비와 동일해짐
initial-scale : 확대비율 1.0원래비율
X-UA-Compatible : 익스플로러 최신버전에 호환되게 함.
ie=edge : 익스플로러가 없으면 엣지로 대체됨
content type : 콘텐츠의 형식을 알려줌
text/html : text기반의 html 콘텐츠
text/xml : text기반의 xml 콘텐츠
application/json : AOS/ IOS 앱, REST API와 통신할때의 콘텐츠 형식
keyword : 검색엔진에 의해 검색되는 키워드
description : 검색엔진에 의해 검색되는 문자열
noindex : 검색 안되게 함.
nofollow : 검색엔진이 페이지 링크를 못따라가게 함.
author : 페이지 제작자 표시
refresh : 새로고침, content란에 새로고침되는 시간, 가고자 하는 url작성 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<title>시멘틱 태그</title>
<!-- HTML5 시멘틱(Semantic) : 의미론적 태그 -->
<!-- 웹사이트의 공통적인 공간 구성요소를 태그 형식으로 분류한 것 -->
<!-- 공통적인 구성요소 : 헤더(탑), 메인(섹션), 푸터, 사이드 -->
<!-- 사용하는 이유 : 유지 보수가 쉽고, 검색엔진에 잘 노출된다. -->
<!-- hearder태그 : 이름만 header이고, 속성은 div와 동일하다. -->
<!-- : 상위공간(헤더)을 의미 -->
<!-- nav태그 : 네비게이션(메뉴-바로가기) -->
<!-- aside태그 : 사이드(왼쪽,오른쪽) 공간 -->
<!-- section태그 : 주된 내용(콘텐츠)를 담는 공간 -->
<!-- article태그 : 섹션안에서 글자를 주로 담는 공간. 선택적. -->
<!-- footer태그 : 바닥공간을 의미함. -->
<!-- main태그 : section + article를 담는 콘텐츠 주 공간 -->
<!-- *-----------------* -->
<!-- | Header(Top) | -->
<!-- *-----------------* -->
<!-- | Nav | -->
<!-- *-----------------* -->
<!-- | | | -->
<!-- |Aside | Section | Main -->
<!-- | | | -->
<!-- *-----------------* -->
<!-- | Footer | -->
<!-- *-----------------* -->
<!-- 모든 시멘틱 태그는 div와 속성이 같다. block 한줄차지 속성 -->
<header></header>
<div id="header"></div>
<style>
/* * : 모든 html 요소 */
/* border : 테두리선 */
/* body의 기본 마진(여백)은 8이다. */
body {
margin: 0; padding: 0;
/* border: 1px solid green; */
}
header { border: 1px solid red; }
nav { border: 1px solid blue; }
main { border: 1px solid orange; }
aside {
border: 1px solid skyblue;
/* float : inline속성으로 변경하고, 왼쪽으로 배치 */
float: left;
/* width : 너비 값을 지정하고, 15%는 전체 화면에서 15%차지 */
width: 15%;
}
section {
border: 1px solid purple;
/* float : inline속성으로 변경하고, 오른쪽으로 배치 */
float: right;
/* width : 너비 값을 지정하고, 전체 화면에서 80%차지 */
width: 80%;
}
article { border: 1px solid brown; }
footer {
border: 1px solid green;
/* clear : float속성을 제거한다. footer를 block속성을 갖도록 한다.*/
/* float속성은 clear로 제거하지 않으면, 위에서부터 아래로 전달된다. */
clear: both;
}
</style>
</head>
<body>
<header>
<h1>헤더영역 타이틀</h1>
</header>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
<main>
<aside>
<ul>
<li><a href="#">사이드메뉴1</a></li>
<li><a href="#">사이드메뉴2</a></li>
<li><a href="#">사이드메뉴3</a></li>
</ul>
</aside>
<section>
<article>
<h3>내용1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, voluptate obcaecati minus voluptatem velit totam cum! Excepturi debitis sapiente veniam quibusdam ad labore eaque nisi ullam vel, inventore veritatis quo!</p>
</article>
<article>
<h3>내용2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, voluptate obcaecati minus voluptatem velit totam cum! Excepturi debitis sapiente veniam quibusdam ad labore eaque nisi ullam vel, inventore veritatis quo!</p>
</article>
<article>
<h3>내용3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, voluptate obcaecati minus voluptatem velit totam cum! Excepturi debitis sapiente veniam quibusdam ad labore eaque nisi ullam vel, inventore veritatis quo!</p></article>
</section>
</main>
<footer>
<p>회사소개 및 주소</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>메타meta 태그: 문서의 정보를 담고 있는 태그</title>
<!-- charset : 문자인코딩 타입 - UTF-8, EUC-KR -->
<meta charset="UTF-8">
<!-- viewpoart : 모바일해상도 대응 -->
<!-- device-width : 웹페이지의 너비가 모바일기기 너비와 동일 -->
<!-- initial-scale : 확대비율 1.0원래비율 2.0 2배확대 -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0" >
<!-- X-UA-Compatible : 익스플러러 브라우저의 최신버전에 대응 -->
<!-- ie=edge : IE가 없으면 엣지브라우저로 대치 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- content-type : 콘텐츠의 형식을 알려줌 -->
<!-- text/html : text기반의 html 콘텐츠이다. -->
<!-- text/xml : text기반의 xml 콘텐츠 -->
<!-- application/json : AOS/IOS 앱과 통신할때 콘텐츠 형식 -->
<!-- : REST API 서버와 통신할 때 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- keyword : 검색로봇에 의해 검색되는 단어(키워드)를 지정 -->
<meta name="keyword" content="쇼핑몰, Shop, 과자, 콜라">
<!-- description : 검색로봇에 의해 검색되는 문자열 -->
<meta name="description" content="저의 웹사이트입니다.">
<!-- noindex : 검색로봇에 검색안되게 함. -->
<!-- nofollow : 검색로봇이 페이지링크를 따라가지 않도록 함. -->
<meta name="robots" content="noindex,nofollow">
<!-- author : 웹사이트 제작자 표시 -->
<meta http-equiv="author" content="홍길동개발자">
<!-- 5초 간격으로 새로고침이 됨. -->
<!-- refresh는 페이지를 다 새로 그림. 깜박거림 발생! -->
<!-- <meta http-equiv="refresh" content="5"> -->
<!-- <meta http-equiv="refresh" content="5; url=http://www.naver.com"> -->
<meta http-equiv="refresh" content="5; url=./ex25.html">
</head>
<body>
<h1>메타 태그 설명...</h1>
</body>
</html>'공부 > html --- css' 카테고리의 다른 글
| 24일차 복습 (0) | 2022.12.15 |
|---|---|
| 23일차 복습 (0) | 2022.12.14 |
| 22일차 복습 -2 css시작 (0) | 2022.12.13 |
| 21일차 (0) | 2022.12.12 |
| 20일차 (0) | 2022.12.11 |
