아티클

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

조회수
1

타겟 적중률 91.5% #코어타겟 문자광고 .

성별, 연령, 앱/웹 접속 이력, 거주, 근무지역, 통화 이력까지 정교하다 못해 소름 돋는 핵심타겟팅을 경험해보세요

답글 남기기

함께 읽으면 좋아요
서베이
여러분의 조언을 기다리고 있어요!
직장인
아티클
이번 글에서 답할 질문들 1. 왜 ‘무신사’는 고객을 연결하고, 국내 브랜드와 함께 성장할까?2. 왜 ‘무신사’는...
마케팅전략 브랜딩 트렌드
아티클
제한적인 예산으로 고민하시는 모든 분들을 위한.
마케팅예산 마케팅전략 마케팅조언
아티클
이미지의 구성요소 최소화하기
디자인 마케팅전략
아티클
더마 춘추전국시대, 그런데 이미 20년 전 열풍이 재현된 것.
트렌드
아티클
마케터에게 마케팅 트렌드는 떼려야 뗄 수 없는 숙명 같은 존재처럼 여겨지곤 합니다. 하루가 다르게 변하는...
마케팅조언 트렌드
아티클
마케팅조언 직장인
아티클
팝업스토어 성지 성수동
팝업스토어
아티클
마케팅과 커뮤니케이션 전략에서 독특하고 매력적인 이미지의 역할이 점점 중요해지고 있다. 달리3(DALL-E) 같은 인공지능(AI) 이미지 생성...
아티클
1. 유튜브, 드디어 이용자수 1위 등극하다!  유튜브가 처음으로 카톡을 밀어내고 MAU(월간 활성 이용자 수) 1위를 차지했어요. 모바일 빅데이터...
콘텐츠마케팅 트렌드
아티클
오늘의 생각식당
OTT 문화콘텐츠 트렌드

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

🌤️ 매주 1회 아침 8시!
세상을 달리고, 세상을 바꾸는
마케터들의 기록에 위픽레터가 함께 합니다.

이름*
이메일*
비밀번호*

위픽레터 제휴 문의

위픽레터를 통한 제휴 또는 광고를 원하신다면, 아래 양식을 통해 문의해 주세요. 평일 기준, 1~2일 이내로 회신 드리겠습니다.
위픽레터는 마케터들과 함께 호흡하고 함께 만들어 갑니다.

개인정보 수집·이용에 대한 안내 문의를 접수하고 회신하기 위해 최소한의 개인정보(이메일과 문의내용)를 수집하며 후속조치를 위해 1년간 보관합니다. 개인정보 수집·이용을 거부할 수 있으며, 이 경우 답변이 제한됩니다. 더 자세한 내용은 개인정보처리방침을 참고하시기 바랍니다.
위픽

마케터에게 제안하기

마케팅, 강연, 출판, 프로젝트 제안을 해보세요