중요한 건 꺾이지 않는 마음

[CSS 기초] 07. CSS 색 (Color)

OTIKLO — Wed, 1 Mar 2023 12:00:06 +0900

◈ CSS 색

CSS를 사용하면 외곽선, 글자 색, 배경색 등 여러 곳에 색을 넣어 사용하게 되는데, CSS에서 색을 표현하는 방법은 크게 세 가지가 있습니다.

1) 색상 이름

2) RGB 값

3) 16진수 색상값

추가로 CSS3부터 HSL/HSLA 값으로 색을 정할 수 있고, 투명도를 지정하는 opacity라는 속성을 사용할 수 있습니다.

1. 색상 이름

모든 브라우저에서 지원되는 색상 목록은 이렇습니다.

AliceBlue

AntiqueWhite

Aqua

Aquamarine

Azure

Beige

Bisque

Black

BlanchedAlmond

Blue

BlueViolet

Brown

BurlyWood

CadetBlue

Chartreuse

Chocolate

Coral

CornflowerBlue

Cornsilk

Crimson

Cyan

DarkBlue

DarkCyan

DarkGoldenRod

DarkGray

DarkGreen

DarkKhaki

DarkMagenta

DarkOliveGreen

DarkOrange

DarkOrchid

DarkRed

DarkSalmon

DarkSeaGreen

DarkSlateBlue

DarkSlateGray

DarkTurquoise

DarkViolet

DeepPink

DeepSkyBlue

DimGray

DodgerBlue

FireBrick

FloralWhite

ForestGreen

Fuchsia

Gainsboro

GhostWhite

Gold

GoldenRod

Gray

Green

Grey

GreenYellow

HoneyDew

HotPink

IndianRed

Indigo

Ivory

Khaki

Lavender

LavenderBlush

LawnGreen

LemonChiffon

LightBlue

LightCoral

LightCyan

LightGoldenRodYellow

LightGray

LightGreen

LightGrey

LightPink

LightSalmon

LightSeaGreen

LightSkyBlue

LightSlateGray

LightSteelBlue

LightSlateGrey

LightYellow

Lime

LimeGreen

Linen

Magenta

Maroon

MediumAquaMarine

MediumBlue

MediumOrchid

MediumPurple

MediumSeaGreen

MediumSlateBlue

MediumSpringGreen

MediumTurquoise

MediumVioletRed

MidnightBlue

MintCream

MistyRose

Moccasin

NavajoWhite

Navy

OldLace

Olive

OliveDrab

Orange

OrangeRed

Orchid

PaleGoldenRod

PaleGreen

PaleTurquoise

PaleVioletRed

PapayaWhip

PeachPuff

Peru

Pink

Plum

PowderBlue

Purple

RebeccaPurple

Red

RosyBrown

RoyalBlue

SaddleBrown

Salmon

SandyBrown

SeaGreen

SeaShell

Sienna

Silver

SkyBlue

SlateGray

SlateBlue

SlateGrey

Snow

SpringGreen

SteelBlue

Tan

Teal

Thistle

Tomato

Violet

Wheat

White

WhiteSmoke

Yellow

YellowGreen

이처럼 미리 정의된 색상의 이름으로 표현할 수 있습니다.

색상 이름은 대소문자를 구별하지 않습니다.

color: 색상명 | background: 색상명 | ...

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: red; }
      .c2 { background: green;}
      .c3 { background: blue;}
    </style>
  </head>
  <body>
    <p class="c1">background: red</p>
    <p class="c2">background: green</p>
    <p class="c3">background: blue</p>
  </body>
</html>

2. RGB 값

RGB(red, green, blue)와 같은 형식으로 색을 표현합니다. red, green, blue 각각의 변수에는 0~255의 정수를 입력하거나 백분율 값을 지정하여 색상을 지정할 수 있습니다..

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: rgb(255,0,0); }
      .c2 { background: rgb(0,255,0);color:black}
      .c3 { background: rgb(0,0,255);}
    </style>
  </head>
  <body>
    <p class="c1">background: rgb(255,0,0)</p>
    <p class="c2">background: rgb(0,255,0)</p>
    <p class="c3">background: rgb(0,0,255)</p>
  </body>
</html>

3. RGBA 값 (CSS3)

CSS3 이후부터 RGBA값으로 표현이 가능해졌습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: rgba(255,0,0, 0.2); }
      .c2 { background: rgba(0,255,0, 0.4);color:black}
      .c3 { background: rgba(0,0,255, 0.6);}
    </style>
  </head>
  <body>
    <p class="c1">background: rgba(255,0,0,0.2)</p>
    <p class="c2">background: rgba(0,255,0, 0.4)</p>
    <p class="c3">background: rgba(0,0,255, 0.6)</p>
  </body>
</html>

4. 16진수 색상값 (HEX code)

16진수 색상값을 이용하며 #RRGGBB 형식으로 나타냅니다. RR은 red, GG는 green, Blue는 blue를 나타내며 각각의 값으로 00부터 FF까지의 값을 입력할 수 있습니다. 대소문자를 구분하지 않습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: #ff0000; }
      .c2 { background: #00FF00;color:black}
      .c3 { background: #0000Ff;}
    </style>
  </head>
  <body>
    <p class="c1">background: #ff0000</p>
    <p class="c2">background: #00FF00</p>
    <p class="c3">background: #0000Ff</p>
  </body>
</html>

5. HSL 값 (CSS3)

Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다.

hsl(색상, 채도, 명도)

색상: 0~360 색상환이며 0=red | 120=green | 240=blue 입니다.

채도: 백분율로 채도를 나타냅니다.

명도: 백분율로 명도를 나타냅니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: hsl(0,100%,80%); }
      .c2 { background: hsl(120,100%,80%);color:black}
      .c3 { background: hsl(240,100%,80%);}
    </style>
  </head>
  <body>
    <p class="c1">background: hsl(0,100%,80%)</p>
    <p class="c2">background: hsl(120,100%,80%)</p>
    <p class="c3">background: hsl(240,100%,80%)</p>
  </body>
</html>

6. HSLA 값 (CSS3)

HSL과 같지만 A(투명도)가 추가된 것입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: hsla(0,100%,80%,0.2); }
      .c2 { background: hsla(120,100%,80%,0.4);color:black}
      .c3 { background: hsla(240,100%,80%,0.6);}
    </style>
  </head>
  <body>
    <p class="c1">background: hsla(0,100%,80%,0.2)</p>
    <p class="c2">background: hsla(120,100%,80%,0.4)</p>
    <p class="c3">background: hsla(240,100%,80%,0.6)</p>
  </body>
</html>

7. Opacity: 투명도 설정 (CSS3)

전체 요소(배경색, 텍스트 색상 등)의 불투명도를 설정하는 속성입니다. 값은 0.0~1.0 사이의 값입니다.

opacity: 값

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
	  body {
		font-weight:bold;
		color:white;
	  }
      .c1 { background: red; opacity:0.2 }
      .c2 { background: green;color:black;opacity:0.4}
      .c3 { background: blue;opacity:0.6}
    </style>
  </head>
  <body>
    <p class="c1">background: red; opacity:0.2</p>
    <p class="c2">background: blue; opacity:0.4</p>
    <p class="c3">background: green; opacity:0.6</p>
  </body>
</html>

출처: https://www.w3schools.com/cssref/css_colors.php

[CSS 기초] 06. CSS 테이블 꾸미기 (Table)

OTIKLO — Mon, 27 Feb 2023 12:00:17 +0900

기본 테이블

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Table Design</title>
    <style type="text/css">
      body {
		background: black;
		color: white;
		font-weight: bold;
	  }
      table{
		width: 50%;
	  }
    </style>
  </head>
  <body>
     <table>
      <thead>
        <tr>
          <th>th</th><th>th</th><th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>td</td><td>td</td><td>td</td>
        </tr>
        <tr>
          <td>td</td><td>td</td><td>td</td>
        </tr>
        <tr>
          <td>td</td><td>td</td><td>td</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

1. border : 테두리 만들기

table { border: 1px solid #fff; }

table에 border를 적용하면 표의 외곽선을 설정할 수 있습니다.

table { border: 1px solid #fff; }
th { border: 1px solid #fff; }

table { border: 1px solid #fff; }
th { border: 1px solid #fff; }
td { border: 1px solid #fff; }

th, td에 border를 적용하면 셀의 외곽선을 설정할 수 있습니다.
※ tr 태그에는 border가 적용되지 않습니다.

border: border-width | border-style | border-color

border는 요소의 테두리를 그려주는 단축 속성으로 border-width, border-style, border-color의 값 중 하나 이상을 한 번에 공백으로 구분하여 지정할 수 있습니다.
border-color: 테두리의 색상 지정 <color 값>
1) 한 개의 값을 사용하면 모든 외곽선에 색상을 적용합니다.
2) 두 개의 값을 사용하면 첫 번째 값이 위&아래, 두 번째 값이 왼쪽&오른쪽의 색상을 적용합니다.
3) 세 개의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 왼쪽&오른쪽, 세 번째 값이 아래의 색상을 적용합니다.
4) 네 개의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 색상을 적용합니다.
border-style: 테두리의 스타일 지정 <line-style 값>
1) 한 개의 값을 사용하면 모든 외곽선에 스타일을 적용합니다.
2) 두 개의 값을 사용하면 첫 번째 값이 위&아래, 두 번째 값이 왼쪽&오른쪽의 스타일을 적용합니다.
3) 세 개의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 왼쪽&오른쪽, 세 번째 값이 아래의 스타일을 적용합니다.
4) 네 개의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 스타일을 적용합니다.

border-width: 테두리의 너비 지정 <line-width 값>
1) 한 개의 값을 사용하면 모든 외곽선의 너비를 지정합니다.
2) 두 개의 값을 사용하면 첫 번째 값이 위&아래, 두 번째 값이 왼쪽&오른쪽의 너비를 지정합니다.
3) 세 개의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 왼쪽&오른쪽, 세 번째 값이 아래의 너비를 지정합니다.
4) 네 개의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 너비를 지정합니다.

2. border-collapse: 테이블의 테두리와 셀의 테두리 사이의 간격을 어떻게 할지 지정

separate

collapse

border-collapse: separate | collapse | initial | inherit

separate : 테이블의 테두리와 셀의 테두리 사이에 간격을 둡니다.
collapse : 테이블의 테두리와 셀의 테두리 사이의 간격을 없앱니다. 겹친다면 한 줄로 나타냅니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

※ table에 속성으로 지정해줘야 적용됩니다. (th, td : X)

3. border-spacing : 테이블의 테두리와 셀의 테두리 사이의 간격 지정

※ border-collapse의 값이 separate여야 합니다.

border-spacing: length | initial | inherit

length : 길이를 지정합니다. 값이 한 개면 모든 간격에 같은 간격을 적용하고, 값이 두 개면 첫번째 값은 왼쪽&오른쪽, 두 번째 값은 위&아래의 간격으로 적용합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

4. empty-cells : 빈 셀의 테두리 표시 지정

empty-cells: show

empty-cells: hide

empty-cells: show | hide | initial | inherit

show : 빈 셀의 테두리를 보여줍니다.
hide : 빈 셀의 테두리를 숨깁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

5. padding : 테두리와 내용 사이의 간격 지정 & 셀 크기 지정

padding: padding-top | padding-right | padding-bottom | padding-left

padding은 안쪽 여백을 설정하는 단축속성입니다. 단위는 em, %, px, rem 등이 사용 가능하며 inherit, initial 값도 가능합니다. 음수 값은 유효하지 않습니다.

한 개의 값은 모든 면의 여백을 설정합니다.
두 개의 값을 지정하면 첫 번째는 위&아래, 두 번째는 왼쪽&오른쪽 여백을 설정합니다.
세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽&오른쪽, 세 번째 값은 아래 여백을 설정합니다.
네 개의 값을 지정하면 각각 위, 오른쪽, 아래, 왼쪽 순서로 여백을 지정합니다. (시계방향)

padding 값을 변경시키는 것으로 셀의 크기가 바뀔 수 있습니다.

6. width & height : 테이블의 가로 & 세로 크기 지정

          table{
		border: 1px solid #fff;
		border-collapse: collapse;
	  }
	  th{
		border: 1px solid #fff;
		width: 100px;
	  }
	  td{
		border: 1px solid #fff;
		width: 50px;
		height: 50px;
	  }

width: 테이블 요소의 가로 크기를 지정합니다. 위처럼 같은 열의 th나 td 중 더 높은 width값을 따라 가로 크기가 지정됩니다. 표 전체나 셀 각각에 지정할 수 있습니다.
height: 테이블 요소의 세로 크기를 지정합니다. 같은 행의 th, td 중 높은 height 값을 따라 세로 크기가 지정됩니다. 표 전체나 셀 각각에 지정할 수 있습니다.

          table{
		border: 1px solid #fff;
		border-collapse: collapse;
	  }
	  th{
		border: 1px solid #fff;
	  }
	  td{
		border: 1px solid #fff;
	  }
	  .t1{
		width: 500px;
		height: 100px;
	  }

table의 가로 크기를 지정할 경우 셀의 가로 크기에 상관없이 table의 크기로 표가 만들어지지만, 셀의 세로 크기의 합이 테이블의 세로 크기보다 크면 셀의 세로 크기의 합으로 표가 만들어집니다.

7. background-color: 테이블에 배경색 넣기

table, tr, th, td, thead, tbody, tfoot에 적용 가능합니다.

table{ background-color: #967E76; }

td{ background-color: #594545; }

홀수 행, 짝수 행 배경색 다르게 하기

	  tbody tr:nth-child(2n) {
		background-color: #775055;
	  }
	  tbody tr:nth-child(2n-1) {
		background-color: #967E76;
	  }

tr 요소의 nth-child(2n)선택자로 짝수 행, nth-child(2n-1)으로 홀수 행을 선택하여 색을 다르게 지정합니다.

홀수 열, 짝수 열 배경색 다르게 하기

	  td:nth-child(2n), th:nth-child(2n){
	  	background-color: #775055;
	  }
	  td:nth-child(2n-1), th:nth-child(2n-1){
	  	background-color: #967E76;
	  }

th, td 요소의 nth-child(2n)선택자로 짝수 열, nth-child(2n-1)으로 홀수 열을 선택하여 색을 다르게 지정합니다.

8. margin : 테이블 가운데 정렬

      table{
		margin-left:auto;
		margin-right:auto;
	  }

테이블 자체를 정렬할 때는 margin 속성을 사용합니다.

      table{
		margin-left:auto;
		margin-right:0;
	  }

float: right;

오른쪽 정렬 할 때는 float: right를 사용해도 됩니다.

9. text-align & vertical-align 셀 내용 정렬

	  th{
		text-align:left;
	  }
	  td{
		text-align:right;
	  }

text-align: 셀 안의 내용의 가로 정렬할 때 사용합니다. left, center, right 속성값을 가지고 있습니다.

	  th{
		vertical-align:top;
	  }
	  td{
		vertical-align:bottom;
	  }

vertical-align: 셀 안의 내용의 세로 정렬할 때 사용합니다. top, middle, bottom 속성값을 가지고 있습니다.

10. overflow-x : 테이블 자체의 스크롤 추가

테이블의 가로 크기가 너무 크면 스크롤이 생기게되는데, 전체 스크롤이기에 모든 화면이 같이 이동하는 것이 불편하다고 느낄 수 있습니다. 이를 해결하기 위해 테이블을 감싸고 있는 부모요소(대부분 div) 에 overflow-x: auto 속성을 추가해 주면 해당 요소만의 스크롤이 생기도록 할 수 있습니다.

overflow-x: auto

[HTML 기초] 03. 링크, 리스트, 테이블 태그 사용법

OTIKLO — Sun, 26 Feb 2023 12:00:33 +0900

1. <a> : 링크(link)

<a> 태그는 href 속성을 사용하여 웹페이지나 파일, 동영상, 이미지 등의 링크를 걸 수 있습니다. 동영상 플레이어가 실행되도록 하거나 그 페이지로 이동하는 등 여러 방식으로 할 수 있습니다.

<a href="값"> 링크를 걸 문장 </a>

href 속성에 #을 넣으면 해당 id를 가진 요소로 이동할 수 있습니다. 다른 문서의 id라면 docName.html#goid 이런 방식으로 파일이름. html#아이디로 하면 이동할 수 있습니다.

target 속성을 사용하여 링크를 열 곳을 지정할 수 있습니다.

target= _self | _blank | _parent | _top

_self : 기본값으로 현재 페이지에서 링크를 처리합니다.
_blank : 새 창 또는 새 탭에서 링크를 처리합니다.
_parent, _top : 웹페이지를 frameset으로 구성했을 때 사용합니다. 추후 다루도록 하겠습니다.

<a href="" download> 링크를 걸 문장 </a>

이렇게 download를 붙이면 링크를 클릭했을 때 다운로드를 하도록 합니다.

2. <ol> <ul> <dl> : 리스트 만들기

<ol> <ul> <dl> 리스트 모두 목록 안에 목록을 넣을 수 있습니다.

2-1. <ol> : Ordered List (순서 있는 목록)

숫자뿐만 아니라 알파벳, 로마자, 라틴어, 그리스어 등으로 바꿀 수 있는데, CSS를 사용하여 지정하는 것을 권장합니다.

<ol> 태그 안에 <li> 태그를 사용하여 목록을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style type="text/css">
    </style>
  </head>
  <body>
	<h1>ol</h1>
	<ol>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ol>
  </body>
</html>

<ol start="">
<li value="">

ol start : 시작 번호 지정
li value : 특정 li의 번호 지정

2-2. <ul> : Unordered List (순서 없는 목록)

목록에 붙는 도형은 CSS로 바꾸는 것을 권장합니다.

<ul> 태그 안에 <li>태그를 사용하여 목록을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style type="text/css">
    </style>
  </head>
  <body>
	<h1>ul</h1>
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
  </body>
</html>

2-3. <dl> : Definition List (정의 목록)

용어와 뜻을 나열할 때 사용합니다.

<dl> 태그 안에 <dt> 태그를 사용하여 용어 목록을 만들고, <dd>를 사용하여 정의를 넣습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style type="text/css">
    </style>
  </head>
  <body>
	<h1>ul</h1>
	<dl>
		<dt>dt1</dt>
		<dd>dd1</dd>
		<dt>dt2</dt>
		<dd>dd2</dd>
		<dt>dt3</dt>
		<dd>dd3</dd>
	</dl>
  </body>
</html>

3. <table> : 테이블(표) 만들기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style type="text/css">
		table {
			width:50%;
			border: 1px solid;
		}
		th, td{
			border: 1px solid;
		}
	
    </style>
  </head>
  <body>
	<table>
      <caption>caption</caption>
      <thead>
        <tr>
          <th>th</th>
          <th>th</th>
          <th>th</th>
          <th>th</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <td>td</td>
          <td>td</td>
          <td rowspan="2">td</td>
        </tr>
        <tr>
          <th>th</th>
          <td>td</td>
          <td>td</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Table Foot</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

<table> : 표를 만듭니다. <tr>, <th>, <td> 태그를 사용하여 셀을 그립니다.
<tr> : 행입니다.
<th> : 열이나 행의 제목을 표시하는 셀입니다.
<td> : 내용이 들어가는 셀입니다.
<thead> <tbody> <tfoot> : 각 열을 구분 지을 수 있습니다. 사용하지 않아도 됩니다.
colspan : 셀 가로 병합 속성입니다.
rowspan : 셀 세로 병합 속성입니다.
caption : 표에 캡션을 붙일 때 사용하는 속성입니다. 기본 위치가 표의 가운데 윗부분이며 캡션 위치는 CSS에서 caption-side 속성으로 지정할 수 있습니다.

[CSS 기초] 05. CSS 리스트 꾸미기 (List)

OTIKLO — Sat, 25 Feb 2023 12:00:24 +0900

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
    </style>
  </head>
  <body>
    <ul>
        <li>아메리카노</li>
        <li>카페라떼</li>
        <li>아이스티</li>
        <li>유자차</li>
    </ul>

    <ol>
        <li>아메리카노</li>
        <li>카페라떼</li>
        <li>아이스티</li>
        <li>유자차</li>
    </ol>
  </body>
</html>

1. 목록 가운데 정렬 : text-align, margin

		.c1 {
			text-align: center;
			background: #555;
		}
		.c2 {
			width: 300px;
			margin-left: auto;
			margin-right: auto;
			background: #555;
		}
		.c3 {
			display: table;
			margin-left: auto;
			margin-right: auto;
			background: #555;
		}

목록 안의 내용만 가운데 정렬 :

text-align: center

목록 요소 자체를 가운데 정렬 : width를 지정해 주어야 margin 속성이 좌우 간격을 설정해져서 가운데 정렬 된 것처럼 보이게 됩니다. display를 사용 시 요소의 내용에 맞게 크기를 설정해 줍니다.

width: <width>
margin-left: auto
margin-right: auto

display: table
margin-left: auto
margin-right: auto

2. list-style-image : 리스트 마커 이미지 사용

		.c1 {
			list-style-image: url("img/color_icon.png");
		}

list-style-image: none | url | initial | inherit

none : 이미지를 설정하지 않습니다.
url : 사용할 이미지의 URL을 입력합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

3. list-style-position : 리스트 마커 위치 설정

		.c1 {
			list-style-position: outside;
		}
		.c2 {
			list-style-position: inside;
		}

list-style-position: inside | outside | initial | inherit

inside : 문단 안쪽에 놓습니다.
outside : 문단 바깥쪽에 놓습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

4. list-style-type : 리스트 마커 모양 설정

                ul, ol {
			width: 150px;
		}
		.ul1 {
			list-style-type: circle;
		}
		.ul2 {
			list-style-type: disc;
		}
		.ul3 {
			list-style-type: square;
		}
		.ol1 {
			list-style-type: decimal;
		}
		.ol2 {
			list-style-type: decimal-leading-zero;
		}
		.ol3 {
			list-style-type: lower-roman;
		}
		.ol4 {
			list-style-type: lower-greek;
		}
		.ol5 {
			list-style-type: lower-latin;
		}
		.ol6 {
			list-style-type: lower-alpha;
		}
		.ol7 {
			list-style-type: upper-roman;
		}
		.ol8 {
			list-style-type: upper-latin;
		}
		.ol9 {
			list-style-type: upper-alpha;
		}
		.ol10 {
			list-style-type: armenian;
		}
		.ol11 {
			list-style-type: georgian;
		}

list-style-type: none | <ul> | <ol> | initial | inherit

<ul> : disc, circle, square
<ol> : decimal, decimal-leading-zero, lower-roman, lower-greek, lower-latin, lower-alpha, upper-roman, upper-latin, upper-alpha, armenian, georgian,...
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

5. list-style : list-style image, type, position 옵션을 한 번에 설정

		.ul1 {
			list-style: square inside;
		}
		.ol1 {
			list-style: outside upper-alpha;
		}

list-style: (list-style-type) | (list-style-image) (list-style-position)

2023.02.23 - [Programming Language/CSS] - [CSS 기초] 04. CSS 문단 꾸미기

[HTML 기초] 02. 타이포그래피 태그 사용법 - <h1~h6> <p> <pre> ...

OTIKLO — Fri, 24 Feb 2023 12:00:26 +0900

1. <h1 ~ h6> : 제목(heading)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style type="text/css">
	  body {
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
	<h1>h1 태그입니다.</h1>
	<h2>h2 태그입니다.</h2>
	<h3>h3 태그입니다.</h3>
	<h4>h4 태그입니다.</h4>
	<h5>h5 태그입니다.</h5>
	<h6>h6 태그입니다.</h6>
  </body>
</html>

h태그의 글자의 기본 모양은 굵음입니다. h1에 가까울수록 크기가 커집니다. 문서의 구조와 연관되어 있기 때문에 글씨 크기를 위해 사용하지 않습니다. 글씨 크기는 font-size를 사용하여 변경하면 됩니다.

2. <p> : 문단

  <body>
	<p>중요한 건 꺾이지 않는 마음</p>
	<p>
		중요한 건
			꺾이지 않는
				마음
	</p>
  </body>

p태그와 p태그 사이는 기본적으로 간격이 있습니다. p태그는 열 때부터 닫을 때까지 한 문단으로 보기 때문에 엔터나 탭 키가 들어가 있더라도 한 줄로 나오는 것을 확인할 수 있습니다. 문단 내에서 줄 바꿈을 위해서는 <br> 태그를 사용하면 됩니다.

  <body>
	<p>중요한 건 꺾이지 않는 마음</p>
	<p>
		중요한 건<br>
			꺾이지 않는<br>
				마음<br>
	</p>
  </body>

그러나 원하는 모양처럼은 나오지 않는 것을 확인할 수 있습니다.

3. <pre> : 입력한 그대로 표시

  <body>
	<pre>중요한 건 꺾이지 않는 마음</pre>
	<pre>
		중요한 건
			꺾이지 않는
				마음
	</pre>
  </body>

p태그와 다르게 pre태그는 기본적으로 자동 줄바꿈을 해주지 않습니다. 자동 줄 바꿈을 원한다면 style에 이 속성을 주면 됩니다.

word-wrap: break-word;

4. <q> <blockquote> : 인용문 표시

인용문을 사용하는 방법에는 <q>와 <blockquote>의 두 가지 방법이 있습니다. <q> 태그는 인라인 요소이고 <blockquote> 요소는 블록 요소라는 차이점이 있습니다.

<blockquote cite="https://...">...</blockquote>
<q cite="https://...">... </q>

cite 속성 부분에 출처를 입력할 수 있는데, 웹에서 눈에 보이지는 않습니다.

  <body>
	<p> <q>중요한 건 꺾이지 않는 마음</q> - Deft </p>
  </body>

<q> 태그는 인용문을 큰따옴표(")로 감싸는 것이 기본 모양입니다.

  <body>
	<blockquote><p>중요한 건 꺾이지 않는 마음</p></blockquote>
	<p>	- Deft </p>
  </body>

<blockquote> 중요한 건 꺾이지 않는 마음 </blockquote>

<blockquote> 태그는 인용문을 양쪽이 여백으로 띄어진 것이 기본 모양입니다.

5. <em> : 글자 강조 - 기울임 꼴

  <body>
	<em>중요한 건 꺾이지 않는 마음</em>
  </body>

em 태그를 사용하면 기본적으로 글자를 기울임꼴으로 표시합니다. 강조하는 텍스트에 사용합니다.

6. <strong> : 중요한 텍스트 - 굵은 글자

  <body>
	<strong>중요한 건 꺾이지 않는 마음</strong>
  </body>

현재 위의 예시들에서 body 태그 자체에 글자 굵기를 굵게 해 놓아서 차이가 없지만 원래는 <strong>이 기본적으로 굵은 글자로 되어있습니다. <b> 태그 역시 글자를 굵게 해주는 효과가 있지만 <b> 태그는 아무런 의미를 부여하지 않은 채 굵게 하는 것이고 <strong> 태그는 중요한 텍스트라는 의미를 부여한다는 차이점이 있습니다.

티스토리 특정 부분 드래그 허용 CSS 수정

OTIKLO — Thu, 23 Feb 2023 15:00:44 +0900

안녕하세요.

티스토리 포털 검색 등록에 이어서 기초적인 설정을 이번에도 올리고자 합니다. 티스토리에 작성하는 내용을 다른 사람이 퍼가는 게 싫지만, 개발 블로그에서 코딩과 관련해서 글을 쓰면 아무래도 코드 부분은 복사를 허용하는 것이 글을 봐주시는 분들에게 도움이 되고 이는 블로그 방문 수에도 영향을 미칠 것입니다. 소스코드를 눈으로 보면서 따라 적는 것은 이해하기에는 도움이 되지만 오타 같은 휴먼 에러가 발생할 뿐 아니라 선택지를 주지도 않는다는 것 자체가 좋지 않은 방식인 것입니다. 따라서 티스토리 글의 코드블록이나 인용문 부분의 드래그를 허용하는 방법을 기록합니다.

1. [블로그 관리] → [플러그인] → "마우스 오른쪽 클릭 방지 플러그인"이 사용 중인지 확인하고, 사용 중이면 해제합니다.

2. [블로그 관리] → [스킨 편집] → [html 편집] → CSS

/*code pre 코드블럭 | blockquote 인용문 드래그 허용*/
code, pre, blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;user-select: text !important;
}
/*블로그 글 내용 드래그 금지*/
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}

3. 이 코드를 CSS의 맨 밑이나 관리하기 좋은 위치에 붙여넣기하고 적용 버튼을 클릭합니다.

인용문

코드 블럭

CSS만으로 간단한 방법으로 하고 있어서 드래그가 허용 된 영역에서부터 끌어서 다른 콘텐츠를 포함하면 다른 콘텐츠까지 드래그가 가능하다는 허점이 있지만, 더 나은 블로그 운영을 위해서 부분 드래그 허용을 해야 한다고 생각합니다.

[CSS 기초] 04. CSS 문단 꾸미기

OTIKLO — Thu, 23 Feb 2023 12:00:00 +0900

1. line-height : 줄 높이 설정

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style type="text/css">
      .c1 {
        line-height: normal;
      }
      .c2 {
        line-height: 25px;
      }
      .c3 {
        line-height: 2;
      }
      .c4 {
        line-height: 300%;
      }
      .c5 {
        line-height: 60%;
      }
    </style>
  </head>
  <body>
    <p class="c1">1. 이 문단은 <br>
		line-height: normal 입니다.<br>
		문단 꾸미기 내용 중에서...
	</p>
    <p class="c2">2. 이 문단은 <br>
		line-height: 25p 입니다.<br>
		문단 꾸미기 내용 중에서...
	</p>
    <p class="c3">3. 이 문단은 <br>
		line-height: 2 입니다.<br>
		문단 꾸미기 내용 중에서...
	</p>
    <p class="c4">4. 이 문단은 <br>
		line-height: 300% 입니다.<br>
		문단 꾸미기 내용 중에서...
	</p>
    <p class="c5">5. 이 문단은 <br>
		line-height: 60% 입니다.<br>
		문단 꾸미기 내용 중에서...
	</p>
  </body>
</html>

line-height: normal | length | number | percentage | initial | inherit

normal : 웹브라우저에서 정한 기본값으로 보통 1.2입니다.
length : 길이로 줄 높이를 정합니다. px을 사용합니다.
number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.
percentage : %를 사용합니다. 글자 크기의 몇 %를 줄 높이로 정합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

2. columns : 문단을 여러단으로 설정

      .c1 {
        columns : 3;
      }
      .c2 {
        columns : 200px;
      }
      .c3 {
        columns : 100px 3;
      }

columns : (column-width) (column-count)

column-width와 column-count 중 하나만 쓰는 경우가 많은데 columns 단축을 사용해서 하나만 써도 같은 효과를 냅니다.
단의 최소 가로 크기와 단의 최대 개수를 설정하는 것으로 기본값은 auto입니다.

3. column-count : 문단의 열 수 설정

      .c1 {
        column-count : auto;
      }
      .c2 {
        column-count : 3;
      }

column-count: auto | number | initial | inherit

auto : 열 수와 같은 다른 CSS 속성에 의해 결정됩니다.
number : 한 문단에서 사용될 최대 열 수를 지정합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

4. column-width : 문단의 열 너비 지정

      .c1 {
        column-count : auto;
      }
      .c2 {
        column-width: 60px;
      }
	  .c3 {
        column-width: 20em;
      }
	  .c4 {
        column-width: 3vw;
      }

column-count: auto | <length> | initial | inherit

auto : 열 너비는 다른 CSS 속성에 의해 결정됩니다.
<length> : 열의 너비를 지정합니다. 지정된 값과 다를 수 있고, 컨테이너에 따라 달라질 수 있습니다. 단위는 rem, em, px, vw 등을 사용합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

5. tab-size : 탭 크기 설정

      .c1 {
        tab-size: 4
      }
      .c2 {
        tab-size: 10em;
      }
	  .c3 {
        tab-size: 20vw;
      }

column-count: <size> | initial | inherit

HTML에서 탭을 여러 개 넣더라도 공백 하나로 인식합니다. 탭을 인식하고 싶으면 pre 태그를 사용하면 됩니다.

<size> : 탭 크기를 설정합니다. 기본값은 8개의 공백입니다. 단위는 rem, em, px, vw 등을 사용하며 단위 없이 사용하는 것도 가능합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

6. text-align : 문단 정렬 설정

      .c1 {
        text-align : left;
      }
      .c2 {
        text-align : right;
      }
      .c3 {
        text-align : center;
      }
      .c4 {
        text-align : justify;
      }

text-align: left | right | center | justify | initial | inherit

left : 왼쪽 정렬 설정입니다.
right : 오른쪽 정렬 설정입니다.
center : 가운데 정렬 설정입니다.
justify : 양쪽 정렬 설정입니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

7. text-decoration : 텍스트 선으로 꾸미기

      .c1 {text-decoration: none;}
      .c2 {text-decoration: line-through;}
      .c3 {text-decoration: overline;}
      .c4 {text-decoration: underline;}
      .c5 {text-decoration: overline underline;}
      .c6 {text-decoration: overline underline line-through;}

text-decoration: none | line-through | overline | underline | initial | inherit

none : 선을 만들지 않습니다.
line-through : 글자 중간에 선을 만듭니다.
overline : 글자 위에 선을 만듭니다.
underline : 글자 아래에 선을 만듭니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

속성을 여러 개 사용할 수 있습니다.

8. text-indent : 문단 들여 쓰기, 내여 쓰기

      .c1 {
        text-indent: 2em;
      }
      .c2 {
        text-indent: -2em;
      }

text-indent: <length> | <percentage> | initial | inherit

<length> : 기본값은 0입니다. px, mm, em 등의 단위로 지정되며, 양수라면 들여 쓰기, 음수라면 내여쓰기가 됩니다.
<percentage> : %를 사용합니다. 상대적인 넓이의 들여쓰기, 내여 쓰기를 지정합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

9. word-break : 줄 바꿈 설정

      .c1 {
        word-break: normal;
      }
      .c2 {
        word-break: break-all;
      }
      .c3 {
        word-break: keep-all;
      }

word-break: normal | break-all | keep-all | initial | inherit;

normal : 한국어, 일본어, 중국어 문자는 글자 기준으로, 이외의 문자는 단어 기준으로 줄 바꿈 합니다.
break-all : 글자를 기준으로 줄 바꿈 합니다.
keep-all : 단어를 기준으로 줄 바꿈 합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

2023.02.21 - [Programming Language/CSS] - [CSS 기초] 03. CSS 글자 꾸미기 (font)

티스토리 포털 사이트 검색 등록 - 네이버 (NAVER)

OTIKLO — Wed, 22 Feb 2023 15:00:53 +0900

안녕하세요.

지난번에는 티스토리 블로그를 포털 사이트 검색에서 나오도록 구글 검색에 등록하는 글을 올렸는데요. 지난 글에 이어서 이번에는 네이버에서 검색이 가능하도록 네이버 검색 등록하는 방법을 소개하겠습니다.

이왕 블로그를 정리하는 만큼 많은 사람이 보면 좋겠죠!

1. 네이버 서치어드바이저 등록

1) 네이버 서치어드바이저에 들어갑니다. 검색창에 "네이버 서치어드바이저" 검색 혹은 링크 클릭

https://searchadvisor.naver.com/

네이버 서치어드바이저

네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요

searchadvisor.naver.com

2) 로그인 한 후 웹마스터 도구 클릭

3) [사이트 관리] : [사이트 등록]에 https//를 포함한 티스토리 url을 입력 ("https://oooo.tistory.com/")

4-1) 사이트 소유확인 페이지에서 HTML 태그를 선택

4-2) <meta name="naver-site-verification" content="... " /> 부분 복사

※ 창 닫지 않습니다.

5) 티스토리 블로그 관리 → [꾸미기] → [스킨 편집] → html 편집

5-1) <head></head> 사이의 아무 곳에 복사한 [HTML 태그]를 붙여놓고 적용 버튼을 누릅니다.

6) 네이버 서치어드바이저로 돌아와서 확인, 소유확인 클릭

자동등록 방지하기 위한 보안 절차 입력 후 확인

2. 블로그 글 하나 이상 작성 후 사이트맵과 rss 제출

1) 등록된 사이트 클릭

2) 사이트맵 제출 클릭

3) 사이트맵 URL 입력에 sitemap.xml 입력 후 제출

4-1) RSS 제출 클릭

4-2) 위와 같은 방식으로 새 사이트맵 추가에 rss 입력 후 제출

3. 요약

네이버 서치어드바이저에 들어갑니다. 웹마스터 도구를 클릭합니다.
[사이트 관리]→[사이트 등록] 페이지에서 본인의 티스토리 url을 입력하고 오른쪽의 버튼 클릭합니다. (https://포함)
[사이트 소유확인]페이지의 [HTML 태그] 클릭하고 내용 복사 후 티스토리 블로그 관리에 갑니다. (네이버 서치어드바이저 페이지는 그대로 열어둡니다!!)
티스토리의 관리→꾸미기→스킨 편집→html 편집
<head></head> 사이의 아무 곳에 복사한 [HTML 태그]를 붙여놓고 적용 버튼을 누릅니다.
네이버 서치어드바이저에서 확인, 소유확인 버튼 누릅니다.
[사이트 등록]페이지에서 등록된 사이트를 클릭하여 들어간 후 [요청]→[사이트맵 제출] 메뉴로 들어갑니다.
[사이트맵 URL 입력]에 블로그 url + sitemap.xml (https://oooo.tistory.com/sitemap.xml)를 입력합니다.
[요청]→[RSS 제출] 메뉴로 들어갑니다. [RSS URL 입력]에 블로그 url + rss (https://oooo.tistory.com/rss)를 입력합니다.

2023.02.21 - [정보] - 티스토리 포털 사이트 검색 등록 - 구글 (Google)

티스토리 포털 사이트 검색 등록 - 구글 (Google)

OTIKLO — Tue, 21 Feb 2023 13:35:27 +0900

안녕하세요.

저는 티스토리에 처음 블로그를 만들고 신나서 글 쓰고 꾸미고 하던 중 관리 창에서 방문기록을 보다가 이상함을 눈치챘습니다. 물론 제가 글을 잘 못 써서 그런 것도 있겠지만... 방문 통계를 보는 데 다음을 통해서만 방문이 있는 것이었습니다..! 혹시나 해서 구글에 제목을 복사해서 검색을 해보았는데..? 설마 했던 일이 현실로 일어났습니다.

티스토리는 다음에서는 바로 검색 가능하게 되어있지만 구글이나 네이버처럼 다른 검색 포털에는 블로그를 만들었다고 통보해야 하는 것이였습니다! 이번 글에서는 구글 서치콘솔에 블로그를 등록하여 티스토리 블로그를 구글 검색에 노출시키는 방법에 대해서 적고자합니다.

1. 구글 서치콘솔 등록

1) 구글 서치콘솔에 들어갑니다. 검색창에 "구글서치콘솔" 검색 혹은 링크 클릭

https://search.google.com/search-console/about

Google Search Console

Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.

search.google.com

2) 시작하기 버튼 클릭

3-1) URL 접두어에 자신의 티스토리의 url 입력 후 (https:// 포함)

3-2) 계속 버튼 클릭

4-1) "다른 확인 방법"의 [HTML 태그] 클릭

4-2) <meta name="google-site-verification" content="... " /> 부분 복사

※ 창 닫지 않습니다.

5) 티스토리 블로그 관리 → [꾸미기] → [스킨 편집] → html 편집

5-1) <head></head> 사이의 아무 곳에 복사한 [HTML 태그]를 붙여놓고 적용 버튼을 누릅니다.

6) 구글 서치콘솔로 돌아와서 확인 선택

6-1) 속성으로 이동 선택

2. 블로그 글 하나 이상 작성 후 사이트맵과 rss 제출

1) Sitemaps 클릭

2-1) 새 사이트맵 추가에 sitemap.xml 입력 후 제출

2-2) 같은 방식으로 새 사이트맵 추가에 rss 입력 후 제출

기다리면 상태가 성공이 됩니다.

3. 구글 서치콘솔 사이트맵 (sitemap.xml) 등록 안될 경우 - 가져올 수 없음

1) 구글 서치콘솔에 접속 → 맨 위 검색창에 자신의 url(https://~~~.tistory.com)에 /sitemap.xml 입력 후 Enter.

2) 실제 URL 테스트 클릭

3) 대기 후 문제없으면 색인 생성 요청 클릭

4. 요약

구글 서치콘솔에 들어갑니다. 시작하기를 클릭합니다.
URL 접두어에 자신의 블로그 url을 입력하고 계속 버튼 클릭합니다. (https://포함)
"다른 확인 방법"의 [HTML 태그] 클릭하고 내용 복사 후 티스토리 블로그 관리에 갑니다. (구글 서치콘솔 페이지는 그대로 열어둡니다!!)
티스토리의 관리→꾸미기→스킨 편집→html 편집
<head></head> 사이의 아무 곳에 복사한 [HTML 태그]를 붙여놓고 적용 버튼을 누릅니다.
구글 서치콘솔에서 확인 버튼 누릅니다.
속성으로 이동 클릭하여 들어간 후 Sitemaps 메뉴로 들어갑니다.
새 사이트맵 추가에 sitemap.xml , rss 각각 입력&제출
sitemap.xml 가져올 수 없음 상태가 계속될 경우 바로 위 검색창에 자신의 url + sitemap.xml 입력한 https://ooo.tistory.com/sitemap.xml 입력하고 Enter를 를 누릅니다.
실제 URL 테스트 클릭한 뒤 색인 생성 요청 버튼을 클릭합니다.

[CSS 기초] 03. CSS 글자 꾸미기 (font)

OTIKLO — Tue, 21 Feb 2023 12:00:51 +0900

1. color : 글자 색 설정

color: color | initial | inherit

color : 색을 지정합니다. 색상코드(#) 혹은 정의된 색(white, black 등) 등을 사용합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

2. font-family : 글꼴 설정

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .c1 { font-family: serif; }
      .c2 { font-family: sans-serif; }
      .c3 { font-family: monospace; }
      .c4 { font-family: cursive; }
      .c5 { font-family: fantasy; }
    </style>
  </head>
  <body>
    <p class="c1">font-family: serif;</p>
    <p class="c2">font-family: sans-serif;</p>
    <p class="c3">font-family: monospace;</p>
    <p class="c4">font-family: cursive;</p>
    <p class="c5">font-family: fantasy;</p>
  </body>
</html>

font-family: font | initial | inherit

font : family-name 또는 generic-family
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

family-name은 글꼴의 이름으로, 이름에 띄어쓰기가 있으면 작은 따옴표 혹은 큰 따옴표로 감싸주어야 합니다.

generic-family는 글꼴의 유형으로 serif, sans-serif, monospace, cursive, fantasy가 있습니다.

3. font-size : 글자 크기 설정

      .c1 { font-size: xx-small; }
      .c2 { font-size: x-small; }
      .c3 { font-size: small; }
      .c4 { font-size: medium; }
      .c5 { font-size: large; }
      .c6 { font-size: x-large; }
      .c7 { font-size: xx-large; }

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit

medium : 웹브라우저에서 정한 기본 글자크기입니다.
xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기입니다.
smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다.
length : px, %, em, rem 등을 사용하여 크기를 정합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

      .c-px { font-size: 16px; }
      .c-smaller { font-size: smaller; }
      .c-larger { font-size: larger; }
      .c-percentage { font-size: 150%; }
      .c-em { font-size: 1.5em; }
      .c-rem { font-size: 1.5rem; }

px : 픽셀단위. 웹브라우저의 기본 글자 크기는 보통 16px과 같습니다.
% : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. 100%가 부모 크기와 같고 100%를 넘는 만큼 글자가 커지고 작아지는 만큼 글자가 작아집니다.
em : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. 1em이 부모 크기와 같고 숫자가 커질수록 글자가 커지고 작아질수록 글자가 작아집니다.
rem : 최상위 요소(html 요소)의 글자 크기에 대한 상대적인 글자 크기입니다.

4. font-weight : 글자 굵기 설정

      .c1 { font-weight: normal; }
      .c2 { font-weight: bold; }
      .c3 { font-weight: 100; }
      .c4 { font-weight: 600; }

font-weight: normal | bold | bolder | lighter | number | initial | inherit

normal : 보통 두께의 굵기입니다. 숫자 400과 같습니다.
bold : 굵은 굵기입니다. 숫자 700과 같습니다.
bolder : 상속된 값보다 굵은 굵기입니다.
lighter : 상속된 값보다 얇은 굵기입니다.
number : 100, 200, 300, 400, 500, 600, 700, 800, 900
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 값을 상속받습니다.

5. font-style : 글자 모양 설정

      .c1 { font-style: normal; }
      .c2 { font-style: italic; }
      .c3 { font-style: oblique; }

font-style: normal | italic | oblique | initial | inherit

normal : 보통 모양입니다.
italic : 기울임꼴입니다.
oblique : 기울임 꼴입니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

6. text-shadow : 글자에 그림자 주기

      p {
        font-family: "Arial Black", sans-serif;
        font-size: 40px;
        font-weight: bold;
        color: #ffffff;
      }
      .c1 { text-shadow: 2px 2px 2px gray; }
      .c2 { text-shadow: 4px 4px 2px gray; }
      .c3 { text-shadow: 6px 6px 2px gray; }

text-shadow: offset-x offset-y blur-radius color | none | initial | inherit

offset-x : 그림자의 수평 거리를 정합니다. (필수) 그림자의 위치가 오른쪽으로 넓어집니다.
offset-y : 그림자의 수직 거리를 정합니다. (필수) 그림자의 위치가 아래쪽으로 넓어집니다.
blur-radius : 그림자의 흐림 정도를 정합니다. (값을 정하지 않으면 0)
color : 색을 정합니다. (값을 정하지 않으면 브라우저 기본값)
none : 그림자 효과를 없앱니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

7. letter-spacing : 글자 사이 간격 설정

      .c1 { letter-spacing: 5px; }
      .c2 { letter-spacing: 20px; }

letter-spacing: px

값이 커지면 간격이 커집니다. 값에 음수를 넣을 수도 있습니다.

8. word-spacing : 단어 사이 간격 설정

      .c1 { word-spacing: 5px; }
      .c2 { word-spacing: 20px; }

word-spacing: px

값이 커지면 간격이 커집니다. 값에 음수를 넣을 수도 있습니다.

9. font-variant : 소문자를 작은 대문자로 변경

      .c1 { font-variant: normal; }
      .c2 { font-variant: small-caps; }

font-variant: normal | small-caps | initial | inherit

normal : 소문자를 작은 대문자로 바꾸지 않습니다.
small-caps : 소문자를 작은 대문자로 바꿉니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

2023.02.19 - [Programming Language/CSS] - [CSS 기초] 02. CSS 선택자(Selector)