CSS [ Cascading Style Sheet ]
๋์์ธ์ ์ํ ์ธ์ด
CSS๋ HTML๊ณผ ๋ค๋ฅธ ์์ ํ ๋ ๋ฆฝ๋ ์ธ์ด์ด์ง๋ง,
HTML๊ณผ ๋ฐ๋ก ์์ ์ ์๋ ์ธ์ด์ด๋ค.
CSS๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ณ ์๋ ๋ชฉํ๋ HTML์ด๋ ์ธ์ด๋ฅผ ๋์์ธํ๊ธฐ ์ํด ๊ณ ์๋ ์ธ์ด์ด๊ธฐ ๋๋ฌธ์ด๋ค.
<!DOCTYPE html>
<html>
<head>
<meta chartset="uft-8">
<style>
h1 {color:red}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>JavaScript</h2>
<h3>HTML</h3>
</body>
</html>์ ์ฝ๋๋ฅผ ํ์ธํ๋ฉด ๋ค์๊ณผ ๊ฐ๋ค.
์ด๋ ๊ฒ <style>๋ก ์์ํด์ </style>์ด ๋๋๊ธฐ๊น์ง CSS ์ฝ๋๊ฐ ์์ฑ์ด ๋๋ค.
styleํ๊ทธ ์์ h1์์ฑ์ red๋ผ๋ ์์ ์ง์ ํด์ฃผ์๊ธฐ ๋๋ฌธ์,
CSS๋ ๋ถ์์์ผ๋ก ๋์ค๋ ๊ฑธ ํ์ธํ ์ ์๋ค.
๋ง์ฝ ๋ฌธ์์์ h1ํ๊ทธ๊ฐ ํ๋ ๋ ์๋ค๋ฉด ๊ทธ๊ฒ ๋ํ ๋ถ์์์ผ๋ก ํ์๋ ๊ฒ์ด๋ค.
์ฌ๊ธฐ์ h1์ด ๊ฐ๋ฆฌํค๋ ๊ฒ์ ์ ํ ์์ด๊ณ ๊ทธ ๋ค์ ์ง์ ํด์ฃผ๋ ๊ฒ์ ์์ ์ด๋ผ๊ณ ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta chartset="uft-8">
<style>
h1 {color:red; font-size:20px}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>JavaScript</h2>
<h3>HTML</h3>
</body>
</html>์ด๋ ๊ฒ font-size ์์ ์ ํตํด ํฐํธ์ ํฌ๊ธฐ ๋ํ ์ง์ ํด์ค ์ ์๋ค.
์ด๋ ๊ฒ css์ ๊ธ์จ ํฌ๊ธฐ๊ฐ ์์์ง ๊ฑธ ํ์ธํ ์ ์๋ค.
์ด๋ ๊ฒ color์์ฑ๊ณผ font-size์์ฑ์ ๊ตฌ๋ถํ๋ ๊ตฌ๋ถ์๊ฐ ์ธ๋ฏธ์ฝ๋ก (;)์ด๋ค.
๋ํ h2๋ํ h1๊ณผ ๊ฐ์ ์์ ์ ์ ์ฉํ๊ณ ์ถ๋ค๋ฉด
์ฝค๋ง๋ฅผ ์ฌ์ฉํ๋ฉด๋๋ค.
<style>
h1,h2 {
color:red;
font-size:20px
}
</style>
h2 ๋ํ ๋ณ๊ฒฝ๋ ๊ฑธ ํ์ธํ ์ ์๋ค.
๊ทธ๋ ๋ค๋ฉด, ์ฌ๊ธฐ์ h2 ๋ง ๋ฐ๋ก ๋ฐ์ค์ ๊ทธ์๋ ค๊ณ ํ๋ค๋ฉด,
h2 ๋ง ๋ฐ๋ก ์ถ๊ฐํด์ฃผ๋ฉด ๋๋ค.
<style>
h1,h2 {
color:red;
font-size:20px
}
h2{
text-decoration:underline;
}
</style>
๋ํ ํ๊ทธ ์์ ํ๊ทธ์ ์์ฑ์ ์ถ๊ฐํ๋ ค ํ๋ค๋ฉด,
๋์ด์ฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<meta chartset="uft-8">
<style>
h1,h2 {
color:red;
font-size:20px
}
h2{
text-decoration:underline;
}
header h1 {
border:1px solid red;
}
</style>
</head>
<body>
<header>
<h1>CSS</h1>
</header>
<h2>JavaScript</h2>
<h3>HTML</h3>
</body>
</html>
์ด๋ ๊ฒ CSS๋ฅผ <header> ํ๊ทธ๋ก ๊ฐ์ธ์ค๋ค์
CSS๋ฅผ ํตํด header h1 { border:1px solid red; }
๋ฅผ ๋ถ์ฌํด์ฃผ๋ ํ ๋๋ฆฌ๊ฐ ์๊ธด ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ฌ๊ธฐ์ border์ ํ ๋๋ฆฌ๋ฅผ ์๋ฏธํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta chartset="uft-8">
<style>
li {
border:1px red solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>
</html>์์ ๊ฐ์ ์ฝ๋์์ css์๋ง ์ค์ ์ ์ถ๊ฐํ๋ ค๊ณ ํ๋ค๋ฉด
id๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<meta chartset="uft-8">
<style>
#selected {
border:1px red solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="selected">css</li>
<li>JavaScript</li>
</ul>
</body>
</html>์ด๋ ๊ฒ ํ ๋๋ฆฌ๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์ ํ๊ทธ์ id๊ฐ์ ์ค์ ํ๊ณ
css๋ก #id๊ฐ์ ์ ๋ ฅํ๋ฉด ๊ฐ์ liํ๊ทธ๋ค์ ํ ๋๋ฆฌ๊ฐ ์ถ๊ฐ๊ฐ ์๋๊ณ ,
id๊ฐ์ ์ถ๊ฐํ ํ๊ทธ๋ง ํ ๋๋ฆฌ๊ฐ ์ถ๊ฐ๋๋ค.
์ฌ๊ธฐ์ #์ id๊ฐ์ ๋ํ๋ด๋ ํน์ํ ๊ธฐํธ์ด๋ค.
๋ํ id๊ฐ๋ ์ํ๋ ๊ฐ์ผ๋ก ์ค์ ํด์ฃผ๋ฉด ๋๋ค.
์ฌ๊ธฐ์ ํ ๋๋ฆฌ ์ฌ์ด์ ๊ณต๊ฐ์ ๋ ๋ํ๊ณ ์ถ๋ค๋ฉด,
padding์ ์ถ๊ฐํด์ฃผ๋ฉด ๋๋ค.
<style>
#selected {
border:1px red solid;
padding:30px;
}
</style>
์ด๋ ๊ฒ padding์ผ๋ก 30px์ ์ถ๊ฐํด์ฃผ๋ฉด
css์ ํ ๋๋ฆฌ๊ฐ ๋์ด์ง ๊ฒ์ ํ์ธํ ์ ์๋ค.
์ฌ๊ธฐ์ 30px์ ์๋ก 30px ์๋๋ก 30px ์ผ์ชฝ์ผ๋ก 30px์ ์ถ๊ฐ๊ฐ ๋ ๊ฒ์ด๋ค.
์ค๋ฅธ์ชฝ์ผ๋ก ๊ธด ์ด์ ๋ ํ๋ฉด ์ ์ฒด๋ฅผ ์ฐจ์งํ๊ธฐ ๋๋ฌธ์ด๋ค.
์ฌ๊ธฐ์ JavaScript์๋ ํ ๋๋ฆฌ๋ฅผ ์ถ๊ฐํ๋ฉด JavaScript์ CSS์ ํ ๋๋ฆฌ๊ฐ ๊ฒน์น๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
ํ ๋๋ฆฌ๋ฅผ ๋ฒ์ด์ง๊ฒ ํ๋ ค๋ฉด margin๊ฐ์ ์ถ๊ฐํด์ผ ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta chartset="uft-8">
<style>
#selected {
border:1px red solid;
padding:30px;
margin:50px;
}
#extra {
border:1px blue solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="selected">css</li>
<li id="extra">JavaScript</li>
</ul>
</body>
</html>
์ด๋ ๊ฒ margin๊ฐ์ผ๋ก 50px์ ์ถ๊ฐํ๋ฉด
padding๊ฐ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์์๋ ์ผ์ชฝ์ผ๋ก 50px์ด ๋ฒ์ด์ง๋ค.
์ด๋ ๊ฒ ์ง๊ธ๊น์ง ์์๋ณธ CSS๋ฌธ๋ฒ๋ค์ ๋ฐ์ค ๋ชจ๋ธ์ด๋ผ๊ณ ํ๋ค.
๊ตฌ๊ธ ๊ฐ๋ฐ์ ๋๊ตฌ(F12)๋ฅผ ํตํด์๋ ๋ฐ์ค ๋ชจ๋ธ์ ์์๋ก ์กฐ์ ํด๋ณผ ์ ์์ผ๋ฉฐ,
๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ํตํด ์์๋ก ์์ ํ ๊ฐ์ ์ฝ๋์ ๋ฐ์๋์ง ์๋๋ค.
float
float์์ฑ์ ์นํ์ด์ง์ ๋ ์ด์์์ ๋์์ธํ ๋ ์ฌ์ฉ๋๋ ์์ฑ์ด๋ค.
ํํ์ด์ง์ ์ด๋ฏธ์ง ์ฌ์ง์ ์ถ๊ฐํ๋ค๋ฉด img๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
์ฌ์ฉํ ์ด๋ฏธ์ง๋ฅผ ์ด๋ฏธ์ง ์ฃผ์๋ฅผ ๋ณต์ฌํด์ฃผ๊ณ ,
<img src="๋ณต์ฌํ ์ด๋ฏธ์ง ์ฃผ์" />
์ด๋ ๊ฒ ์ฌ์ฉํ๋ฉด ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ ์ ์๋ค.
์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ฉด ์์ ๊ฐ์ ๋ชจ์ต์ด๋ค.
์ฌ๊ธฐ์ ๊ธ์๋ฅผ ์ด๋ฏธ์ง ์ ๊ณต๋ฐฑ ๋ถ๋ถ์ผ๋ก ๋งต๋ ค๋ฉด float๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
<style>
img{
border:1px solid red;
float:left;
}
</style>
์ด๋ ๊ฒ float๊ฐ์ผ๋ก left๋ฅผ ์ง์ ํด์ฃผ๋ฉด ์ฌ์ง ์ ๊ณต๋ฐฑ์ ๋งค์ธ ์ ์๋ค.
์ฌ๊ธฐ์ float๊ฐ์ผ๋ก right๋ฅผ ์ฃผ๊ฒ ๋๋ฉด ์ค๋ฅธ์ชฝ์ผ๋ก ์ฌ์ง์ด ๋ฌ๋ผ๋ถ๊ฒ ๋๋ค.
์ด๋ ๊ฒ ๋ ๊ฐ์ ์ฝํ ์ธ ๊ฐ ๋๋ํ ํ๋ฉด์ ๋ฐฐ์น๋๊ฒ ํ๋ ๊ธฐ๋ฅ์ float๊ฐ ํ๋ค.
CSS ์ค์ต
๊ทธ๋ผ HTML์์ ์งํํ๋ ํํ์ด์ง๋ฅผ ์ด์ด์ ์ ์ํด๋ณด์.
๋จผ์ JavaScript ๋ฐ์ ๋ฐ์ค์ด ์์ด์ผ ํ๋ค.
header {
border-bottom:1px solid gray;
padding:20px;
}์ด๋ ๊ฒ JavaScript๋ header๋ก ๋ฌถ์ฌ ์์ผ๋,
header์ ์์ฑ์ ์ฃผ๋ฉด ๋๋ค.
๋ํ ํ๋จ ๊ณต๋ฐฑ์ ์ํด padding๊ฐ์ผ๋ก 20px์ ์ถ๊ฐํ์๋ค.
๊ทธ๋ผ ์์ ๊ฐ์ด JavaScriptํ๋จ์ ๋ฐ์ค์ด ์ถ๊ฐ๋ ๊ฑธ ํ์ธํ ์ ์๋ค.
๋ํ 1,2,3 ๋งํฌ ๊ฑธ๋ ค์๋ ํ ์คํธ ๋ํ ์นดํ ๊ณ ๋ฆฌ์ด๊ธฐ ๋๋ฌธ์ ์ค๋ฅธ์ชฝ์ผ๋ก ๊ฐ๋ ๊ฒ ์ข๋ค.
๊ทธ๋ฌ๊ธฐ ์ํด์๋ float๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
๋ณธ๋ฌธ ์์ญ์ <article>๋ก ๊ฐ์ธ์ ธ ์๋ค.
๋ณธ๋ฌธ ์์ญ ๋ํ float๊ฐ์ผ๋ก left๋ฅผ ์ง์ ํด ์นดํ ๊ณ ๋ฆฌ ๋ผ์ธ๊ณผ ๊ฒน์น์ง ์๊ฒ ํด์ผ ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
header {
border-bottom:1px solid gray;
padding:20px;
}
nav {
border-right: 1px solid gray;
width:200px;
height:600px;
float:left;
}
nav ol {
list-style: none;
}
article {
float:left;
padding:20px;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript๋?</a></li>
<li><a href="http://localhost/page_vc.html">๋ณ์์ ์์</a></li>
<li><a href="http://localhost/page_op.html">์ฐ์ฐ์</a></li>
</ol>
</nav>
<article>
<h2>๋ณ์์ ์์</h2>
๋ณ์๋
<ul>
<li>๋ณํ๋ ๊ฐ</li>
<li>x=10์ผ ๋ ์ผ์ชฝํญ์ธ x๋ ์ค๋ฅธ์ชฝ ํญ์ธ 10์ ๋ฐ๋ผ ๋ค๋ฅธ ๊ฐ์ด ์ง์ ๋๋ค.</li>
</ul>
์์๋
<ul>
<li>๋ณํ์ง ์๋ ๊ฐ</li>
<li>x=10์ผ ๋ ์ค๋ฅธ์ชฝ ํญ์ธ 10์ด ์์๊ฐ ๋๋ค.</li>
</ul>
</article>
</html>
์ ์ฝ๋๋ฅผ ํ์ธํ๋ฉด ์ ์ฌ์ง๊ณผ ๊ฐ๋ค.
ํ์ง๋ง ๋ด๊ฐ ์์ ๊ฐ์ด css์ฝ๋๋ฅผ ์ถ๊ฐํด์ค ๊ฑด ๋ณ์์ ์์๋ฅผ ๋ค์ด์์ ๋์ด๋ค.
๋ค๋ฅธ ํ์ด์ง ๋ํ css๋ฅผ ์ถ๊ฐํด์ฃผ์ด์ผ ํ๋๋ฐ,
<style> ๋ถ๋ถ๋ง ๋ณต์ฌํด์ ๋ค๋ฅธ ๋งํฌ์๋ ๋ถ์ฌ ๋ฃ์ผ๋ฉด ๋๋ค.
ํ์ง๋ง, ๋ง์ฝ ํ์ด์ง๊ฐ 100๊ฐ 1000๊ฐ์ด๋ฉด ํ๋ํ๋ ๋ณต์ฌ ๋ถ์ฌ ๋ฃ๋ ๊ณผ์ ๋ ํ๋ค๋ค.
๊ทธ๋ด ๋๋, CSS๋ถ๋ถ๋ง ๋ฐ๋ก ๋ถ๋ฆฌ๋ฅผ ํด๋์ผ๋ฉด ๋๋ค.
ํ์ฅ์๋ฅผ. css๋ฅผ ํตํด cssํ์ผ์ ์์ฑํด์ค๋ค.
<style> ์ํธ๋ style.css ํ์ผ์ ๋ณต์ฌ ๋ถ์ฌ ๋ฃ๊ธฐ๋ฅผ ํด์ค๋ค.
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">๊ทธ๋ฆฌ๊ณ ์ด๋ ๊ฒ cssํ์ผ ๊ฒฝ๋ก๋ฅผ link๋ฅผ ํตํด ๊ธฐ์ฌํด์ฃผ๋ฉด ๋๋ค.
์ด๋ ๊ฒ ํด์ฃผ๊ฒ ๋๋ค๋ฉด,
๊ธฐ์กด์ h1ํ๊ทธ์ ์์์ ๋ณ๊ฒฝํ๋ ค๋ฉด,
๋ชจ๋ html ํ์ผ์ style์ ์ถ๊ฐํด์ฃผ์ด์ผ ํ๋ค.
ํ์ง๋ง, ์ด๋ ๊ฒ cssํ์ผ์ ๋ ๋ฆฝ์ ์ผ๋ก ์์ฑํ๋ฉด,
cssํ์ผ๋ง ์์ ํด๋ ํด๋นํ๋ ๋ชจ๋ html ํ์ผ์ด ๋ณ๊ฒฝ๋๋ค.
class
๋ง์ฝ, ๋ค๋ฅธ ๊ทธ๋ฃน์ ์๋ ํ ์คํธ n๊ฐ๋ฅผ ๋ฐ์ค์ ๊ทธ์ด์ผ ํ๋ค๋ฉด
class๋ฅผ ํ์ฉํ๋ฉด ๋๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
li {
color:blue;
}
ul li {
font-size:40px;
}
.em {
text-decoration:underline;
}
</style>
</head>
<body>
<ol>
<li class="em">html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>๊ฐ</li>
<li class="em">์</li>
<li>๋ณ</li>
<li>์ </li>
</ul>
</body>
</html>์ด๋ ๊ฒ olํ๊ทธ์ ulํ๊ทธ ๋ ๊ฐ์ง๊ฐ ์๊ณ ,
ol๊ณผ ul์ ํ ์คํธ์ค ํ๋์ฉ ๋ฐ์ค์ ๊ทธ์ด์ผ ํ๋ค๋ฉด,
๋ฐ์ค์ ๊ทธ์ด์ผ ํ๋ ํ ์คํธ๋ค๋ผ๋ฆฌ ๊ทธ๋ฃนํ์ ํด์ฃผ๋ฉด ๋๋ค.
๊ฐ์ class์ ํฌํจ์ํค๊ณ , class์ css์์ฑ์ ์ถ๊ฐํ๋ ค๋ฉด,
์ (.)์ ์ฌ์ฉํ๋ค.
. ๊ทธ๋ฃน๋ช {} ์ฌ๊ธฐ ๋ธ๋ก ์์ ์ถ๊ฐํ ์์ฑ ๊ฐ์ ์ ๋ ฅํด์ฃผ๋ฉด ๋๋ค.
์ด๋ ๊ฒ html๊ณผ ์์๋ง ๋ฐ์ค์ด ์ถ๊ฐ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
๋ํ, class๋ ์ด๋ค ํ๊ทธ ๋ ๊ฐ์ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅํ๋ค.
๊ฐ์ ํ๊ทธ๊ฐ ์๋๋๋ผ๋ ์๊ด์๋ค.
์ถ์ฒ: [์ํ์ฝ๋ฉ]์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ
'๐ Web > ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [MySQL ์ด๋ก ] (0) | 2022.09.20 |
|---|---|
| ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [PHP ์ค์ต] (0) | 2022.09.18 |
| ์น ์ ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [JS ์ค์ต] (0) | 2022.09.18 |
| ์น ์ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [JS,PHP ์ด๋ก ] (2) | 2022.09.16 |
| ์น ์ํ๋ฆฌ์ผ์ด์ ๋ง๋ค๊ธฐ [HTML] (0) | 2022.09.14 |
