[03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index
| Study/웹보안 2015. 5. 7. 15:05- 2015.03.11
1. 후손 선택자
* 한단계 아래의 태그를 자손, 그 아래 위치한 모든 태그들은 후손으로 불린다.
선택한 태그 밑에 있는 모든 태그에 영향을 줌
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*id 속성값으로 header를 가지는 태그의 후손 위치에 있는 h1와, 전체 h2 태그의 color를 red로 적용*/
#header h1, h2 { color: red; }
/*header 태그의 h2가 아닌 header의 h1 및 전체 h2 태그를 의미한다.
만약 #header h2 만 주고 싶다면 #header h1, #header h2 라고 적어줘야 한다.*/
/*id 속성값으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의 color를 oragne로 적용*/
#section h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<h2 class="title">Lorem ipsum</h2>
<div id="nav">
<h1>Navigation</h1>
<h2 class="title">Navigation</h2>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<h2 class="title">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
=> header 아래쪽에 있는 nav 에도 h1 태그가 영향을 미침
=> h2 는 section에도 영향을 미침
2. 자손 선택자
한단계 아래에 있는 태그에만 영향을 줌
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*id 속성값으로 header를 가지는 태그의 자손 위치에 있는 h1 태그의 color를 red로 적용*/
#header > h1 { color: red; }
/*id 속성값으로 section을 가지는 태그의 자손 위치에 있는 h1 태그의 color를 oragne로 적용*/
#section > h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
=> header 아래쪽에 있는 nav 에는 h1 태그가 영향을 안미침
3. 마우스 Action 태그
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*h1 태그에 마우스를 올릴 경우에 color 속성에 red 키워드를 적용합니다.*/
h1:hover { color: red; }
/*h1 태그에 마우스를 클릭할 때 color 속성에 blue 키워드를 적용합니다.*/
h1:active { color: blue; }
</style>
</head>
<body>
<h1>User Action Selector</h1>
</body>
</html>
4. 자손선택 옵션 줘서 css 주기
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
ul { overflow: hidden; }
li {
list-style: none;
float:left; padding: 15px;
}
li:first-child { border-radius: 10px 0 0 10px; }
li:last-child { border-radius: 0 10px 10px 0; }
li:nth-child(2n) { background-color: #FF0003; }
li:nth-child(2n+1) { background-color: #800000; }
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</body>
</html>
=> ul 에 있는 overflow 는 다음 참조 http://aboooks.tistory.com/84
& 햇갈리는 nth
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
li > a:first-child { color: red; }
</style>
</head>
<body>
<ul>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
</ul>
</body>
</html>
=> 첫번째만 나올 것 같지만 전체에 나온다. li 밑에 있는 a 의 첫번째 자손이라는 의미
=> 아래 것이 정답
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
li:first-child > a { color: red; }
</style>
</head>
<body>
<ul>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
<li><a href="#">Condrasa</a></li>
</ul>
</body>
</html>
=> li의 첫번째 자손 중 a 태그에 해당 css를 준 것
5. a tag 관련 css
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
a { text-decoration: none; }
a:visited { color: red; }
/*방문한 경험 있는 링크는 red로 표시*/
/*href 속성을 가지고 있는 a 태그 뒤의 공간에 "- (href 속성)"을 추가*/
a:link::after { content: ' - ' attr(href); }
</style>
</head>
<body>
<h1><a>Nothing</a></h1>
<h1><a href="http://hanbit.co.kr">Hanbit Media</a></h1>
<h1><a href="http://www.w3.org/">W3C</a></h1>
<h1><a href="http://github.com/">Github</a></h1>
</body>
</html>
6. 부정 속성 주기
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*input 태그 중에서 type 속성값이 password가 아닌 태그의 background 속성에 red 적용*/
input:not([type=password]) {
background: red;
}
</style>
</head>
<body>
<input type="password" />
<input type="text" />
<input type="button" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="checkbox" />
<input type="search" />
</body>
</html>
* Tip
7. Size 관련 css - px, %, em
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
h1 {
margin: 10px; /*px : 픽셀*/
font-size: 200%; /*% : 백분율*/
line-height: 2em; /*em : 배수*/
}
</style>
</head>
<body>
<h1>margine, font-size, line-height test</h1>
</body>
</html>
&
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
p:nth-child(1) { }
p:nth-child(2) { font-size: 100%; }
p:nth-child(3) { font-size: 150%; }
p:nth-child(4) { font-size: 200%; }
p:nth-child(5) { font-size: 15px; }
p:nth-child(6) { font-size: 20px; }
p:nth-child(7) { font-size: 2em; }
p:nth-child(8) { font-size: 3em; }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adpiscing elit.</p>
</body>
</html>
&
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
* { font-size: 12px; }
h1 { font-size: 3.0em; }
h2 { font-size: 1.5em; }
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus elit, nec cursus dolor.</p>
</body>
</html>
=> 만약 크기를 0으로 줄 때에는 단위를 적지 않아도 된다.
8. css 색상 부여
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
/*이름으로 색상 부여*/
h1 { background-color: red; }
h2 { background-color: orange; }
/*rgb로 색상 부여*/
h3 { background-color: rgb(255, 216, 0); }
h4 { background-color: rgb(0, 255, 33); }
/*16진수로 색상 부여*/
h5 { background-color: #823600; }
h6 { background-color: #4f20b2; }
</style>
</head>
<body>
<h1>Header - 1</h1>
<h2>Header - 2</h2>
<h3>Header - 3</h3>
<h4>Header - 4</h4>
<h5>Header - 5</h5>
<h6>Header - 6</h6>
</body>
</html>
9. 배경에 이미지 넣기
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
body {
background-image: url('Desert.jpg')
/*경로를 'Other/Desert.jpg' 처럼 상대경로로 줄 수 있음
루트 폴더로 줄 때엔 '/Desert.jpg' 로 주면 됨*/
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
10. 가시 속성
Remark) span : inline, div : block
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
#box {
display: none;
}
</style>
</head>
<body>
<span>Dummy</span>
<div id="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<span>Dummy</span>
</body>
</html>
=> display 속성을 inline 으로 주면 div의 속성이 block에서 inline 으로 변한다.
& 투명도
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
#box {
background-color: black;
color: white;
/*투명도*/
opacity: 0.2;
}
</style>
</head>
<body>
<span>Dummy</span>
<div id="box">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<span>Dummy</span>
</body>
</html>
11. box 관련 css
각각의 px 값을 바꿔가며 확인 해볼것
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
div {
width: 100px; height:100px;
background-color: red;
border: 20px solid black;
margin: 10px; padding: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
&
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
div {
width: 100px; height:100px;
background-color: red;
/*margin: 위아래 왼쪽오른쪽
padding: 위아래 왼쪽오른쪽*/
margin: 0 30px; padding: 0 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
12. 배경 이미지 관련 태그
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'),
url('BackgroundBack.png');
/*너비 높이*/
background-size: 100% 250px;
/*중첩 안되게 하는 옵션*/
background-repeat: no-repeat;
/*문서는 스크롤 되지만 배경이미지는 스크롤 되지 않아
배경 위에 텍스트가 떠 있는 느낌 표현*/
background-attachment: fixed;
/*그림 위치를 아래쪽으로 줌*/
/*background-position: bottom;*/
/*x축 y축*/
background-position: 0px 50%;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
<p>Proin vitae elit est, ut accumsan arcu. Sed consectetur.</p>
<p>Donec molestie massa id lorem hendrerit eu bibendum augue vestibulum</p>
<p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
</body>
</html>
13. Font
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.a { font-size: 32px; }
.b { font-size: 2em; }
.c { font-size:14pt; }
.d { font-size:10pt; }
/*폰트 이름에 공백 없으면 그냥, 공백 있으면 ''로 묶어주기*/
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="a">Lorem ipsum</p>
<p class="b">Lorem ipsum</p>
<p class="c">Lorem ipsum</p>
<p class="d">Lorem ipsum</p>
<p class="font_roman">Lorem ipsum</p>
</body>
</html>
14. 위치 속성
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.box {
width: 100px; height: 100px;
/*절대 위치이기 때문에 겹쳐서 파란색만 보임
position: absolute;*/
position: static;
}
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
& 각각의 위치 지정
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.red { background-color: red;
left: 10px; top: 10px;
}
.green { background-color: green;
left: 50px; top: 50px;
}
.blue { background-color: blue;
left: 90px; top: 90px;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
=> 이미지, 글자 등을 겹치는 효과도 가능
& z-index를 이용하여 겹치는 위치도 지정 가능
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector Basic</title>
<style>
.box {
width: 100px; height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px; top: 10px;
z-index: 100;
}
.box:nth-child(2) {
background-color: green;
left: 50px; top: 50px;
z-index: 10;
}
.box:nth-child(3) {
background-color: blue;
left: 90px; top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
=> z-index가 높은 것이 위에 나온다.
'Study > 웹보안' 카테고리의 다른 글
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
|---|---|
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [04] Linux 초기설정, web 개요, html, webserver 구축 (0) | 2015.05.07 |
| [02] form, input, label, textarea, select, div, span, css, id, class, style, img (0) | 2015.05.07 |
| [01] 사전 준비 (0) | 2015.05.07 |
