[23]CSS

작성일 | In

CSS

  • CSS (Cascading Style Sheets) 기본문법
    • CSS3 : 모바일 전용
    • 웹문서의 표현, 서식, 일관성 유지
    • 대소문자 반드시 구분한다
    • 종결문자 ;
    • 주석 /**/
    • 스타일 적용하는 방식
      1. Inline style : style=”” , 일시적으로 쓰임
      2. Internal style sheet : <style></style>
      3. External style sheet : .css
    • CSS Syntax and Selectors (선택자)
      • 선택자{Property:Value;Property:Value;~}
      • .선택자이름 -> 적용할 때 class=”선택자이름”
      • #아이디이름 -> 문서에서 id=”아이디이름”
      • 태그 -> div,body,h1,p ~
1) Inline style

만약 3개를 같이 쓸 경우 1번 인라인이 우선순위가 제일 높음. (지역적인게 제일 높음)

1
2
3
4
5
6
<div style="background-color:red;
            width: 200px;
            height: 150px;
 ">

 </div>
2) Interbak style sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>스타일태그</title>

	<style>

		.intro{background-color: #CC89CE;}
		#firstname{background-color: #8ACB7C;width: 300px;height:300px;}
		h1{font-size: 16px;background-color: #727AD2;color: #53080E;text-align: center;}
		input{border: 1px solid #000000;
			border-radius: 50%;
		}
	</style>

</head>
<body class=intro>

	<h1>이것은 스타일태그 테스트</h1>
	<div id="firstname"></div>
	<h1>1번</h1>
	<h1>2번</h1>
	<h1>3번</h1>

	<input type="text">

</body>
</html>
3) External style sheet(.css파일)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css파일</title>
	<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
	
</head>
<body>

	<table>
		<tr>
			<td>가</td>
			<td>나</td>
		</tr>
	</table>
	<hr>

	<img src="../images/monkey.png">
	<hr>

	<input type="text" class="line">
	<hr>

	<div id="myLayer"></div>

</body>
</html>

다양한 Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
font-family: "궁서체", "Times New Roman", Times, serif; > 글씨체
font-size : 글씨 크기
font-weight : bold; > 글씨 두께
font-style : 글씨 스타일
letter-spacing : 글자 간격
text-align : 문단 정렬
width : 가로 (반응형은 단위를 px 대신 %로 한다)
height : 세로
margin : 0 auto; > 수평을 기준으로 가운데 정렬
border: 5px solid gray; > 선
background-color: red; > 배경색
display: none; > 숨기기
list-style: none; > 목록의 리스트 스타일 숨기기
list-style-type: circle; > 리스트 스타일
text-decoration > 선으로 텍스트를 꾸미는 속성

Position

  • 레이어
  • position: ;
    • static > 기본값
    • absolute > 절대적 위치
    • relative > 상대적위치
    • fixed > 고정
    • sticky > 스크롤해도 엘리먼트가 움직이지 않음.
  • z-index: ;
    • 레이어 순서
    • 큰 수가 위로!

가변폭 2단

  • 반응형 홈페이지
  • 가로의 길이 단위를 px 이 아니라 %로 준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>26_가변폭2단.html</title>
	<style>
		body{margin: 0 auto;}
		/* UI Object */
		#wrap{width:100%}
		#header{width:100%}
		#container{_display:inline-block;width:100%}
		#container:after{display:block;clear:both;content:''}
		.snb{float:left;width:180px;margin-right:-200px}
		#content{margin-left:200px}
		#footer{width:100%}
		/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
		div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
		#wrap{width:auto;margin:0;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
		#header{margin-top:10px}
		#header,#container{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
		.snb,#content{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
		#content{height:200px}
		#footer{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
		/* //UI Object */
	</style>
</head>
<body>
	<!--ui object -->
	<div id="wrap">
	<p>#wrap</p>

	<!--header -->
	<div id="header">
	<p>#header</p>
	</div>
	<!--//header -->

	<!--container -->
	<div id="container">
	<p>#container</p>

	<!--snb -->
	<div class="snb">
	<p>.snb</p>
	</div>
	<!--//snb -->

	<!--content -->
	<div id="content">
	<p>#content</p>
	</div>

	<!--//content -->
	</div>
	<!--//container -->

	<!--footer -->
	<div id="footer">
	<p>#footer</p>
	</div>
	<!--//footer -->

	</div>
	<!--//ui object -->
	
</body>
</html>

01

HTML5구조

  • header , nav , section > article , footer 의 구조
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>27_HTML5구조.html</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<style>
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}
header, footer {
  padding: 10px;
  color: white;
  background-color: black;
}
section {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}
article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}
nav ul {
  padding: 0;
}
nav ul li {
  display: inline;
  margin: 5px;
}
</style>
</head>
<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

<section>
  <h2>News Section</h2>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </article>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </article>
</section>

<footer>
  <p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

</body>
</html>

01

CSS 아이콘

  • 주로 Font Awesome 을 사용한다
  • 외부 링크를 붙여준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
  <title>29_CSS아이콘.html</title>
 </head>
 <body>
  <h1>fas fa-angle-double-down</h1>

  <i class='fas fa-angle-double-down'></i>
  <i class='fas fa-angle-double-down' style='font-size:24px'></i>
  <i class='fas fa-angle-double-down' style='font-size:36px'></i>
  <i class='fas fa-angle-double-down' style='font-size:48px;color:red'></i>
  <br>

  <p>Used on a button:</p>
  <button style='font-size:24px'>Button <i class='fas fa-angle-double-down'></i></button>

  <p>Unicode:</p>
  <i style='font-size:24px' class='fas'>&#xf103;</i>
 </body>
</html>

01

기울기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
    h1{text-align:center;}
    h1>span{width:80px;height:80px;    
            font-size:60px;
            border-radius:20px;
            box-shadow:1px 1px 2px; black;
            margin:10px;
            /*옆으로 붙는 거 허용*/
            display:inline-block;
           }
    h1>span:nth-child(even) {
        transform: skew(20deg);
        background-color: #D89ADD;
        border:1px solid #D89ADD;
    }      
    h1>span:nth-child(odd) {
        transform: skew(-20deg);
        background-color: #6777B6;
        border:1px solid #6777B6;
    }      
</style>

<body>
   <h1>
	  <span>C</span><span>S</span><span>S</span><span>3</span>
   </h1>
 </body>

01

rotate

  • 마우스 오버 시 움직이게 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>31_rotate.html</title>

	<style>
		#menu{
			margin: 0 auto;
			position: relative;
			width: 200px;
			height: 200px;
			background-color: #C7C7C7;
			border-radius: 20px;
			cursor: pointer;
		}
		#menu:hover{
			background-color: #E9AA42;
		}
		#menu>strong{
			position: absolute;
			font-size: 20px;
			font-weight: bold;
			bottom: 20px;
			left: 55px;
		}
		#menu>.gear{
			position: absolute;
			width: 40px;
			height: 40px;
			background-image: url(../images/gear-grey.png);
			background-size: cover;
		}
		/*이미지배치*/
		#menu>.gear:first-child{
			top:50px;
			left: 62px;
		}
		#menu>.gear:nth-child(2){
			top:80px;
			left: 84px;
			transform: rotate(16deg);
		}
		#menu:hover>.gear{
			background-image: url("../images/gear.png");
			transition: .4s linear;/*linear | ease/*/
		}
		
		#menu:hover>.gear:first-child{
			transform: rotate(-180deg);
		}
		#menu:hover>.gear:nth-child(2){
			transform: rotate(196deg);
		}
	</style>

</head>
<body>

	<div id="menu">
		<div class="gear"></div>
		<div class="gear"></div>
		<strong>SETTINGS</strong>
	</div>
	
</body>
</html>

플래시메뉴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>32_플래시메뉴.html</title>

	<style>
		.hide{display: none;}
		#navi{
			margin: 0 auto;
			width: 200px;
			background-color: #BFBDBD;
		}
		#navi>ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#navi>ul>li>a{
			text-decoration: none;
			text-indent: 30px;
			font-weight: bold;
			color: #000000;
			width: 200px;
			height: 64px;
			display: block;
			background-image: url("../images/icons.png");
			background-repeat: no-repeat;
			background-position:right 0;		
		}
		#navi>ul>li:nth-child(2)>a{background-position:right -64px;}
		#navi>ul>li:nth-child(3)>a{background-position:right -463px;}
		#navi>ul>li:nth-child(4)>a{background-position:right -530px;}
		#navi>ul>li>a:hover{
			width: 250px;
			border-radius:0 40px 40px 0;
			transition: width .5s;
			font-size: 18px;
			opacity: 0.8;
			text-shadow: 1px 1px 1px  #ffffff;
			box-shadow: 2px 2px 2px  #000000;
		}
		#navi>ul>li:nth-child(1)>a:hover{background-color: #D23B3B;}
		#navi>ul>li:nth-child(2)>a:hover{background-color: #414DD4;}
		#navi>ul>li:nth-child(3)>a:hover{background-color: #6CC154;}
		#navi>ul>li:nth-child(4)>a:hover{background-color: #FFDF44;}
	</style>

</head>
<body>
	<h1 class="hide">플래시메뉴</h1>
	<div id="navi">
		<h2 class="hide">주요메뉴</h2>
		<ul>
			<li><a href="#">flickr</a></li>
			<li><a href="#">twitter</a></li>
			<li><a href="#">newsvine</a></li>
			<li><a href="#">last.fm</a></li>
		</ul>
	</div>
	
</body>
</html>

애니메이션

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>33_애니메이션.html</title>
  
  <style> 
    div {
      width: 100px;
      height: 150px;
      font-weight: bold;
      position: relative;
      -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
      animation: mymove 5s infinite;
    }
    /* Safari 4.0 - 8.0 */
    #div1 {-webkit-animation-timing-function: linear;}
    #div2 {-webkit-animation-timing-function: ease;}
    #div3 {-webkit-animation-timing-function: ease-in;}
    #div4 {-webkit-animation-timing-function: ease-out;}
    #div5 {-webkit-animation-timing-function: ease-in-out;}
    /* Standard syntax */
    #div1 {animation-timing-function: linear;}
    #div2 {animation-timing-function: ease;}
    #div3 {animation-timing-function: ease-in;}
    #div4 {animation-timing-function: ease-out;}
    #div5 {animation-timing-function: ease-in-out;}
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
    }
    /* Standard syntax */
    @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
    }
  </style>

</head>
<body>

  <div id="div1"><img src="../images/angel.png"></div>
  <div id="div2"><img src="../images/crying.png"></div>
  <div id="div3"><img src="../images/face-smile.png"></div>
  <div id="div4"><img src="../images/face-glasses.png"></div>
  <div id="div5"><img src="../images/face-kiss.png"></div>
  
</body>
</html>