자주 사용하는 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엘리먼트의 표시 부분을 설정
