ํฐํธ์ ํ ์คํธ ์์ฑ
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํฐํธ์ ํ
์คํธ๊ด๋ จ ์์ฑ</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Poppins:wght@300;600;900&display=swap" rel="stylesheet">
<style>
h1 {
font-family: Poppins, 'Noto Sans KR' sans-serif;
font-weight: 600;
}
.font {
font : oblique small-caps bold 14px '๊ถ์';
}
.em1 {
font-weight: 600;
font-style: normal;
letter-spacing: 2em;
}
.css {
text-indent: 50px; line-height: 200%;
}
.strong {
word-spacing: 2em; text-decoration: underline;
}
.price {
width: 500px;
height: 50px;
text-align: center;
border: 1px solid blue;
}
.c_price {
text-decoration: line-through;
}
.pre {
white-space: pre;
}
.direction {
width: 500px;
margin: 0 auto;
direction: rtl;
}
.shadow {
width: 300px;
height: 50px;
margin: 0 auto;
font-size: 2.5em;
font-weight: bolder;
text-shadow: 5px 5px 10px gray;
}
.overflow1 {
width: 300px;
border : 1px solid blue;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<h1>ํฐํธ์ ํ
์คํธ ๊ด๋ จ ์์ฑ(Font & Text CSS Attribute)</h1>
<p>font๋ ๊ธ๊ผด์ ๋ค์ํ ์์ฑ์
<span class="font">ํ ๋ฒ์ ์ง์ ํ ์ ์๋</span>
<span class="em1">์ถ์ฝํ</span> ์์ฑ์ด๋ค.
</p>
<p class="css">HTML ๋ฌธ์์ ๋์์ธ์ ๋ด๋นํ๋ CSS๋
<strong class="strong">ํฐํธ์ ํ
์คํธ ์์ฑ์ ๋ค์ํ๊ฒ ์ ๊ณตํ๊ณ ์๋ค.</strong></p>
<p class="price">๊ทธ ์ํ์ ํ๋งค๊ฐ๋ <strong>9,900์</strong>
(<span class="c_price">10,000</span>)
<div class="pre">ํ
์คํธ์ ๊ณต๋ฐฑ๋ฌธ์๋ฅผ
์ฒ๋ฆฌํ ์ ์๋ ๋ฐฉ๋ฒ์
์ง์ ํ๋ค.</div>
<div class="direction">ํ
์คํธ์ ์ฐ๊ธฐ ๋ฐฉํฅ๊ณผ ํ๊ธ์ ์ ์ฉ๋์ง ์๋ font-variant</div>
<div class="shadow">ํ
์คํธ์ ๊ทธ๋ฆผ์ ์ค์ ํ๊ธฐ</div>
<p class="overflow1">font-family๋ ๊ธ๊ผด์ ์ข
๋ฅ๋ฅผ ์ง์ ํ๋ ์์ฑ์ด๋ค.
๋ง์ฝ ๊ธ๊ผด์ ๊ณต๋ฐฑ์๋ ์ด๋ฆ์ด๋ฉด ๋ฐ์ดํ(โโ)๋ก ๊ฐ์ธ์ ์ง์ ํด์ผ ํ๋ค.</p>
</body>
</html>- h1 {font-family: Poppins, 'Noto Sans KR', sans-serif; font-weight: 600;}
๊ตฌ๊ธ ์น ํฐํธ๋ฅผ ์ฌ์ฉํด ๊ธ๊ผด๊ณผ ๊ธ๊ผด์ ๋๊ป๋ฅผ ์ง์ ํ๋ค.
font-family์ ์ง์ ํ ์์๋๋ก ๊ธ๊ผด์ด ์ ์ฉ๋๋๋ฐ Poppins๋ ์๋ฌธ ์ ์ฉ ํฐํธ์ด๋ฏ๋ก
์๋ฌธ์ Poppins ํฐํธ๊ฐ ์ ์ฉ๋๊ณ ํ๊ธ์ Poppins ํฐํธ์ ํ๊ธ์ด ์์ผ๋ฏ๋ก
๋ค์์ ์ง์ ํ 'Noto Sans KR' ํฐํธ๊ฐ ์ ์ฉ๋์ด ํ๋ฉด์ ํ์๋๋ค.
๊ธ๊ผด ์ด๋ฆ์ ๊ณต๋ฐฑ์ด ์์ผ๋ฉด ๊ธ๊ผด ์ด๋ฆ์ ์จ์ ํ ํ์ํ๊ธฐ ์ํด์ ๋ฐ์ดํ ๊ฐ์ผ๋ค. (https://fonts.google.com)
- .font { font: oblique small-caps bold 14px ๊ถ์; }
font ์์ฑ์ ๋ชจ๋ ํฐํธ ์์ฑ์ ํ๋๋ก ์ ์ํ๋ ์ถ์ฝ ์์ฑ์ด๋ค.
font ์์ฑ์ ๊ฐ์ผ๋ก font-style, font-variant, font-weight, font-size/line-height, font-family ์์ผ๋ก ์ง์ ํ ์ ์๋ค.
font-size ์ font-family ๋ ํ์ ๊ฐ์ผ๋ก ๋ ๊ฐ ์ค ํ๋๋ผ๋ ์ง์ ํ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ ๊ฐ์ผ๋ก ์ค์ ๋๋ค. ๋๋จธ์ง๋ ์๋ต ๊ฐ๋ฅํ๋ค.
- .em1 { font-weight: 600; font-style: normal; letter-spacing: 2em; }
font-weight ์์ฑ์ ๊ฐ์ lighter, bolder, bold ๋ฑ์ ๊ฐ๊ณผ 100 ~ 900 ์ฌ์ด 100 ๋จ์๋ก ๊ธ๊ผด์ ๋๊ป๋ฅผ ์ง์ ํ ์ ์๋ค.
letter-spacing์ ๊ธ์ ์ฌ์ด ๊ฐ๊ฒฉ์ ์ง์
- .css { text-indent: 50px; line-height: 200%; }
ํ
์คํธ ๋ค์ฌ์ฐ๊ธฐ์ ์ค ๊ฐ๊ฒฉ ์ง์
- .strong { word-spacing: 2em; text-decoration: underline; }
ํ
์คํธ์ ๋จ์ด ์ฌ์ด ๊ฐ๊ฒฉ๊ณผ ๋ฐ์ค์ ์ง์
- .c_price { text-decoration: line-through; }
ํ
์คํธ์ ์ทจ์์ ์ง์
- .pre { white-space: pre; }
์ฐ์ํ๋ ๊ณต๋ฐฑ์ ์๋ ๊ทธ๋๋ก ์ถ๋ ฅ ๋๋๋ก ์ง์
- font-variant: small-caps;
ํ
์คํธ๋ฅผ ๋๋ฌธ์๋ก ์ง์
- direction: rtl;
ํ
์คํธ ์ฐ๊ธฐ ๋ฐฉํฅ์ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ง์
- text-shadow: 5px 5px 5px gray;
ํ
์คํธ์ ๊ทธ๋ฆผ์ ํจ๊ณผ ์ง์ - ๊ฐ๋ก ์ต์
์ธ๋ก ์ต์
๊ทธ๋ฆผ์ ๋ฒ์ง ์ ๋ ์์
- text-overflow: ellipsis;
ํ
์คํธ๊ฐ ์๋ ธ๋ค๋ ์๋ฏธ๋ก ๋ง์ค์ํ(...)๋ฅผ ํ์ํ๋ค.
ํ
์คํธ๋ฅผ ํ์ํ ๋ ๋ด์ฉ์ด ๋ฐ์ค ๋ณด๋ค ๊ธด ๊ฒฝ์ฐ ํ
์คํธ์ ์ค์ ๋ฐ๊พธ์ง ๋ชปํ๊ฒ ํ๊ณ
text-overflow ์์ฑ์ ellipsis๋ฅผ ์ง์ ํ๋ฉด ๋ง ์ค์ํ๋ฅผ ํ์ํ ์ ์๋ค.
์ด๋ ์ฃผ์ํด์ผ ํ ์ ์ ๋์น๋ ํ
์คํธ์ ๋ด์ฉ์ ํ๋ฉด์์ ๋ณด์ด์ง ์๊ฒ ์ค์ ํด์ผ ํ๋ค๋ ๊ฒ์ด๋ค.
- white-space: nowrap;
์ฐ์ํ๋ ๊ณต๋ฐฑ์ ํ ์นธ์ผ๋ก ํ์ํ๊ณ ๋ด์ฉ์ด ๊ธธ์ด๋ ์ค์ ๋ฐ๊พธ์ง ์๋๋ค.
- overflow: hidden;
๋ฐ์ค์ ํฌ๊ธฐ๋ณด๋ค ๋์น๋ ๋ด์ฉ์ ์จ๊ธด๋ค.
CSS์ ๋ชฉ๋ก ์์ฑ
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS์ ๋ชฉ๋ก ์์ฑ</title>
<style>
body {
font: 0.9em '๋ง์ ๊ณ ๋', "๋์" sans-serif;
}
#webStandard {
list-style-image: url(images/arrow.gif);
list-style-position: inside;
}
#listJavaScript {
list-style-type: upper-roman;
list-style-position: outside;
}
</style>
</head>
<body>
<header>
<h1>CSS์์ ๋ชฉ๋ก ์์ฑ ๋ค๋ฃจ๊ธฐ</h1>
</header>
<section>
<article>
<h3>์น ํ์ค ๋์ ๋ชฉ๋ก</h3>
<ul id="webStandard">
<li>HTML5+CSS3+JavaScript ์น ํ๋ก๊ทธ๋๋ฐ</li>
<li>HTML5์ CSS3๋ก ์น ํ๋ก๊ทธ๋๋ฐ ์์ํ๊ธฐ</li>
</ul>
</article>
<article>
<h3>์๋ฐ์คํฌ๋ฆฝํธ ๋์ ๋ชฉ๋ก</h3>
<ol id="listJavaScript">
<li>์๋ฐ์คํฌ๋ฆฝํธ ์๋ฒฝ ๊ฐ์ด๋</li>
<li>๋ชจ๋ ์น์ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ</li>
</ol>
</article>
</section>
</body>
</html>
- body { font: 0.9em "๋ง์ ๊ณ ๋", "๋์", sans-serif; }
font-size์ font-family ๋ฅผ ์ง์
- list-style-position: inside;
๋ง์ปค(marker)๋ฅผ ๋ค์ฌ์ฐ๊ธฐ ํ๋ค. ๊ธฐ๋ณธ ๊ฐ์ outside ์ด๋ค.
ํ ๋๋ฆฌ ๊ด๋ จ ์์ฑ๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์์ฑ
โถ ์์ ๋ณด๊ธฐ
<!DOCTYPE HTML>
<html>
<head>
<title>ํ
๋๋ฆฌ ๊ด๋ จ ์์ฑ๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์์ฑ</title>
<meta charset="UTF-8" />
<style>
body {
font: 0.95em '๋ง์ ๊ณ ๋', sans-serif;
margin: 30px;
}
div {
width: 600px;
border: 10px solid #FF0033;
border-radius: 20px;
background-color: #6d6d6d;
}
p {
background-color: #ffffff;
line-height: 2em;
margin: 20px;
padding: 15px;
}
.round1 {
border: 10px solid #FF9933;
border-radius: 30px 0;
}
.round2 {
border: 10px solid #FF66FF;
border-radius: 30px 0 0 0;
}
.round3 {
height: 50px;
border-radius: 30px;
background-image: url(images/gear_icon01.png);
background-repeat: repeat-x;
background-position: center;
}
.round4 {
width: 50px;
height: 50px;
border-radius: 30px/20px;
background-image: url(images/gear_icon01.png);
background-repeat: no-repeat;
background-position: center;
background-size: 50px 50px;
opacity: 0.5;
}
.icon01 {
width: 24px;
height: 26px;
padding: 0px;
border-radius: 25%;
background-image: url(images/bg_long01.jpg);
background-repeat: no-repeat;
background-position: -2px -89px;
}
</style>
</head>
<body>
<div class="shadow">
<p class="round1">
์ผ์๊ณผ ํ์ฐจ๊ฒ ํ๋ณต์ค๋ฝ๊ณ ์ผ๋ง๋ ๋ด๋ ค์จ ์ธ์ธํ๋ด?<br/>
์ด์์ด ๊ณต์๋ ์ญ์ฌ๋ฅผ ํ์ฌ๋ ์ํ์ฌ ๋์ ๊ฐ์ด ์ฅ์ํ๋ ๊ฒ์ด๋ค.<br/>
๋๋ ์ธ๊ฐ์ด ์ด์ฑ์ ๊ฐ์ง ์ด๊ฒ์ ์ธ๊ฐ์ ๋ง์ด๋ค.</p>
<p class="round2">
์์ํ๋ฉฐ, ์ฌ๋์ ์ปค๋ค๋ ์๋ฆ๋ค์ฐ๋?<br/>
๊ฐ์ด, ๋์ค์ ์ฌ๋ผ์ง์ง ๋ณด์ด๋ ์ธ์์ ์ ์๋
์๊ฒ์ ๋ฐ์ด๋ฉฐ, ์ฝ๋ํ๋ค.<br/>
๋ชปํ ๋ด๋ ์ฐ์ผ์ ๋ฐฉํฉํ์ฌ๋, ์๋ช
์ ๋ฐ์ ๊ฒ์ด๋ค.</p>
<p class="round3"></p>
<p class="round4"></p>
<p class="icon01"></p>
</div>
<p id="link">
<a href="http://hangul.thefron.me">ํ๊ธ Lorem Ipsum</a>์์ ๋ฐ์ท</p>
</body>
</html>border๋ ์ถ์ฝํ ํํ์ผ๋ก ํ
๋๋ฆฌ ๋๊ป, ์ ์ข
๋ฅ, ์ ์์์ ํ ๋ฒ์ ์ง์ ํ ์ ์๋ค.
(border-style: solid; (dotted, dashed, double, none, hidden)) (border-width: 10px;) (border-color: #ff9933;)
ํ
๋๋ฆฌ์ ๋ฐฉํฅ์ ๋ฐ๋ผ์ ์์ชฝ, ์ค๋ฅธ์ชฝ, ์๋์ชฝ, ์ผ์ชฝ์ ๊ฐ๋ณ์ ์ผ๋ก ์ง์ ํ ์ ์๋ค.
(border-top, border-right, border-bottom, border-left) (border-top-width, border-right-color, border-bottom-style)
- border-radius:30px 0px;
์ข ์๋จ ์ฐ ํ๋จ์ ๋ฐ์ง๋ฆ 30px์ ๋ผ์ด๋ ๋ชจ์๋ฆฌ ์ง์
- border-radius:30px 0px 0px 0px;
์ข ์๋จ์ ๋ฐ์ง๋ฆ 30px์ ๋ผ์ด๋ ๋ชจ์๋ฆฌ ์ง์
- border-radius: 30px;
๊ฐ๋ก์ธ๋ก ๋ฐ์ง๋ฆ 30px ๋ผ์ด๋ ๋ชจ์๋ฆฌ ์ง์
- background-image: url('images/gear_icon01.png');
- background-repeat: repeat-x;
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ํ๊ณผ ์์ง ๋ฐฉํฅ์ผ๋ก ๋ฐ๋ณตํด ์ ์ฉ๋๋๋ฐ
background-repeat ์์ฑ์ ์ด์ฉํด ๋ฐ๋ณต์ฌ๋ถ ๋๋ ๋ฐ๋ณตํ ๋ฐฉํฅ์ ์ง์ ํ ์ ์๋ค.
- border-radius: 30px/20px;
๊ฐ๋ก ๋ฐ์ง๋ฆ 30px ์ธ๋ก ๋ฐ์ง๋ฆ 20px์ ๋ผ์ด๋ ๋ชจ์๋ฆฌ ์ง์
- background-image: url('images/gear_icon01.png');
- background-size: 50px 50px;
- background-repeat: no-repeat;
- background-position: 15px 15px;
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํฌ๊ธฐ์ ๋ฐฐ์นํ๋ ์์น๋ฅผ ์ง์ ํ ์ ์๋ค.
- opacity: 0.5;
opacity ์์ฑ์ 0.0 ~ 1.0 ์ฌ์ด์ ๊ฐ์ผ๋ก ๋ถํฌ๋ช
๋๋ฅผ ์ง์ ํ ์ ์๋ค.
0.0์ ๋ถํฌ๋ช
๋๊ฐ 0์ผ๋ก ํฌ๋ช
, 0.5๋ ๋ถํฌ๋ช
๋๊ฐ ์ ๋ฐ์ผ๋ก ๋ฐํฌ๋ช
ํ๊ฒ ๋ณด์ธ๋ค.
- background-image: url('images/bg_long01.jpg');
- background-repeat: no-repeat;
- background-position: -2px -89px;
์์ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ฌ ๊ฐ ์ฌ์ฉํ ๊ฒฝ์ฐ ํ๋์ ์ด๋ฏธ์ง๋ก ๋ง๋ค์ด
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ก ์ง์ ํ๋ฉด ํ์ผ ๋ก๋ฉ ์๋๋ฅผ ํฅ์์ํฌ ์ ์๋ค.
'๐จ๏ธ Language > HTML, CSS, JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ๋จ์์ ์ ํ์ (0) | 2024.08.12 |
|---|---|
| [HTML] <table>๊ณผ <form> (0) | 2024.08.08 |
| [HTML] ํ๊ทธ์ Style (0) | 2024.08.07 |
| [HTML] ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ (0) | 2024.08.07 |
| Web์ ์ญ์ฌ์ ์น ํ์ค์ ํ์ํ ๊ธฐ์ (0) | 2024.08.07 |
