selector의 종류
1) tag name = 태그이름
2) id 속성 = # unique한 값입니다.
3) class 속성 = . 동일값을 통해서 동일한 속성을 주고 싶을 때 입니다.
4) 속성을 선택자로 지정: 태그[속성="속성값"]{
}
5) 속성값에 어느게 포함되는 끝나는 시작하는 것....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Selector 지정하기</title>
<link rel="stylesheet" type = "text/css" href ="css/css04_selector.css">
</head>
<body>
<h2>Style Sheet Selector</h2>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer too</p>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer too</p>
<div id = "wrap">
<div class = "block">div Scope</div>
<span>div Scope</span>
<span>div Scope</span>
<div class = "block">div Scope</div>
</div>
</body>
</html>@charset "UTF-8";
*{
color: purple;
}
h2{
color: orange;
font-family: sans-serif;
font-size:25px;
}
#wrap {
background: magenta;
}
.block {
border: 2px solid black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[type ="text"]{
background: red;
}
input[type ="password"]{
background: blue;
</style>
</head>
<body>
<form>
<input type = "text" name = "name">
<input type = "password" name = "password">
</form>
</body>
</html>5)
<!-- /*img 태그중에서 src 속성값이 png로 끝나는 태그를 선택자로 지정....스타일을 적용하고 싶다. */
/*img 태그중에서 src 속성값이 ~~g로 시작하는 태그를 선택자로 지정....스타일을 적용하고 싶다. */
/*img 태그중에서 src 속성값이 ~가 포함된 태그를 선택자로 지정....스타일을 적용하고 싶다. */ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*img 태그중에서 src 속성값이 png로 끝나는 태그를 선택자로 지정....스타일을 적용하고 싶다. */
img[src$=png]{/*png로 끝나는 것*/
border: 3px solid red;
}
/*img 태그중에서 src 속성값이 ~~g로 시작하는 태그를 선택자로 지정....스타일을 적용하고 싶다. */
img[src^=node]{/*node로 시작하는 것*/
border: 3px solid red;
}
/*img 태그중에서 src 속성값이 ~가 포함된 태그를 선택자로 지정....스타일을 적용하고 싶다. */
img[src*=ux]{/*ux가 포함되어 있는 것*/
border: 3px solid red;
}
</style>
</head>
<body>
<img alt="" src="img/jajq.png" width = "200" height = "250">
<img alt="" src="node.jpg" width = "200" height = "250">
<img alt="" src="img/ux.gif" width = "200" height = "250">
</body>
</html>
원하는 layout만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#header{
width: 800px;
background: red;
text-align: center;
margin: 0 auto;/*마진 오토가 먹으려면 width가 명확하고 blocking tag일때 적용이 됩니다. */
}
#wrap{
width: 800px;
margin: 0 auto;/*마진 오토가 먹으려면 width가 명확하고 blocking tag일때 적용이 됩니다. */
}
#aside{
width:200px;
background: blue;
float:left;
}
#content{
width:600px;
background: green;
float: left;
}
</style>
</head>
<body>
<div id = "header"><h1>header</h1></div>
<div id = "wrap">
<div id = "aside">
<h1>aside</h1>
</div>
<div id = "content">
<h1>content</h1>
</div>
</div>
</body>
</html>
overflow기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 150px;
height: 150px;
background: #cccccc;
margin-right: 20px;
float: left;
margin-right: 10px;
}
.vi{ overflow: visible;}
.hi{ overflow: hidden;}
.sc{ overflow: scroll;}
.au{ overflow: auto;}
</style>
</head>
<body>
<div class = "box vi"><!-- 박스의 하위 값으로 vi가 있다.(vi-> visible) -->
<h3>visible</h3>
<div>
<h3>후손입니다..</h3>
</div>
<p>Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making
Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making</p>
</div>
<div class = "box hi"><!-- hidden -->
<h3>Hidden</h3>
<div>
<h3>후손입니다..</h3>
</div>
<p>Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making
Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making</p>
</div>
<div class = "box sc"><!-- scroll -->
<h3>scroll</h3>
<div>
<h3>후손입니다..</h3>
</div>
<p>Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making
Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making</p>
</div>
</div>
<div class = "box au"><!-- auto -->
<h3>auto</h3>
<div>
<h3>후손입니다..</h3>
</div>
<p>Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making
Contrary to popular belief, Lorem Ipsum is not simply r
andom text. It has roots
in a piece of classical Latin literature from 45 BC, making</p>
</div>
</body>
</html>
div-layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
width:960px;
margin : 0 auto;
}
#aside{
width: 200px;
float:left;
}
#section{
width: 740px;
float: right;
}
/* #footer{
clear:both;
} */
#wrap{overflow: hidden;}/*aside, section의 부모태그에 overflow:hidden 속성을 지정*/
</style>
</head>
<body>
<div id = "header"><h1>Header</h1></div>
<div id = "navigation"><h1>Navigation</h1></div>
<div id = "wrap">
<div id = "aside">
<h1>Aside</h1>
<p>Lorem Ipsum is simply dummy text of when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<div id = "section">
<h1>Section</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Loremimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ind Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div id = "footer"><h1>Footer: mply dummy text of the printing</h1></div>
</body>
</html>
sementic tag 이용 layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
width:960px;
margin : 0 auto;
}
aside{
width: 200px;
float:left;
}
section{
width: 740px;
float: right;
}
/* footer{
clear:both;
} */
#wrap{overflow: hidden;}/*aside, section의 부모태그에 overflow:hidden 속성을 지정*/
</style>
</head>
<body>
<header><h1>Header</h1></header>
<nav><h1>Navigation</h1></nav>
<div id = "wrap">
<aside>
<h1>Aside</h1>
<p>Lorem Ipsum is simply dummy text of when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</aside>
<section>
<h1>Section</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Loremimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the indimply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ind Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</div>
<footer><h1>Footer: mply dummy text of the printing</h1></footer>
</body>
</html>공부 방법
display: none이랑 visibility: hidden의 차이는 메모리상에 올라 오지 않는 거랑 메모리사랑에 올라오지만 가려진 커튼으로 가려진것 같은 느낌
'컴퓨터 프로그래밍 > 수업' 카테고리의 다른 글
| 2020.05.21_2 (0) | 2020.05.21 |
|---|---|
| 2020.05.21 (0) | 2020.05.21 |
| 2020.05.20_1 (0) | 2020.05.20 |
| 2020.05.19_2 (0) | 2020.05.19 |
| 2020.05.19_1 (0) | 2020.05.19 |
