'전체 보기'에 해당되는 글 187건
- 2015.05.07 [05] 간단한 웹페이지 작성, index.html, main.css
- 2015.05.07 [04] Linux 초기설정, web 개요, html, webserver 구축
- 2015.05.07 [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index
- 2015.05.07 [02] form, input, label, textarea, select, div, span, css, id, class, style, img
- 2015.05.07 [01] 사전 준비
- 2015.05.07 [37-40] DFS 분산 파일 시스템, ftp, ftps, Webserver
- 2015.05.07 [36] DNS 동적 업데이트 및 이중화
- 2015.05.07 [35] DHCP 인증 with AD
- 2015.05.07 [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷
- 2015.05.07 [33] 메일서버 + VPN 문제 (1) _ Nmail 설치
- 2015.03.13
1. iptables 동작 중지
# cd /etc/sysconfig
# rm -rf iptables
# iptables -F
# iptables -X
하면 재부팅 후에 다시 동작 안함
2. 간단한 웹 페이지 작성
1) <head>
설정(폰트 등), script
2) <body>
내용
3) bootstrap
이미 만들어진 코드를 이용
다운로드 하지 않고도 Bootstrap CDN 을 head만 붙여넣어도 된다.
* Tip - Linux 기본 환경 확인
# locale
# cd /var/www/html
# vi index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li> <a href="#">home</a> </li>
<li> <a href="#">sitemap</a> </li>
</ul>
<ul class="pull-right">
<li> <a href="#">sign up</a> </li>
<li> <a href="#">Log In</a> </li>
<li> <a href="#">Help</a> </li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1> GFriend Fan Page's </h1>
<p> I Love Girl Friends ... </p>
</div>
</div>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3> member </h3>
<p> Introduce member .. </p>
<a href="#"> member profile </a>
</div>
<div class="col-md-4">
<h3> schedule </h3>
<p> blar blar blar ... </p>
<a href="#"> more schedule </a>
</div>
<div class="col-md-4">
<h3> empty </h3>
<p> ..... </p>
</div>
</div>
</div>
</div>
</body>
</html>
# vi main.css
.nav a {
color: gray;
padding: 14px 10px;
font-weight: bold;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 400px;
background-image:url('https://pbs.twimg.com/profile_images/551756034780311552/Nvpilgd9_400x400.jpeg');
}
.jumbotron h1 {
color: #ee82ee;
font-size: 50px;
font-family: Arial;
}
.jumbotron p {
color: #000000;
font-size: 20px;
font-weight: bold;
}
'Study > 웹보안' 카테고리의 다른 글
- 2015.03.12
※ 웹 해킹을 제대로 알려면 웹 언어를 제대로 이해해야 한다.
1. 초기 환경 설정
Teamviewer 10 개인용으로 설치
회의 참가하여 수업 진행
CentOS 5.11 32bit 를 VMware Typical 로 설치 진행
2. Web 개요
최초의 웹 사이트 : 1989년, info.cern.ch
지금까지 전 세계 수 억 개의 사이트가 새로 생겨났으며, 현재도 계속 늘어나고 있다.
기술 발전과 그에 대한 반작용으로 수많은 취약점이 발생한다.
(최초의 웹사이트는 어떠한 취약점도 없다.)
1995년 : 세계 최초로 Java aplet을 통해 웹에서 움직이는 화면이 등장했다.
넷스케이프가 Java를 제일 처음 채용하여 한때는 90%까지 점유율을 잠식했다.
최초의 공격 : 2000년 xss 공격으로 myspace에 공격이 이루어졌다.
xss 공격 : <script> 이용
CSRF 공격 : <img> 태그 이용
3. HTML
html : 정적인 페이지
-> Javascript 등을 이용하여 동적으로 표현 가능
-> Ajax 를 이용하여 이미지를 세밀하게 이용 가능
<html> : 가장 최상위
ㄴ <title>
ㄴ <body>
ㄴ <head> ...
4. Web 1.0
~ Java : Web 1.0
Web Browser & Web Server 만으로 동작
* Web Server
- Apache : Open Source
- IIS
Web Server로 부터 소스코드를 받아와 나의 Web Browser에서 구현한다.
5. Web 2.0
CGI 탄생 - 사용자의 detail한 요청을 세밀하게 처리
Web Browser - Interface - Web Server
CGI -> 사용자의 요청을 받아 처리
- C
- perl
- php
- jsp
* WAS (Web Application Server)
실제로는
Web Browser - Web Server - Application 으로 작동함
5. Web Server 구축
설치 여부 확인
# rpm -qa | grep httpd
httpd-2.2.3-91.el5.centos
Apache 실행
# service httpd start
80번포트 LISTEN 확인
# netstat -ant | grep 80
* Tip _ Apache
DocumentRoot(Web root)
dafault : /var/www/html/
default page : index.html
방화벽 해제 필요
# cd /var/www/html/
# vi index.html
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <h1>My First Heading</h1>
5
6 <p>My First paragraph.</p>
7
8 </body>
9 </html>
방화벽 해제
# iptables -X
iptables: Too many links
# iptables -F
웹브라우저로 자신의 ip 접근하면 됨
'Study > 웹보안' 카테고리의 다른 글
| [06] php 및 mysql 설치, 인증, SQL, get & post, http 헤더 (0) | 2015.05.07 |
|---|---|
| [05] 간단한 웹페이지 작성, index.html, main.css (0) | 2015.05.07 |
| [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index (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 |
[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 |
[02] form, input, label, textarea, select, div, span, css, id, class, style, img
| Study/웹보안 2015. 5. 7. 15:02- 2015.03.10 웹보안
1. form tag
[기본]
<body>
<form>
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
[form get 방식]
<body>
<form method="get">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
=> 주소에 입력해서 값을 보냄
[form post 방식]
<body>
<form method="post">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
=> 비밀스럽게 보냄
2. form - input type
<body>
<form>
<input type="text" name="search" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
아래 처럼 다양한 것을 확인해볼 수 있다.
<body>
<form>
<input type="text" /><br />
<input type="botton" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" /><br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" /><br />
<input type="reset" /><br />
<input type="submit" />
</form>
</body>
3. form - label
<body>
<form>
<label>이름</label>
<input type="text" /><br />
</form>
</body>
보통은 아래처럼 많이 사용한다.
<body>
<form>
<label for="name">이름</label>
<input id="name" type="text" /><br />
</form>
</body>
4.textarea
<body>
<form>
<textarea>
show me the money.
</textarea>
</body>
5. select
<select multiple="multiple">
<optgroup label="HTML 5">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
</optgroup>
<optgroup label="CSS 3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
- optgroup 선택옵션을 묶을 때 사용
- select 에 multiple이라는 옵션을 주면 여러게 고를수 있다.
- 스마트폰에서 좀 더 정확히 볼 수 있다)
6. div && span
<body>
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
<div>Lorem ipsum</div>
<span>Lorem ipsum</span>
<span>Lorem ipsum</span>
<span>Lorem ipsum</span>
</body>
- div, span : 공간 분할태그
- div : block방식 (하나씩 차례대로 다음줄에 출력)
- span : inline방식 (한줄안에 차례대로 출력)
*
h1 태그 - 블락 방식
p 태그 - 블락방식
a, i 태그 -인라인 방식
7. CSS Basic
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
h1 { // 스타일 시트
color: red;
background-color: orange;
}
p{
background-color: blue;
}
</style>
</head>
<body>
<p>Hi Hello</p>
<h1>CSS3 Selector Basic</h1>
<p>The end</p>
</body>
</html>
* Tip
태그 자리에 * 를 줘서 태그를 주면 body 뿐 아니라 전체 모든 태그에 영향을 줌 ~ 까지만 알고 있기
ex)
* {
color: red;
}
다중 속성 부여
body, p, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0; // 박스 속성
}
8. id 와 CSS 연동
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* id 속성값으로 header를 가지는 태그의 스타일을 지정*/
#header {
width: 800px;
margin: 0 auto;
background: red;
}
#wrap {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
#aside {
width: 200px;
float: left;
background: blue;
}
#content {
width: 600px;
float: left;
background: green;
}
</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>
9. class 속성 값으로 style 주기
1) Basic
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드로 적용*/
.select { color: red; }
</style>
</head>
<body>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
</html>
2) 여러 class 의 속성을 가져다 사용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* class 속성값으로 item을 가지는 태그의 color 속성에 red 키워드로 적용*/
.item { color: red; }
/* class 속성값으로 header를 가지는 태그의 background-color 속성에 blue 키워드로 적용*/
.header { background-color: blue; }
</style>
</head>
<body>
<h1 class="item header">Lorem ipsum</h1>
</body>
</html>
3) 특정 태그 및 클래스에 style 적용
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* li 태그 중 class 속성값으로 select를 가지는 태그의 color 속성에 red 키워드를 적용*/
li.select { color: red; }
</style>
</head>
<body>
<h1 class="select">Lorem ipsum</h1>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
</html>
4) style 과 태그의 속성을 일치시키자.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* input 태그 중에서 type 속성값을 text로 가지는 태그의 background 속성 적용*/
input[type=text] {background: red; }
</style>
</head>
<body>
<form>
<input /> // type을 지정하지 않으면 기본 text가 되지만 css 적용안됨
<input type="text" />
</form>
</body>
</html>
5) 스타일 속성 세분화 - img 확장자
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
/* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
img[src$=png] { border: 3px solid red; }
/* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
img[src$=jpg] { border: 3px solid green; }
/* img 태그 중에서 src 속성값이 png로 끝나는 태그의 border 속성에 3px solid red 속성 적용*/
img[src$=gif] { border: 3px solid blue; }
</style>
</head>
<body>
<img src="jajq.png" width="200" height="250" />
<img src="node.jpg" width="200" height="250" />
<img src="ux.gif" width="200" height="250" />
</body>
</html>
* Tip - 확장자 말고도 다양한 옵션이 있음
img[src$=jpg] { border: 3px solid green; } // 특정 값으로 끝남
img[src^=jpg] { border: 3px solid green; } // 특정 값으로 시작
img[src~=jpg] { border: 3px solid green; } // 특정 값을 단어로 포함
img[src*=jpg] { border: 3px solid green; } // 특정 값을 포함
'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 |
| [03] 자/후손 선택자, action, a, 부정 속성, px, %, em, css 색상, 배경 이미지, 가시속성(inline & block), 투명도, box, font, 위치속성, z-index (0) | 2015.05.07 |
| [01] 사전 준비 (0) | 2015.05.07 |
- 2015.03.09
1. 사전 준비
Visual Studio Express 2013 for Web 설치
https://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
File - Browser with 에서 Chrome 으로 변경
HTML 할 수 있어야 한다
(HTML 여러가지 테크들 배울것이다)
* DNS 수푸풀
네이버에 비번쳣는데 암호가틀렸다 그 화면나오면 보통 내가 잘못쳤구나 하지?
그걸 이용해서 해킹할 수 있다
해커는 실제 네이버와 동일한 웹페이지 하나 만들고, 사람들이 이 웹페이지에 와서
ID/PWD 친다. 그럼 이 정보는 해커에게 가고 암호다시쳐라라는 화면에서 다시치면
진짜 네이버로 넘어가게 해준다. 이런식으로 해킹가능
* 인터넷 vs 웹 차이점
인터넷?
-전세계를 연결하고있는 국제통신망
웹?
-인터넷 위에서 서비스를 제공하고 있는 것
* 그레이해커
-나쁜녀석들을 캐내기 위한 해커
* 보안 뉴스 사이트
네이버에 데일리시큐 치면 나온다.
%%%%%%%%%%%% (속성값들 여러가지 예제 코드있는 사이트)
w3schools.com
%%%%%%%%%%%%
'Study > 웹보안' 카테고리의 다른 글
- 2015.03.05
1. DFS 분산 파일 시스템
[ 분산 파일 시스템(distributed file system)_네임스페이스 문제 ]
# 시나리오 : itbank 회사에 파일서버를 2대를 운영 중에 있었습니다. 파일서버 이용자
들은 2대의 파일서버를 이용할 때 2대의 IP를 번갈아 가며 이용해야 하기에 불편함을
가지고 있었습니다. 해서 시스템 관리자인 여러분은 물리적으로 상이한 2대의 시스템의
공유 자원을 논리적으로 하나의 공유 디렉토리로 묶기로 결정.
# DFS 네임스페이스를 이용하여 2대의 파일서버를 논리적으로 하나의 영역으로 묶어
서비스하세요.
1. Server1 파일 서버 구축(공유)
- 1G 하드디스크 2개 추가 후 X, Y 드라이브로 문자 할당
- X 드라이브 공유 ( administrator 모든 권한 )
) X 드라이브 않에 Server1_X.txt 생성
- Y 드라이브 공유 ( administrator 모든 권한 )
) Y 드라이브 않에 Server1_Y.txt 생성
2. Server2 파일 서버 구축(공유)
- 1G 하드디스크 2개 추가 후 X, Y 드라이브로 문자 할당
- X 드라이브 공유 ( administrator 모든 권한 )
) X 드라이브 않에 Server2_X.txt 생성
- Y 드라이브 공유 ( administrator 모든 권한 )
) Y 드라이브 않에 Server2_Y.txt 생성
3. Server3 DFS Server 구축
- 네임 스페이스 이름 : itbank
- DFS 디렉토리 트리 : itbank\server1\X (Server1의 X 드라이브를 대상으로)
\Y (Server1의 Y 드라이브를 대상으로)
itbank\server2\X (Server2의 X 드라이브를 대상으로)
\Y (Server2의 Y 드라이브를 대상으로)
===========================================================
확인 :
Client1에서 Server3의 공유자원 접근 후 server1, server2 디렉토리가 모두 보이나 확인
[Tip]
1) 서버관리자 - 역할 추가 - 파일 서비스 - 분산 파일 시스템
2) ip 주소 적고 찾으면 됨
2. FTP
[방법]
관리도구 - 역할 추가 - IIS - FTP 추가 설치
IIS 관리자 - 사이트 - Default 웹서버 중지
- 사이트 우클릭 - FTP 사이트 추가 - 원하는 설정 적용 (기본 연결로 설정)
고급 보안이 포함 된 방화벽 - tcp의 20, 21, 1025-65535 포트 개방
[Client 접속 방법]
cmd - ftp ftp서버IP 입력
[ FTP 기본 문제 ]
# Server1 User 추가 : test1, test2
1. Server1에 FTP 서버 구축
- C:\
- SSL 인증 없음
- test1 읽기/쓰기 권한
- test2 읽기 권한
- FTP 메세지
) 배너 : 오셨습니까.
) 시작 : 파일 전송 서비스를 시작합니다.
) 끝내기 : 파일 전송 서비스를 종료합니다.
- FTP 디렉토리 목록 스타일 : UNIX
확인 :
# Server2에서 FTP 접속
- test1 : 파일 업로드 및 다운로드 가능하면 성공
- test2 : 파일 다운로드 가능하면 성공. 업로드는 불가능
# 배너 메세지 확인
# 디렉토리 목록 스타일 UNIX 인지 확인
[ FTP(가상 디렉토리 및 홈 디렉토리) 문제 ]
# Server1 FTP Server
# Local User 추가 : samadal, ddasig
# C:\LocalUser 디렉토리 생성
# C:\LocalUser\samadal 디렉토리 생성 후 디렉토리 안에 samadal.txt 생성
# C:\LocalUser\ddasig 디렉토리 생성 후 디렉토리 안에 ddasig.txt 생성
# C:\전역 디렉터리 생성 후 디렉토리 안에 전역입니다.txt 생성
1. FTP Server 설정
- SSL 인증 없음
- 모든 사용자 : 읽기/쓰기
- FTPROOT 디렉토리 : C:\LocalUser
- FTP 사용자 격리 : 사용자 이름 실제 디렉터리(격리 안 함)
- 가상 디렉토리 : C:\전역
별칭 : itbank
확인 :
# samadal 계정 FTP 접속 후 상위 디렉토리로 이동 가능시 성공
# ddasig 계정 FTP 접속 후 상위 디렉토리로 이동 가능시 성공
# 두 계정 모두 itbank라는 가상 디렉토리 접근 가능하면 성공
[ FTP(접근통제 및 계정 홈디렉토리) 문제 ]
# Server1 FTP Server
# Local User 생성 : ddasig, samadal
# C:\LocalUser 않에 ddasig, samadal 디렉토리 생성
1. FTP Server 설정
- SSL 인증 없음
- 지정되지 않은 클라이언트에 대한 액세스 : 거부
허용 항목 : 100.100.100.130(Client1)
- 사용자 이름 디렉터리에서 시작(격리)
- 모든 사용자 : 읽기/쓰기 권한 부여
- FTPROOT 디렉토리 : C:\
확인 :
# Server2에서 ftp 서버 접속 차단되면 성공
# Client1에서 ddasig, samadal 접속하여 접속된 경로가 어딘지 확인(pwd)
# 자신의 홈 디렉토리에서 상위 디렉토리(FTPRoot 디렉토리)로 이동 안 되면 성공
3. FTPS
[일반 FTP 의 보안상 취약점]
Wireshark 설치 - 랜카드 설치 후 패킷 감시 시작
한글 내용의 txt 파일 다운로드 시 FTP-DATA 라는 프로토콜로 해당 내용을 확인할 수 있다.
FTP DATA 를 아래쪽에서 눌러서 확인해보면 16진수로 나온다. FTP DATA 우클릭 - COPY - BYTE - Offset Hex
복사한 HEXA 코드를 프로그램 이용하여 디코딩 해보면 내용을 그대로 볼 수 있다.
즉 암호화가 되지 않아 스누핑 당했을 시 내용이 그대로 노출된다.
따라서 SSL 프로토콜을 이용하여 보안 및 무결성(변조 여부 확인)을 향상시켜줘야 한다.
하지만 리눅스에서 사용 시 Samba를 이용해야 하기 때문에 잘 사용하진 않는다.
[방법]
IIS 관리자 - HOSTNAME - 서버 인증서 - 자체 인증된 인증서 만들기 - 이름 넣고 확인
FTP 서버 - FTP SSL 설정 - 만들어 놓은 SSL 인증서 선택 - SSL 연결에 128비트 암호화 사용 - 적용
1) SSL 연결 허용 : SSL 해도 안해도 연결 허용
2) SSL 연결 필요 : SSL만 이용
FTP 의 바인딩 설정에서 IP 주소가 * 혹은 본인의 IP 인지 확인
[ FTPS 문제 ]
# 브릿지 설중 후 진행
1. Server1에 IIS 역할 추가(FTP 게시 포함)
2. 기본 웹 사이트 중지 또는 제거
3. FTP 게시 추가
- 사이트 이름 : 자유
- FTPRoot 디렉토리 : 자유
- 연결 바인딩 : 모든 IP
- 포트 21
- SSL 필요
- 기본 인증 : 모든 사용자 읽기/쓰기 권한
4. 인증서 제작
- IIS -> 서버 인증서 -> 자체 서명된 인증서 만들기
) 인증서 이름 : 자유
5. FTP SSL 인증서 선택 후 128비트 암호화
확인 :
리얼 PC에 FileZilla 실행 후 FTPS 서버 접속 후
인증서 받은 후 보안 통신 되는지 확인
4. Webserver
역할추가 - IIS 기본 설치 - Hostname - 사이트 - Default Web Site 제거
C:\inetpub\wwwroot 안에 IIS의 기본 페이지가 만들어져 있다. 안에 내용물 삭제
이 곳에 test.htm 파일을 생성
<title>정지웅</title><br>
<h1>안녕하세요</h1>
사이트 우클릭 - 웹 사이트 추가 - 원하는 설정 - 웹사이트 - 기본 문서 - test.htm 설정 (위에부터 우선순위 있으며 필요 없는것 삭제)
(포트번호 바꿨다면 방화벽에서 해당 포트 개방 필요)
Client에서 웹으로 접속해보면 내가 띄우고자 하는 페이지가 나온다.
'Study > WinServer' 카테고리의 다른 글
| [36] DNS 동적 업데이트 및 이중화 (0) | 2015.05.07 |
|---|---|
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
- 2015.02.27
1. DNS 동적 업데이트
DNS 레코드 관리의 편의성을 위해 시스템들의 호스트네임을 자동으로 업데이트 할 수 있다.
[DNS 동적 업데이트 문제]
[Tip]
1) AD 내에 있는 PC 들은 PC들의 ip 변경이나 PC 이름 변경 시 자동으로 DNS 서버에 업데이트 된다.
[DNS 동적 업데이트 문제2]
[DNS 동적 업데이트 및 DNS 이중화 문제]
[Tip]
1) Server1 에 AD 설치
2) Server2 에 AD Join 및 DHCP Server 설치
3) DHCP 옵션 구성 시 DNS 정보 및 15번의 DNS 도메인 이름 필히 입력
4) DHCP 범위 속성 - DNS 에 들어가서 항상 DNS A 및 PTR 레코드를 동적으로 업데이트 체크
5) Client 는 AD에 접속되어있지 않아도 DHCP 서버를 통해 연결되어 있기 때문에 DNS 에 자동 업데이트 된다.
6) 단, AD 가 없으면 보안상의 위험이 있다.
'Study > WinServer' 카테고리의 다른 글
| [37-40] DFS 분산 파일 시스템, ftp, ftps, Webserver (0) | 2015.05.07 |
|---|---|
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
- 2015.02.26
1. DHCP 인증
DHCP는 Broadcast 로 패킷을 주고 받기 때문에 공격자가 쉽게 공격할 수 있다.
때문에 인증된 DHCP 서버가 필요한데 이 때 Active Directory를 이용하여 인증된 서버를 구축하면 된다.
즉, Server와 Client 가 같은 Active Directory의 Forest에 있으면 된다.
[DHCP 인증 문제]
[Tip]
1) 인증할 DHCP Server 및 Client 는 AD 에 Join 한다.
2) 공격자가 DHCP 로 뿌려줄 대역대에 맞춰 해당 Server 의 IP도 맞춰야 한다.
'Study > WinServer' 카테고리의 다른 글
| [37-40] DFS 분산 파일 시스템, ftp, ftps, Webserver (0) | 2015.05.07 |
|---|---|
| [36] DNS 동적 업데이트 및 이중화 (0) | 2015.05.07 |
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
- 2015.02.25
[메일서버 및 vpn 실습]
[Tip] - VPN
1) Server3 에 VPN 역할 추가 및 설정
2) 사용 위한 계정에 원격 로그인 허용
1. DHCP Local 멀티넷
1개의 SW 장비 내에 ip 개수가 모자라 다른 ip 대역을 대범위로 묶어 DHCP 에서 분배하는 것
=> 이전에 실습 함
2. DHCP 원격 멀티넷
다른 Subnet에 있는 장치들에게도 ip 를 설정하는 것
[DHCP 원격 멀티넷 문제]
[Tip]
1) Server1 에 DHCP 역할 추가 및 대범위 설정
2) Server2 에는 릴레이 에이전트 관련 역할추가 및 설정
3) Server3 에 VMnet1 스위치 2개 물려서 2개 받아오는지 확인, Client1 에 VMnet2 스위치 2개 물려서 릴레이 에이전트 테스트
'Study > WinServer' 카테고리의 다른 글
| [36] DNS 동적 업데이트 및 이중화 (0) | 2015.05.07 |
|---|---|
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
| [33] 메일서버 + VPN 문제 (1) _ Nmail 설치 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
| [31] DHCP 대범위 문제(Server 에서 라우팅 설정), DHCP 이용한 DNS 이중화 (0) | 2015.05.07 |
- 2015.02.24
[메일서버 및 vpn 실습]
[Nmail 설치 Tip]
1) apmsetup 설치
2) nmail 을 C:\ 에 풀기 (C:\NmailPHP)
3) C:\NmailPHP\nmail_dir_set.bat 파일을 관리자 권한으로 실행
4) C:\NmailPHP\_php.bat_sample\php_APMSETUP7.bat 파일을 C:\Windows\php.bat 으로 복사
5) C:\APM_Setup\Server\MySQL5\data\my.ini 에서 max_allowed_packet = 64M 로 만든 다음 해당 파일도 C:\Windows에 복사
6) 미리 주어진 ioncube_loader_win_5.2.dll 을 C:\APM_Setup\Server\PHP5\ext\ 위치에 복사
7) C:\NmailPHP\nmail_install.bat 파일을 관리자 권한으로 실행
8) Alias 설정 혹은 document root directory 를 C:\NmailPHP\nmail 로 지정
9) 방화벽 인바운드 규칙 - 80번 포트 개방
10) 도구 - 인터넷 옵션 - 보안 - 신뢰할 수 있는 사이트 에 해당 도메인을 넣어야 정상적으로 보임
'Study > WinServer' 카테고리의 다른 글
| [35] DHCP 인증 with AD (0) | 2015.05.07 |
|---|---|
| [34] 메일서버 + VPN 문제 (2) _ VPN 설정, DHCP Local 멀티넷, DHCP 원격 멀티넷 (0) | 2015.05.07 |
| [32] DNS 전달자, 조건부 전달자 (0) | 2015.05.07 |
| [31] DHCP 대범위 문제(Server 에서 라우팅 설정), DHCP 이용한 DNS 이중화 (0) | 2015.05.07 |
| [30] DHCP 분할범위, DHCP 대범위 (0) | 2015.05.07 |
