자주 사용하는 html5, CSS3 태그 정의 | 위픽코퍼레이션
🎈 매거진

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

권상현
2021-12-16


자주 사용하는 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> : 최하단에 위치하며 사이트 정보 (연락처, 저작권 표시) 등을 표기할 때 사용된다.

이 이미지는 대체 속성이 비어있습니다. 그 파일 이름은 %EB%AC%B8%EC%84%9C%EA%B5%AC%EC%A1%B0-300x263.jpg입니다
이 이미지는 대체 속성이 비어있습니다. 그 파일 이름은 %EB%AC%B8%EC%84%9C%EA%B5%AC%EC%A1%B02-300x263.jpg입니다

<예문>

<!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엘리먼트의 표시 부분을 설정

플랫폼팀
권상현
팀장
개발하는 기획자
개발 기획
플랫폼팀
Platform
'설명할 필요 없는 위픽'을 현실로 만드는 플랫폼팀
권상현의 글 더보기
더 나은 버튼 디자인을 하는 법
그거 얼마나 걸려요?
위픽 비즈니스
🎈 매거진 더보기
위피기의 핫플일기 #6. 광야@서울
위피기의 핫플일기 #5. 영화 '동감' 팝업스토어
위피기의 핫플일기 #4. 라인프렌즈 월드
위피기의 핫플일기 #3. 어메이징 오트 카페
위피기의 핫플일기 #2. 탬버린즈 전시
위피기의 핫플일기 #1. 오프컬리

댓글

💌 위픽레터,
아직 구독 안하셨나요?

매주 2번, 마케팅 실무자들의 고급 정보들을 전달해드려요!

페이스북
이메일
링크드인
프린트