연구실

자주 사용하는 html5, CSS3 태그 정의

2020년 8월 31일

 

자주 사용하는 HTML5, CSS3 태그를 정의해보았다.

웹 페이지를 만들 때 레이아웃을 구성하는 요소들로 문법만 익히면 누구나 쉽게 페이지 구성을 기획할 수 있다.

 

HTML5 태그

<텍스트 서식 요소>

<h1>~<h6>

<h1>은 가장 중요한 제목을 정의. 텍스트 크기가 가장 크다.

<h6>은 가장 중요하지 않은 제목을 정의. 텍스트 크기가 가장 작다.

<p> : 문단 정의

<pre> : 줄바꿈 모두 유지

<b> : 볼드체 (텍스트 강조), 출력 형식만을 정할 뿐 특별한 의미가 없는 물리적 태그.

<em> : 강조하고 싶은 텍스트에 사용하는 논리적 태그. 대부분 브라우저에서 기울어진 이탤릭체로 출력된다.

<strong> : <em>태그와 비슷한 의미를 가진 논리적 태그. 단순 강조보다 더 중요한 텍스트에 사용한다.

<i> : 텍스트 기울임

<br> : 줄바꿈

<hr> : 수평선

 

웹사이트의 레이아웃을 만드는 html5 시멘틱 구조 태그

<header> : 페이지 최상단, 좌측에 사용된다. 주로 form태그로 검색 창을 넣거나 nav태그로 메뉴를 넣는다.

<nav> : 네비게이션 메뉴로 사용되며 푸터에 사용되기도 한다. <header>, <footer>, <aside>태그안에 포함되어 사용되어지거나 독립으로 사용되기도 한다. 여러 개 사용할 경우 ID를 따로 지정하여 사용한다.

<aside> : 본문 좌측, 우측, 하단에 사용되며 필수 요소가 아니기 때문에 메인 콘텐츠에 영향을 끼치지 않는 태그.

<section> : 중심 내용을 감싸는 공간 태그. 콘텐츠를 주제별로 나뉠 때 자주 사용되며 주로 h1~h6 태그와 함께 사용된다.

<article> : 실제 콘텐츠 내용이 들어가는 부분으로 <section>태그안에 사용해도 되고, 반대로 <article>태그 안에 <section>태그를 사용해도 된다.

<footer> : 최하단에 위치하며 사이트 정보 (연락처, 저작권 표시) 등을 표기할 때 사용된다.

 

 

 

<예문>

<!DOCTYPE html>
<html lang=”ko-KR”>
<head>
       <meta charset=”utf-8″>
<title>타이틀(사이트 이름).</title>
</head>
<body>
<h1>가장 큰 텍스트로, 제목에 해당. </h1>
<br />
<b>진한 글씨.</b> <br>
<strong>중요한 내용이 들어감.</strong> <br>
<i>기울임꼴 글씨</i> <br>
<em>강조하고자 하는 내용.</em> <br>
<hr>
<h2><small>작은글씨</small></h2> 
<h2><mark>형광펜 효과</mark></h2> 
<hr>
<br />
<p>
하나의 문단 내용이 들어감.
</p>
</body>
</html>

 

CSS 속성

[type] : 글자에 관련된 속성을 설정하는 부분

 

font-familly : 글꼴 설정 <굴림, 굴림체;>

font-size : 글자 크기 및 단위 설정 <12px;>

font-style : 글자 모양 설정 <italic;>

line-height : 문단 내 줄 간격과 단위 설정 <18px;>

font-weight : 글자 굵기와 관련된 속성 <bold>

color : 글자 색상 설정 <#fff000;>

text-decoration : 밑줄 긋기, 윗줄 긋기 등 문단의 장식적인 효과 적용

  • underline; : 글자 밑에 줄긋기
  • overline; : 글자 위에 줄긋기
  • line-through; : 글자 중간에 줄긋기
  • blink; : 글자를 깜빡거리게 적용 (넷스케이프 웹브라우저에서만 나타남)
  • none; : 아무 장식 없이 글자를 나타냄, 하이퍼링크 속성 설정에서 주로 사용

 

[background] : 배경 색상, 반복, 고정, 수평 및 수직 위치와 같은 속성 설정

 

background-color : 배경 색상 지정 <#fff000;>

background-image : 배경 그림 설정 <url(bg.jpg);>

background-repeat : 배경 그림 채우기 속성 설정

  • no-repeat; : 배경 그림이 한 번만 채워져서 표시
  • repeat; : 배경 그림이 바둑판 형태로 채워져서 표시
  • repeat-x; 선택한 배경 그림이 수평 방향으로 가로로만 반복되어 표시
  • repeat-y; : 선택한 배경 그림이 수직 방향으로 세로로만 반복되어 표시

 

background-position : 배경 그림의 수평 및 수직 위치 설정 <10px center;>

background-attachment

  • fixed; : 스크롤 되어도 배경 그림은 고정되어, 나머지 문서에 삽입된 요소만 이동
  • scroll; : 일반 스크롤과 마찬가지로 배경 그림과 함께 문서에 삽입된 요소로 이동

 

[border] : 테두리 스타일, 굵기, 색상 속성 등 설정

 

order-width : 테두리 굵기 설정 <5px;>

border-style : 단일선, 이중선, 점선과 같은 테두리 스타일 설정 <solid;>

border-color : 테두리 색상 설정 <#ffffff;>

border : 테두리 굵기, 스타일, 색상 설정 <5px solid #ffffff;> (한번에 설정 가능)

 

[block] : 단어 간격, 글자 간격, 정렬, 들여쓰기와 같은 속성 설정

 

text-align : 가로 수평에 관련된 정렬 방식을 설정 <left;>

word-spacing : 단어와 단어 사이의 간격을 단위와 함께 설정 <10em;>

display : 표시 방식 설정 <inline;>

 

[box] : 선택한 글자, 테이블, 그림과 같은 요소 주위의 여백, 정렬, 크기 등의 속성 설정

 

margin : 주위에 함께 삽입되어 있는 요소와의 여백 설정 <10px;>

padding : 테두리 선과 요소 사이의 여백 설정 <10px;>

clear : 왼쪽, 오른쪽, 양쪽에 다른 요소가 위치되지 못하게 설정 <right;>

float : 스타일 시트가 적용되는 요소 정렬 <left;>

width : 스타일 시트가 적용되는 요소의 가로 크기를 단위와 함께 설정 <300px;>

height : 스타일 시트가 적용되는 요소의 세로 크기를 단위와 함께 설정 <auto;>

 

[positioning] : AP엘리먼트에 관련된 위치, 표시, z-index, 영역에 관한 속성 설정

 

position : AP엘리먼트의 배치 방식을 설정 <fixed;>

visibility : AP엘리먼트의 표시 방식을 설정 <inherit;>

width : AP엘리먼트의 가로 크기를 설정 <300px;>

height : AP엘리먼트의 세로 크기를 설정 <300px;>

z-index : AP엘리먼트의 겹치기 순서를 설정 <auto;>

overflow : AP엘리먼트의 크기보다 요소가 클 경우의 처리 방식을 설정

placement : AP엘리먼트의 위치와 크기를 설정

clip : AP엘리먼트의 표시 부분을 설정