๋ฉ์ฌ ํ๋ก ํธ์๋ ์ค์ฟจ์์ ์ฝ๋๋ผ์ด์ธ ๊ณ์ ์ ๋ฐ๊ธ๋ฐ์์ ์งํํ๋ค!!
์ฌ์ค ํฌ๊ฒ ๊ณ ์ฐฐํด ๋ณธ ์ ์ด ์๋ค. ๋น์ฐํ... ์น์ ๋ง๋๋ ๊ทผ๊ฐ์ธ๋ฐ๋ค๊ฐ ์์ฆ์ ๋ฐ์ํ์ผ๋ก ์์ฒญ๋ ํ์ด์ง๋ฅผ ์ง๋ ๊ธฐ์ ๋ค์ด ๋ง์ง๋ง ์ธ๊ตญ์์๋ ์์ง๋ ์ถฉ๋ถํ ์ปดํจํ ํ์๋ฅผ ๊ฐ์ง ๊ธฐ๊ธฐ๋ฅผ ๊ฐ์ง์ง ์์ ์ฌ๋์ ์ํด html, css ๋ง์ผ๋ก ์น์ฌ์ดํธ๋ฅผ ๋ง๋ ๋ค๋ ์ด์ผ๊ธฐ๋ ๋ดค์๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋ฐ๋ฐ ๊ฐ์์์๋
html, css ๋ ๊ฒฐ๊ตญ ๋ฌธ์์ธ๋ฐ ์ด ๋ฌธ์๋ฅผ ์ ์๋๋ก ํฌํ ์ต์ผ๋ก ์ ๋ง๋ค๊ณ html, css๋ฅผ ๋ฐฐ์์ ๋ง๋๋๋ฉด! ๋ค๋ฅธ ์ธ์ด๋ฅผ ๋ถ์ด๊ธฐ ์ฝ๊ธฐ ๋๋ฌธ์ด๋ค!!!!
๋ผ๊ณ ์ธ๊ธํ๋๋ฐ, ๊ทธ๋ฅ ์ ํ๋ง๋๋ง์ผ๋ก ๋ฉ๋์ด ๊ฐ๋งํผ ์ธ์์ ์ด์๋ค.
๊ฐ์ ํ๋ซํผ์ด ๋๋ฌด ์ ๊ธฐํ๋ค..๋น๋ํ ์ด๋ผ๊ณ VSCode UI๋ก ๋์ด์๋๋ฐ ์๊ฐ ์๋ฃ๊ฐ ํ์ํ ๋๋ ๋์์์ผ๋ก ๋์์ ๊ฐ์๋ฅผ ํ์๊ณ ์ฝ๋๊ฐ ํ์ํ ๋ ์์ฒ๋ผ ์ฝ๋๋ฅผ ํ์ดํํ๋ฉด์ ๊ฐ์๋ฅผ ํ๊ณ ์ค๋ฅธ์ชฝ ํ๋จ ๋ฏธ๋ ๋ธ๋ผ์ฐ์ ๋ฒํผ์ผ๋ก html ํ์ผ ํ์ธ์ด ๋ฐ๋ก๋ฐ๋ก ๊ฐ๋ฅํ๊ณ ... ๊ทธ๋ฆฌ๊ณ ์ค์ตํด๋ณด์ธ์! ํ๋ฉด ๋ํ๋์ด ์ด ์ฝ๋ ์น ๋ ๋ผ๊ฐ๊ณ ๋ด๊ฐ ์๋ก ์จ๋ณผ ์ ์๋ค... ์ด ๋ฐฉ์ ์ต์ด๋ผ๊ณ ํ์๋๋ฐ... ์งฑ์ ๊ธฐํด!!!!! ์ด๋ฐ๊ฑธ ๋ง๋๋ ์ฌ๋์ด ๋์ ๋ง์ด ๋ฒ๋๊ฑฐ๊ตฌ๋.. ๋ผ๋ ๊นจ๋ฌ์์ ์ป์๋ค.
HTML์ HyperText Markup Language ๋ก ๋ง ๊ทธ๋๋ก HyperText๋ฅผ Markupํ๋ Language๋ก, ์นํ์ด์ง์ ๋ผ๋๋ฅผ ๋ด๋นํ๋ค.
<!-- HTML ๊ธฐ๋ณธ ํํ -->
<tag>๋ฃ์ ๋ด์ฉ</tag>
<p>๋๋ถ๋ถ์ ๊ธ์จ๋ฅผ ๋ฃ์ ๋๋ p ํ๊ทธ ์์</p>
<h1>Heading1</h1>
์ด๋ ๊ฒ ์ฌ๋ฌ ์ข
๋ฅ์ tag๋ก ๋ฃ๊ณ ์ถ์ ๋ด์ฉ์ ๊ฐ์ธ๋ ๊ฒ์ด ๊ธฐ๋ณธ ํํ์ด๋ค. 150๊ฐ ์ ๋์ ํ๊ทธ๊ฐ ์๋ค๊ณ ํ๋๋ฐ, ์์ฃผ ์ฐ๋ 2~30 ์ฌ๊ฐ์ง๋ฅผ ์๊ณ ๊ฐ๋
์ฑ ์ข๊ฒ ์ฐ๋ ๊ฒ์ด ์ค์ํ๋ค.
<!DOCTYPE html>
<html> <!-- ์ต์ ๋ธ๋ผ์ฐ์ ์์๋ html tag ์์ด๋ ์๋ํ๋ค. -->
<head> <!-- ํ๋ฉด์ ๋ค์ด๊ฐ๋๊ฒ ๋ชฉ์ ์ด ์๋ ๋ถ๊ฐ์ ๋ณด๋ฅผ ๋ด๋๋ค. -->
<meta charset="UTF-8"> <!-- ํ๊ธ๋ก ์ธ์ฝ๋ฉ -->
<title>์์๋ฃ์ ์ด๋ ฅ์</title> <!-- ํญ์ฐฝ์ ๋จ๋ ์ ๋ชฉ -->
</head>
<body> <!-- ํ๋ฉด์ ์ ๋ณด์ด๋๊ฒ ๋ชฉ์ ์ธ content๋ฅผ ๋ด๋๋ค. -->
<h1>์์๋ฃ</h1>
<p>HTML/CSS</p>
</body>
</html>
๊ธฐ๋ณธ์ ์ผ๋ก ์์ ๋ผ๋๋ ๊ฐ์ง๊ณ ๊ฐ๋ค.
์์ html ํ์ผ์ ์ด์ด๋ณธ ๋ชจ์ต!
CSS(Cascading Style Sheet) ๋ ๋ง ๊ทธ๋๋ก HTML์ ์คํ์ผ์ ์ ํ์ฃผ๋ ์ธ์ด์ด๋ค!
์์ ์ฝ๋๋ฅผ ๋ค์ ๊ฐ์ ธ์์
<!DOCTYPE html>
<html> <!-- ์ต์ ๋ธ๋ผ์ฐ์ ์์๋ html tag ์์ด๋ ์๋ํ๋ค. -->
<head> <!-- ํ๋ฉด์ ๋ค์ด๊ฐ๋๊ฒ ๋ชฉ์ ์ด ์๋ ๋ถ๊ฐ์ ๋ณด๋ฅผ ๋ด๋๋ค. -->
<meta charset="UTF-8"> <!-- ํ๊ธ๋ก ์ธ์ฝ๋ฉ -->
<title>์์๋ฃ์ ์ด๋ ฅ์</title> <!-- ํญ์ฐฝ์ ๋จ๋ ์ ๋ชฉ -->
</head>
<body> <!-- ํ๋ฉด์ ์ ๋ณด์ด๋๊ฒ ๋ชฉ์ ์ธ content๋ฅผ ๋ด๋๋ค. -->
<h1>์์๋ฃ</h1>
<p>HTML/CSS</p>
<footer>Copyright Suryo Lim.<footer> <!-- ํ๋ฉด ๋ฐ๋ฅ์ ์๋ด๋ฌธ์ ์ธ ๋ ์ฌ์ฉ -->
<footer>CSS</footer>
</body>
</html>
์ด๋ ๊ฒ footer๋ฅผ ๋ฌ์์ฃผ๊ณ ์ถ๋ค๋ฉด?
์ ๋ง ์ํ๊น๊ฒ๋ footer๋ p๋ ๊ธ์์ ์ฐจ์ด๊ฐ ์๋ค. ์ด ๋ ์คํ์ผ์ ์ฐจ์ด๋ฅผ ์ฃผ๊ธฐ ์ํด CSS๋ฅผ ์ฌ์ฉํ๋ค.
<head>
<meta charset="UTF-8">
<title>์์๋ฃ์ ์ด๋ ฅ์</title>
<link rel="stylesheet" href="style.css"> <!--style.css ๋ก link๋ฅผ ๊ฑธ์ด์ค๋ค! head ์์์์ ์์น๋ ์๊ด ์์.-->
</head>
index.html ๊ณผ ๊ฐ์ ํด๋๋ด์ css ํ์ผ์ ๋ง๋ค๊ณ
footer { /* ์คํ์ผ์ ๋ฐ๊พธ๊ณ ์ถ์ ๋์ */
/* ์คํ์ผ */
text-align: center;
background-color: #2B2B2B;
color: white; /* ์ปฌ๋ฌ์ฝ๋, ์์ ์ด๋ฆ ์ฌ์ฉ ๊ฐ๋ฅ*/
}
์ ์ฒ๋ผ ๋ฐ๊พธ๊ณ ์ถ์ ์คํ์ผ์ ๋ช ๋ช ํด์ฃผ๋ฉด ์คํ์ผ์ด ์ ์ฉ๋๋ค!!
์์ ์ฌ์ง์ ๋ณด๋ฉด 2๊ฐ์ footer ํ๊ทธ์ ๊ฐ์ ์คํ์ผ์ด ์ ์ฉ๋์๋ค. ๋์ด ๋ค๋ฅธ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ถ๋ค๋ฉด...? ์ด๋ป๊ฒ ํ๋๊ฑด๋ฐ ๊ทธ๊ฑฐ...
class.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์์๋ฃ์ ์ด๋ ฅ์</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>์์๋ฃ</h1>
<p class="big-font">Front-end</p> <!-- class๋ฅผ ์ง์ ํ๋ค -->
<p class="small-font">HTML</p>
<p class="small-font">CSS</p>
<footer>Copyright Suryo Lim.</footer>
</body>
</html>
์์ฒ๋ผ ํ๊ทธ ์์ class="์ด๋ฆ" ์ผ๋ก ์ง์ ํ๋ค.
p {
font-size: 30px;
}
.big-font { /* class๋ก ์ง์ ๋ ๋
์์ ์์ . */
font-size: 40px;
}
.small-font {
font-size: 15px;
}
๊ทธ๋ฆฌ๊ณ .์ด๋ฆ ์ ์ฌ์ฉํด์ CSS๋ก ์คํ์ผ์ ์ง์ ํด์ค ์ ์๋ค.
์์ฒ๋ผ content ์์ญ์์ ๋์ด๋๋๊ฒ padding, ํ ๋๋ฆฌ๋ border ํ ๋๋ฆฌ ๋ฐ๊นฅ์ ์์ญ์ด margin์ด๋ค.
์ฌ๊ธฐ๋ถํฐ๋ ์์ ์ฝ๋๋ฅผ ๊ทธ๋๋ก ๊ฐ์ง๊ณ ๊ฐ๋ฏ๋ก ํด๋น ์์ญ์ ๋ํ ์ฝ๋๋ง ์ฒจ๋ถํ๋ค.
<!-- head -->
<div class="main-box">
<h1>์์๋ฃ</h1>
<p class="name-text">HTML/CSS ๊ฐ๋ฐ์</p>
</div>
body, h1, h2 {
margin: 0px;
padding: 0px;
}
body {
min-width: fit-content;
}
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic;
}
.name-text {
font-size: 17px;
color: #7c7c7c;
font-weight: bold;
}
.main-box {
border: 1px solid black; /* ์ ๋๊ป, ์คํ์ผ, ์์ */
width: 610px;
text-align: right;
padding: 30px;
/* text๊ฐ ์๋ ๋ฐ์ค ์ ์ฒด๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌ */
margin-left: auto;
margin-right: auto;
margin: 30px;
/* ๊ทธ๋ฆผ์ : ๊ฐ๋ก์ถ(-์ข +์ฐ), ์ธ๋ก์ถ(-์ +ํ), blur, spread, color */
box-shadow: 0 1px 20px 0 rgba(0,0,0,1);
}
ํฐํธ๋ ๊ตฌ๊ธ ํฐํธ์์ ๊ณจ๋ผ์์ ์ฌ์ฉํ๋ฉด ๋๋ค. import ๋ฌธ ๋ณต๋ถํ๊ณ * ๋ก ๋ฌธ์ ์ ์ฒด์ ์ ์ฉํ๋ค!
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
* { /* *: ๋ฌธ์ ์ ์ฒด ์ ์ฉ */
font-family: "Montserrat";
}
<!-- About Me -->
<section>
<h2>ABOUT ME</h2>
<p class="about-me-text">larem ipsum: ์๋ฏธ ์๋ ๋ฌธ์ฅ์ ์จ๋๊ณ ์ ๋์ค๋์ง ๋ณธ ๋ด์ ๋์ค์ ๋ฐ๊พธ๊ธฐ..</p>
</section>
section {
margin-bottom: 24px;
}
h2 {
font-size: 20px;
font-weight: bold;
color: #282828;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 16px;
padding-bottom: 5px;
}
.about-me-text {
font-size: 10px;
line-height: 16px; /* ์ค๊ฐ๊ฒฉ */
}
<!-- Explain -->
<section>
<h2>EXPLAIN</h2>
<div class="float-wrap">
<p class="title-text">NAVER</p>
<p class="year-text">2020~</p>
</div>
<p class="desc-text">๋ค์ด๋ฒ ๊ฐ๊ณ ์ถ๋ค.</p>
<p class="desc-subtext">desc-subtext</p>
</section>
.float-wrap {
overflow: hidden; /* float ์ฐ๋ฉด ๋ญ๊ฐ๋ ๊ฒน์น ์ ์์ด์ ํ
๋๋ฆฌ ๋ง๋ค์ด์ค */
}
.title-text {
font-size: 11px;
font-weight: bold;
float: left;
}
.year-text {
font-size: 11px;
font-weight: bold;
float: right; /* ์ ์์ ํ๋๋ ์ผ์ชฝ์ ๋ ฌ ํ๋๋ ์ค๋ฅธ์ชฝ์ ๋ ฌ๋ก ๋ฃ๊ธฐ ์ํด ์ฌ์ฉ */
}
.desc-text {
font-size: 11px;
font-weight: light;
}
.desc-subtext {
font-size: 10px;
padding-left: 10px;
}
<div class="sns-wrap">
<a href="http://facebook.com"><img class ="sns-img" src="images/facebook.png"> </a> <!-- 2-12. ์ด๋ฏธ์ง ๋ฃ๊ธฐ, a ํ๊ทธ๋ก ๋งํฌ ๊ฑธ๊ธฐ. -->
<a href="http://twitter.com"><img class ="sns-img" src="images/twitter.png"></a>
<a href="http://linked-in.com"><img class ="sns-img" src="images/linked-in.png"></a>
<a href="http://instagram.com"><img class ="sns-img" src="images/instagram.png"></a>
</div>
.sns-wrap {
text-align: right;
}
.sns-img {
width: 16px;
height: 16px;
}
๊ฐ์ ๋ค์ผ๋ฉด์ ๋ช ๊ฐ์ง ๊ถ๊ธํ๋ ์ ์ด ์๋๋ฐ, ์ค์ต ๋ค์ ํด๋ณด๊ณ ๊ฒ์ํด๋ณด๊ณ ํ๋ฉด์ ํด๊ฒฐํด์ ๊ณต์ ํ๋ ค๊ณ ํ๋ค!
์ฐฝ ํฌ๊ธฐ๋ฅผ ๋ฐ๊พธ๋๊ฑฐ์ ๋ฐ๋ผ box ํฌ๊ธฐ๋ ๊ฐ์ด ๋ฐ๋๋ค.
๋์ฒด๋ก ์ํ๋ค. CSS์์ ๋ณ์๋ช ์ case insensitive ํ๋ค.
์ฐธ๊ณ