<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin : 20px;
padding : 50px;
border : 50px solid red;
width : 200px;
font-family:'Times New Roman', Times, serif
}
.green {
border : 50px solid green;
}
.blue {
border : 50px solid blue;
}
</style>
</head>
<body>
<div>
<div class="box">Box 1</div>
<div class="box green">Box 2</div>
<div class="box blue">Box 3</div>
</div>
</body>
</html>
์ด ๋ ์ฌ๊ธฐ์ box 2์๊ฒ display : none, visibility : hidden์ ๊ฐ๊ฐ ์ ์ฉํด๋ณด๊ณ ๋ฌด์จ ์ฐจ์ด์ ์ด ์๋๋๊ณ ํ์ จ๋ค.
๋ฑ๋ด๋ ๋์ถฉ ๊ฐ์ด ์ค์ง๋ง...
display : none์ ๊ทธ๋ฅ ์ ์์ฒด๋ฅผ ๋ฐฐ์นํ์ง ์๊ฒ ๋ค์ฌ์ Box3์ด Box2์ ๋น์๋ฆฌ๋ฅผ ์ฑ์ธ ๊ฒ์ด๊ณ ,
visibility : hidden์ ๋ณด์ฌ์ง๋ ๊ฒ์ ์จ๊ธฐ๋ ๊ฒ์ผ๋ก Box2๊ฐ ์ค์ ๋ฐฐ์น๋ ๋์ด ์์ง๋ง ์ฐ๋ฆฌ ๋์๋ ์๋ณด์ผ ๊ฒ์ด๋ค.
.green {
display : none;
visibility : hidden;
border : 50px solid green;
}
์ค์ ๋ก ์ฐจ์ด๋ฅผ ํ์ธํด ๋ณด๊ธฐ ์ํด ์ผ๋จ ์ฝ๋์๋ ๋๋ค ์์ฑํด๋๊ณ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด์ฉํด ๋น๊ตํด๋ณด๋๋ก ํ์.
๊ทธ๋ฆฌ๊ณ ์๊น์ ๋ฐ๊ฟ๋ณด๊ธฐ๋ ์์๋๋ฐ ๊ทธ๋ฅ blue๋ green์ ์ปฌ๋ฌ์ฝ๋๋ก ๋ฐ๊พธ๋ฉด ๋๋ ๊ฒ์ด๋ฏ๋ก ์๋ต.
๋๋ฒ์งธ ์ฐ์ตํ๊ธฐ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
font-family:'Times New Roman', Times, serif;
}
html {
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
}
body {
padding : 0 10%;
}
h1 {
color : #9b59b6;
}
h1::before {
content : "Topic:"
}
h1:first-child{
text-align: center;
}
p {
font-size : 16px;
font-family : Verdana;
font-style : italic;
}
/* ์ฒซ ๊ธ์ ์ ํ์ ::first-letter, ์ฒซ ์ค ์ ํ์ ::first-line */
p::first-letter {
font-size : 200%;
color : #2980b9;
}
.sub-header {
color : #2980b9;
}
</style>
</head>
<body>
<div class="challenge2">
<h1>HTML Tutorial</h1>
<p class="sub-header">HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! </p>
<p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. ... HTML elements are the building blocks of HTML pages. </p>
<h1>CSS Tutorial</h1>
<p class="sub-header">CSS is the language we use to style an HTML document.CSS describes how HTML elements should be displayed.This tutorial will teach you CSS from basic to advanced.</p>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. </p>
</div>
</body>
</html>
first-child๋ before์ ๊ทธ๋๋ ํ์ฅ์ค์ต ๋ ๋ง์ด ์ด์ฉํ์ด์ ์์ง๋ ๊ธฐ์ต์ ์ข ๋จ๋๋ฐ...
<p>ํ๊ทธ์ ์ฒซ๋ฒ์งธ ๊ธ์๋ ๊ทธ๋ฅ ๋ฌดํฑ๋๋ก p:first-child ์ด๋ฌ๋ค๊ฐ ํ๋๋ ์ ์ฉ์ด ์๋ผ์ ์ด๊ฒ ์๋๋ค ์ถ์ด์ ๊ฒ์ํด๋ณด๋
::first-letter๋ฅผ ์จ์ผํ๋ค๊ณ ํ๋ค. ์ฒซ ์ค์ ::first-line
๊ทธ๋ฆฌ๊ณ
- ๋ณด๋์ค๐ ๋
ธํธ์คํ์ผ์ ๋ท ๋ฐฐ๊ฒฝ ์ฃผ๊ธฐ
์ฐธ๊ณ : http://projects.verou.me/css3patterns/
CSS3 Patterns Gallery
CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for ex
projects.verou.me
์ด๋ฐ๊ฒ ์์๋๋ฐ ๋ท๋ฐฐ๊ฒฝ์ ์ ๋ฐ ๋ ธํธํจ๊ณผ๋ฅผ ์ฃผ๋ css๋ ๋ณต์ฌํด์ฌ ์ ์๊ณ ์ง์ง ์ ๊ธฐํ๋ค... ใ
