본문 바로가기
전자책 만들기

HTML 태그, CSS 속성 요약

by 뉴7803 2021. 7. 5.
반응형

전자책 만들 때 자주 쓰는 태그 위주로 정리한다.

 

 

<link href="" rel="stylesheet">

<h1>~<h6>: heading 1~6

<p>: paragraph

<b>: bold

<i>: italic

<html>

<style>

<head>

<body>

<a>: anchor하이퍼링크

<a href="" target="_blank"></a>
"../../index.html"
"../page1.html"
"page2.html"
"folder1/page3.html"

<img>

<img src"" width="" height="">

<div>

<span>

<!-- -->: HTML 코멘트

/* */: CSS 코멘트

 

font-size: 단위는 px, pt, em, % 등

font-weight: 100, 200, 300, 400, normal, 500, 600, 700, bold, 800, 900

text-align: left, right, center

text-decoration: none, underline, overline, line-through

color: 텍스트 색. 색 이름, RGB 값, HEX 값(16진법).

orange
rgb(97, 249, 107)
#61F96B

* htmlcolorcodes.com

width

min-width

max-width

height

min-height

max-height

overflow: hidden, visible, scroll, auto

margin(margin-top, margin-bottom, margin-left, margin-right): 단위는 px, % 등, auto

margin: 50px;
margin: 50px 50px;
margin: (top, bottom) (right, left);
margin 50px 50px 50px 50px;
margin: (top) (right) (bottom) (left);
margin: 0 auto;

display: block

background-color

border(border-top, border-bottom, border-left, border-right)

border: 0;
border: none;

border-width

border-style

border-color

border: 5px solid red;
solid, dotted, dashed

border-radius: 단위는 px, % 등

padding(padding-top, padding-bottom, padding-left, padding-right): 단위는 px, % 등

padding: 50px;
padding 50px 50px 50px 50px;
padding: (top) (right) (bottom) (left);

line-height: 단위는 px 등. normal.

font-family

font-family: "Times New Roman", Times, serif;
Sefif, Sans-Serif, Monospace, Cursive, Fantasy
@font-face {
 src: url("../fonts/BMJUA_otf.otf");
 font-family: "Bmjua";
}

p {
 font-family: "Bmjua";
}

 

* class는 둘 이상 적용 가능

<p class="a1 a2"></p>

* class 안의 class 가능

.class1 {
}
.class1 .class2 {
}

 

 

아래는 잘 안 쓰지만 일단 메모해둔다.

 

 

<!DOCTYPE html>

<meta charset="utf-8">

<title>

<strong>

<em>: emphasized

 

class id
. #
중복 사용 가능 중복 사용 불가
여러 개 사용 가능 여러 개 사용 불가

* 한 요소가 여러 개의 class와 한 개의 id 가질 수 있음

 

* 웹 폰트 사용할 때

<link href="https://fonts.google~" rel="stylesheet">

 

반응형

댓글