VScode ์ ์ฉํ๊ฒ ์ฌ์ฉํ๊ธฐ
๐ฝ HTML / CSS ์ฝ๋ฉํ๋๋ฐ ์ ์ฉํ VSCode ํ์ฅํฉ
์ด๋ฒ ํฌ์คํ ์์๋ VSCode์์ HTML๊ณผ CSS๋ฅผ ์ฝ๋ฉํ๋๋ฐ ์์ด ํธ๋ฆฌํ๋ฉฐ ๊ฐ๋ ์ฑ์ด ์ข๊ฒ ์ฌ์ฉํ ์ ์๋ ํ์ฅํฉ์ ์ฌ๋ฌ๋ถ๋ค๊ป ์๊ฐํด ๋ณธ๋ค. ์๋ ์๊ฐํ๋ ์ต์คํ ์ ๋ค์ ํ์๊ฐ ์ง์ ์ค์นํด์ ์ฌ์ฉํด
inpa.tistory.com
์คํ์ผ ์ํธ
์ธ๋ผ์ธ ์คํ์ผ
๋ด๋ถ ์คํ์ผ ์ํธ
์ธ๋ถ ์คํ์ผ ์ํธ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- ์ธ๋ถ์คํ์ผ์ํธ ์ฐ๊ฒฐ -->
<link rel="stylesheet" href="external.css">
<style>
/* internal stylesheet */
h3{
color:blue;
border: 2px dotted red;
}
p{
font-size: 30px;
}
/* *์ ์ ์ฒด์ ํ */
*{
margin: 0;
}
#container{
width: 500px;
height: 500px;
border : 1px solid gray;
margin : 0 auto; /* ๋ธ๋ญ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ */
}
/* ์๋ก ๋ค๋ฅธ ํ์
์ ์ฌ๋ฌ ํ๊ทธ์ ๋ํ์ฌ ๊ฐ์ ๋์์ธ์ ํ๊ณ ์ ํ๋ค - class์ด์ฉ */
.my1{
color: green;
font-size: 40px;
text-align: center; /* text ์ค์์ ๋ ฌ */
}
h1{
text-align: center; /* text ์ค์์ ๋ ฌ */
}
</style>
</head>
<body>
<div id="container">
<h1 class="my1">CSS๋ฌธ๋ฒ ์ตํ๊ธฐ</h1>
<h2 style="color:red">CSS๋ฌธ๋ฒ ์ตํ๊ธฐ(inline stylesheet)</h2>
<h3>h3์
๋๋ค</h3>
<p class="my1">pํ๊ทธ์
๋๋ค</p>
<p>pํ๊ทธ์
๋๋ค</p>
</div>
</body>
</html>์ธ๋ถ์์ ์ ๊ทผ
@charset "UTF-8";
p{
border: 3px dotted green;
background-color: yellow;
}
์คํ์ผ ์ฐ์ ์์
๋จ์
| ์ข ๋ฅ | ์ค๋ช |
| em | ๋ถ๋ชจ ์์์์ ์ง์ ํ ๊ธ๊ผด์ ๋๋ฌธ์ M์ ๋๋น๋ฅผ ๊ธฐ์ค(1em)์ผ๋ก ํ ํ ๋น์จ๊ฐ์ ์ง์ |
| rem | ๋ฌธ์ ์์ ๋ถ๋ถ์์ ์ง์ ํ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค(1rem)์ผ๋ก ํ ํ ๋น์จ๊ฐ์ ์ง์ |
| ex | ํด๋น ๊ธ๊ผด์ ์๋ฌธ์ x์ ๋์ด๋ฅผ ๊ธฐ์ค(1ex)์ผ๋ก ํ ํ ๋น์จ๊ฐ์ ์ง์ |
| px | ๋ชจ๋ํฐ์ 1ํฝ์ ์ ๊ธฐ์ค(1px)์ผ๋ก ํ ํ ๋น์จ๊ฐ์ ์ง์ |
| pt | ํฌ์ธํธ๋ผ๊ณ ํ๋ฉฐ ์ผ๋ฐ ๋ฌธ์์์ ๋ง์ด ์ฌ์ฉ |
๋ฐ์ค๋ชจ๋ธ
↔๏ธ : width width์์ฑ์ block์์์๋ง ์ฌ์ฉ๊ฐ๋ฅ
โ๏ธ : height
<style>
div, a, p {
border: 2px solid #000;
margin-bottom: 20px;
}
/* width์์ฑ์ block์์์๋ง ์ฌ์ฉ๊ฐ๋ฅ */
.box1, .box3 {
width: 400px;
height: 100px;
}
.box2, .box4 {
width: 50%; /* ๋ถ๋ชจ์์์ 50% ๊ฐ๋ณ๋๋น*/
height: 100px; /* px์ ๊ณ ์ ํฌ๊ธฐ ๊ณ ์ ๋๋น*/
}
a{
display: block;
width: 500px;
}
p{
width: 50%;
}
</style>
๋ง์ง ์ค์ฒฉ
์์ฑ ์ ํ์
์กด์ฌ๊ฐ ์ ํ์
ํ์๊ฐ ์ผ์น ์ ํ์
๋ฐ์ํ