이것저것

[HTML] HTML5의 시멘틱 태그 본문

코딩코딩/HTML5

[HTML] HTML5의 시멘틱 태그

곰태태 2020. 4. 23. 17:54
반응형
SMALL

시멘틱 태그

<header> 페이지의 머리말을 표현

<nav> 하이퍼링크들을 모아 놓은 섹션, 페이지 내 목차를 만들 때 주로 쓴다.

<section> 웹 페이지를 구분지어주는 역할을 하며 페이지의 본문을 나눠주는 역할을 한다.

<article> 웹 페이지를 훼손하지 않는 내용들을 담는데 주로 쓴다. 블로그 포스트 댓글 등으로 쓰인다.

<aside> 웹페이지의 본문에서 약간 벗어난 부분으로 사이드 부분의 광고 영역으로 많이 쓰인다.

<footer> 저자나 저작권 정보를 입력하는 부분으로 대부분 제일 아래에 위치한다.

 

위와 같이 시멘틱 태그로 구조만을 정해주고 이들의 위치나 색상 모양들은 css를 이용해서 직접만들어줘야한다.

 

css는 파일을 따로 생성해주지만 <head> 태그에 직접 넣어서 작성해줄 수 있다.

<head>태그에 <style> 태그를 생성 해준다음

<style>

.header { ~~... }

.nav { ~~... }

</style>

이런 식으로 css를 적용시켜줄 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css test</title>
<style>
html, body { margin : 0; padding : 0; height : 100%; }
.header { width : 100%; height : 20%; background : skyblue; }
.nav { width : 15%; height : 70%; float : left; background : yellow; }
.section { width : 70%; height : 70%; float : left; background : lightgreen; }
.aside { width : 15%; height : 70%; float : left; background : yellow; }
.footer { width : 100%; height : 10%; clear : both; background : plum; }
</style>
</head>
<body>
    <header class = "header"> header입니다.</header>
    <nav class ="nav">nav 입니다.</nav>
    <section class ="section">section 입니다.</section>
    <aside class ="aside">aside 입니다.</aside>
    <footer class ="footer">footer 입니다.</footer>
</body>
</html>
 
  
1
<header style = "background-color : red; width : 100%; height : 20%;"> header입니다.</header>
  

style부분 없이 hearder에 바로 적어도 적용은 가능하다. 대신 background가 아닌 background-color로 작성해야 한다.

https://www.w3schools.com/

bootstrap은 html과 css를 사용해 최종적으로 적용한 것을 말한다.

위 사이트의 bootstrap에서 긁어 올 수 있다.

bootstrap을 이용해서 웹페이지를 만들게 되면 누가 만들어도 비슷비슷하다는 단점은 있다.

 

bootstrap에 들어가서 bootstrap tutorial을 하나하나 다 봐보는 것도 좋다.

 

 

 

반응형
LIST

'코딩코딩 > HTML5' 카테고리의 다른 글

[HTML5]CSS 스타일 시트  (0) 2020.04.24
[HTML5] form 형식  (0) 2020.04.23
[HTML5] 하이퍼링크 | 앵커 | 파일 다운로드 | 미디어 삽입  (0) 2020.04.23
[HTML5] 기본부터 한글적용 | 이미지 삽입 | 테이블 만들기  (0) 2020.04.22
'코딩코딩/HTML5' Related Articles more
Comments