티스토리 뷰
▶ 취약점 발생 원인 파악 중요
1)http://info.cern.ch/
- 최초로 공개된 웹 페이지
- 1989년도
2)프론트앤드
- html
- javascript
3)백앤드
- python
- jsp
- PHP
> web brower ; web server application
db(데이터베이스)
1) WEB 1.0
1. HTML
(Hyper-Text Markup-Language)
- 언어라고 하기에는 부족 : 분기, 반복, 함수, ... 존재하지 않는다
- HTML5 : html +havascript
- 문서 표준 (문서에 대한 표준 ): 태그로 표현
2. 태그(tag) vs 요소(elements)
- 컨텐츠 (화면에 보여지는 내용)의 타입을 정하는 용도
- 규칙
<tag name> contents </tag name>
// 특정 컨텐츠를 나타내는 태그이름을 가운데 써줌
> opening tag , begin tag, closing tag,end tag (한 쌍 )
<tag name/>
// 여는쪽에서 닫아준다 셀프클로징
: self closing
▶ tag는 두가지로 나눌수 있음
>Tag
! block tag
! inline tag : img 태그와 같은 것이 여기 속함
>> block tag
1> heading :
<h1> ~<h6>
2> 문단, 본문 , 단락, ...
paragraph : <p>
< tag 기능 예시 >
<p> : 문단
<span> :
<div> :
3> <br> : 웹에서 사용하는 엔터
\n을 사용하는 것과 같음
- 한줄에 있다고 하더라고 줄바꿈이 나타남
- 대표적인 self closing
표준 : <br />
3. 문서 표준
3-1) 글자를 표현할 수 있는 태그
1. 제목 heading
- <h1>~<h6>
<!-- --> //html에서 사용하는 주석문
<!doctype html>
// 없어도 되지만 시그니쳐 표현
// 구분을 확실하게 하는 것이 가능
// html의 표준을 따르는 문서다 라는 것을 나타내줌
<!-- html 의 시작-->
<html> //최상위 요소
<!-- 화면에 보여지지 않는 것들-->
<head>
</head> // html의 하위 요소
<!-- 화면에 보여지는 내용들 -->
<body>
<h1>큰 제목</h1> // body 의 하위 요소
<h2>소 제목</h2> // 소제목 표현 (글자의 크기가 조금씩 달라짐)
</body>
<!--html의 끝 -->
</html>
4. 목차
목차 : list,
list에 들어갈 항목 : item --> <li>
1) 정렬된 리스트 : ordered list
<ol></ol>
2) 비정렬된 리스트 : unordered list
<ul></ul>
--> 네비게이션 바 ( 행으로 표현할 때 list 주로 사용 )
5. 그림
: image -> <img>
- self closing 하는 것중 하나
<img />
<img src="path">
<img src="C:\Users\Administrator\Desktop\python.jpg">
// 이미지 속성 주소 사용
<img src="http://imgnews.naver.com/image/5514/2018/02/07/0000005140_002_20180207112722308.jpg">
// 링크로 표현가능
--> 이미지 크기를 조절하고 싶다 속성이용
<img width="200" height="200" src="C:\Users\Administrator\Desktop\python.jpg">
<img width="200" height="200" src="http://imgnews.naver.com/image/5514/2018/02/07/0000005140_002_20180207112722308.jpg">
[속성]:attribute
- 요소(elment)와 속성으로 나뉨
- 각요소별로 속성이라는 항목을 따로 둠
- >요소별로 속성항목은 다름
- option 기능
- 오프닝(시작)태그에 작성
클로징 태그에는 속성 설정 불가
- 해당 태그에 종속적
1) 개별속성
- 속성
2) 글로벌 속성
- 이벤트 속성 : mouse, keyboard ,...
- 스타일 속성 : 스타일과 관련 속성
크기, 색깔, 폰트, 정렬 등등
- CSS(Casding Style Sheet)
- table 예제 참고
--> 부트스트랩 사용 (편리)
- id, class
▶ 글로벌 속성 : id , class
<p style="color:red"> 바로 속성을 줄 수 도 있다
>> 충돌이 많이 나서 좋은 방법은 아님
1. id : 유일한 요소를 표현
>> 포인트를 주고 싶다
<p id="unique"> 로 접근 가능
>> 나중에도 여러가지로 사용
#unique { //#을 사용
color: red;
}
2. class : 여러가지 요소를 표현
<p class="multi">
.multi{ //.을 사용
color:green;
}
6. 표 : table
<table>
<thead>
<tr>
<td></td> // 표의 한칸이 테이블의 td
<td></td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
----------------------------
<tr>
<td>생명력</td>
<td>21</td>
<td>24</td>
</tr>
------------------------> 하나의 행
문서 : 글자 , 그림, 표, 링크 ...
링크 : anchor(하이퍼링크), link
- 하이퍼 링크
- anchor : <a href="path|url"> 링크문자 </a>
> 경로는 속성을 통해서 지정할 수 있도록 되어있음
<a href="http://www.naver.com ">네이버</a>
<!doctype html>
<html>
<head>
</head>
<body>
<a href="http://www.naver.com ">네이버 </a>
</body>
</html>
>실습 test.html
# CSS(Cascading Style Sheet)
1. style 속성을 이용한 스타일 지정
2. <style> 태그를 이용한 방법
- 파일만 있으면 동일한 내용을 전달할 수 있음
> style.css 파일 새로 생성(확장자 css 로 설정)
<style>태그 안에 있는 내용을 옮겨놈
실제(html) 파일에서는 style태그 지
->css와 html 이 같은 파일안에 있는것이 유리
>> 적용시키는 방법
- anchor
> 하이퍼링크 (문서 연결)
- link
> 해당문서와 연결된 정보를 표현
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
href:같은 경로에 있는 파일이므로 파일 이름만 적용 (상대 경로)
rel=stylesheet
</head>
#yum list installed httpd
httpd의 데몬이 있어야 하이퍼택스트 연결 가능
#service httpd start
> 제대로 동작하는 지 확인 하는 방법
웹브라우저 : ifconfig의 내 아이피에 들어감
>> Apache 2 test page 뜨면 정상 동작
apache의 홈 디렉토리
# cat /etc/passwd
>>apache:x:48:48:Apache:/var/www:/sbin/nologin
[root@localhost ~]# cd /var/www/
[root@localhost www]# ls
cgi-bin error html icons
html : 문서의 root의 디렉토리
<실행방법>
웹브라우저
1) 192.168.59.128(가상머신 ip입력)/
--> 파일명을 입력 안했을 때는 index.html(디폴트 파일로 찾아감)
2) 192168.59,128/파일명
--> 파일명 입력
# cd /var/www/html
# vi index.html
> 웹 브라우저
index.html 로 찾아가서 index.html로 나타남
>> 한글이 깨져서 나오는 경우
#locale
incoding 맞춰주면 한글 깨짐 방지 가능
#vi index.html
//licys.html 파일 복사 붙여넣기
웹
licys.html 파일이 뜸
>192.168.6.200(중앙 컴퓨터 아이피)를 입력하면 이 서버가 만든 파일에 접근 가능
<style>
selector {
}
</style>
*selector : tag name , id, class
RGB 색상표 사용해서 color : 선택가능
color:#330033;
실습
> 노래가사 페이지 : ltlics.html
'Web Security > Web' 카테고리의 다른 글
| Web- PHP 데이터 전달 <GET/POST> (0) | 2018.03.02 |
|---|---|
| Web - WEB 2.0 : CGI / PHP사용 (0) | 2018.03.02 |
| Web - DOM/BOM객체 (javascript) (0) | 2018.03.02 |
| Web- Web1.0 < Javascript > (0) | 2018.02.19 |
| Web 실습환경 구축 (0) | 2018.02.14 |