웹보안을 하기전에 간단하게 html을 익히고 있어야 한다.
우선 태그(tag)란?
컨텐츠(화면에 보여지는 내용)의 타입을 정하는 용도이다.
- <tag name> </tag name> : opening tag, begin tag , closing tag, end tag
- <tag name/> : self closing. 여는쪽에서 닫아준다.
웹을 이해하는데 있어서 태그는 굉장히 중요하다.
html은 메모장에서 간단하게 나타낼 수 있다.
우선 위에 입력한 내용들을 살펴보자면
<!doctype html>
<!--signature(없어도 되지만 "이 문서는 html 표준 문서를 다룬다"라는 것을 나타내주는것) -->
<html>
<!-- html의 시작을 나타낸다.-->
<head>
<!--- html의 하위 요소-->
<!-- 화면에 보이지 않는 것들-->
</head>
<body>
<!--화면에 보여지는 내용들 -->
<h1>제일 큰 제목</h1>
</body>
</html>
<!-- html의 끝을 나타낸다.-->
이정도만 알아도 될것이다.
메모장의 html 파일을 저장한 후 크롬으로 실행시키면 위와 같은 화면이 출력된다.
태그의 종류에는 block tag와 inline tagr가 있다.
block tag : 한 블럭을 전부 차지하는 태그. 즉, <h1></h1>은 한 블럭을 전부 차지하므로 블럭태그
inline tag : 필요한 만큼만 차지하는 것.
목차
목차 : list , list에 들어가는 항목 : list item - 즉 <li> 를 사용하면 된다,
1) 정렬된 list :ordered list
<ol> </ol>
2) 정렬되지 않은 list : unodered list
<ul> </ul>
웹보안 글밑에 정렬된 리스트들을 작성한다.
웹보안 이라는 글 아래에 HTML, JavaScripts , DB , PHP의 리스트 와 같은 웹보안의 하위항목 이라는 글을
추가하고 그 밑에 또 리스트 웹기초 프로그래밍, 취약점분석을 추가한 것을 확인할 수 있다.
주의해야 할 점은
웹 브라우저에서는 <p> </p> 사이에 엔터나 \n을 입력해도 인지하지 못한다.
그래서 같은 줄 내에서 줄바꿈을 하고 싶다면 <br>을 입력하면 된다.
이제 간단하게 그림도 추가하는 방법을 알아보자.
그림 삽입하기
브라우저에서 다운받은 이미지의 경로만 복사해서 파일이름과 함께 나타내주면 된다.
이미지 파일의 크기(직접설정)가 가로= 300 세로= 300. src= 경로주소\파일명.jpg
위와 같이 사진 이미지가 출력되는 것을 확인할 수 있다. src란 이미지 주소를 입력하는 것이다.
표(TABLE)만들기
<thead></thead> 즉 테이블의 head 문단에서
<td></td>를 비워뒀기 때문에 맨 왼쪽 위칸은 비어있고
두번째 문단에서만 생명력이라는 단어를 써놨으며 나머지는 다 비워놨기 때문에
왼쪽칸에는 생명력이라는 단어 하나만 출력되는 것이다.
링크 추가하기
<a href=" 링크 주소 ">링크 이름 설정</a>
이동하고자 하는 브라우저의 링크를 복사하여 링크주소에 붙여넣기를 하면 된다.
위에 처럼 링크주소와 링크 이름을 설정한 후 실행시키면
위와 같이 "티스토리" 라는 링크가 하나 출력되는 것을 확인할 수 있다.
직접 눌러보면 해당 링크 주소로 이동하게 된다
링크 클릭 시 이동한 모습.
'Web 모의해킹' 카테고리의 다른 글
| 웹보안) 데이터베이스 개념 및 연동 (0) | 2018.03.08 |
|---|---|
| 웹보안) 사용자 인증 (0) | 2018.03.08 |
| 웹보안) GET 방식을 이용한 웹 브라우저 (0) | 2018.02.21 |
| 웹보안) 리눅스를 통한 DOM,BOM (0) | 2018.02.19 |
| 웹보안) 리눅스를 이용한 문서 실행시키기 (0) | 2018.02.13 |