1.position
layer 층을 형성할 수 있음
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<style type="text/css">
div {width: 100px; height: 100px; border: 1px solid red;}
/*positon 위치값을 지정해줌*/
/*z-index 겹치는 층의 순서를 정함*/
#d1 {background-color: red; position: absolute; top:0px; left:0px; z-index: 3;}
#d2 {background-color: green; position: absolute; top:50px; left:50px; z-index: 2;}
#d3 {background-color: blue; position: absolute; top:100px; left:100px; z-index: 1;}
</style>
</head>
<body>
<div id="d1">Hello CSS1</div>
<div id="d2">Hello CSS1</div>
<div id="d3">Hello CSS1</div>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<style>
/*relative는 바로 위의 태그에 종속됨*/
div.relative {
position: relative;
top: 80px; /*바로 위에 태그에서 80px 떨어짐*/
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px; /*브라우저 상단에서 80px 떨어짐*/
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;</div>
<div class="absolute">This div element has position: absolute;</div>
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<style>
/*overflow 특정영역 안에 많은 내용을 담을 수 있음*/
div {
background-color: #eee;
width: 300px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
/*overflow: auto; 필요할 때만 스크롤 생김*/
/*overflow-x: scroll; x축에 스크롤 생김*/
}
</style>
</head>
<body>
<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):</p>
<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>
4
<!DOCTYPE html>
<html>
<body>
<!--cursor 마우스 모양 바꾸기-->
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>5. display
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<style type="text/css">
/*display 각 요소들을 어떻게 화면에 보일 것인지 설정*/
div {display: inline;} /*강제로 엔터키를 없앰*/
span {display: block;} /*강제로 엔터키를 생성*/
</style>
</head>
<body>
<!--block element-->
<div>Hello CSS</div>
<div>Hello CSS</div>
<div>Hello CSS</div>
<!--inline element-->
<span>Hello CSS</span>
<span>Hello CSS</span>
<span>Hello CSS</span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<style type="text/css">
div {width: 200px; height: 50px; border: 1px solid red;}
/*#d2 {display: none;} 화면에서 안보이게 설정*/
#d2 {visibility: hidden;} /*화면에서 안보이게 공간을 비워둠*/
</style>
</head>
<body>
<div>Hello CSS</div>
<div id="d2">Hello CSS</div>
<div>Hello CSS</div>
</body>
</html>
6. float
<!DOCTYPE html>
<html>
<head>
<style>
/*float 는 다른 요소들과 어울려 위치를 차지함*/
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left; /*float에 영향을 받지 않고 요소자신의 위치를 정함*/
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>
<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>
7.navigation bar
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="http://m.naver.com">Home</a></li>
<li><a href="http://m.naver.coms">News</a></li>
<li><a href="http://m.naver.com">Contact</a></li>
<li><a href="http://m.naver.com">About</a></li>
</ul>
</body>
</html>
8. rounded border
<!DOCTYPE html>
<html>
<head>
<style>
/*border끝을 둥근모양으로 만듦*/
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 100px;
height: 50px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 100px;
height: 50px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
9
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
/*배경 이미지 두개를 겹쳐서 넣을 수 있음*/
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
10. gredient
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
/*CSS3부터 그래디언트 색상을 지원함, 브라우저마다 코드 다름*/
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
11.shadow
<!DOCTYPE html>
<html>
<head>
<style>
/*그림자: 굵기, 각도, 흐림효과, 색깔*/
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>
</body>
</html>
12. box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
/*box-shadow 네모형태에 그림자를 줌*/
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
</style>
</head>
<body>
<h2>Cards</h2>
<p>The box-shadow property can be used to create paper-like cards:</p>
<div class="card">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2016</p>
</div>
</div>
</body>
</html>
13. word breaking
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
p.test2 {
width: 11em;
border: 1px solid #000000;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
<p class="test2"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
14.font
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<style type="text/css">
@font-face {
font-family: myFont;
src: url('Sansation_Light.woff')
}
#d2 {font-family: myFont; font-size:40px}
</style>
</head>
<body>
<div id="d1">한글이다. Hello CSS3</div>
<div id="d2">한글이다. Hello CSS3</div>
</body>
</html>
폰트 확인 --https://www.google.com/fonts
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<style type="text/css">
@font-face {
font-family: myFont;
src: url('Sansation_Light.woff')
}
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
#d1 {font-family: myFont; font-size:40px}
#d2 {font-family: myFont; font-size:40px}
#d3 {font-family: 'Nanum Brush Script'; font-size:40px}
</style>
</head>
<body>
<div id="d1">한글이다. Hello CSS3</div>
<div id="d2">한글이다. Hello CSS3</div>
<div id="d3">한글이다. Hello CSS3</div>
</body>
</html>
댓글 없음:
댓글 쓰기