kjh00n의 기록저장소
WEB 본문
html
● Tag를 이용하여 Web Data(웹 문서)를 생성하기 위한 프로그래밍 언어
Tag
● 웹 문서 안에서 특정 기능을 구현하기 위한 문법, 문자
1. <태그문자> 원하는 기능 구현 기능
태그 작성시 <로 시작하여 >로 끝남
2. 태그는 시작태그와 끝 태그로 구성
시작태그는 <태그문자>이고 끝 태그는 </태그문자>
3. 해당 기능을 적용할 데이터는 시작태그와 끝 태그 사이에 입력
<태그문자> data </태그문자>
html 문서
1. 항상 확장자로 .html로 사용 → 컴퓨터가 해당 문서를 html 문서로 인식
2. html 문서 안에 주석 → <! 주석내용 > , <!-- 주석내용 -->
vscode에서 주석 단축키 → 원하는 데이터 드래그 후에 ctrl / 입력
html 문서의 기본 형식(구조)
● <!DOCTYPE html> 이 시작부분이다 → 문서의 형식 선언 (html 5 version)
● <html> html 문서의 시작을 알리는 태그
● </html> html 문서의 끝을 알리는 태그
● <head></head> html 문서의 정보, 설정을 넣는 태그
● <body></body> html 문서가 출력될 내용이 들어가는 태그
1. title 태그
● head 태그 안에서 사용하는 태그로 html 문서의 제목을 설정하는 태그
● 브라우저의 탭이나 툴바에 출력되는 제목을 설정
● 즐겨찾기나 북마크를 하는 경우 제목으로 설정된 값이 등록된다.
2. meta 태그
● head 태그 안에서 사용되는 태그
● html 문서에 대한 메타 데이터를 정의하는 태그
● 실제 화면에 출력되지는 않지만 문서의 설명, 작성자, 인코딩, 속성 정보 등의 특정 설정을 지정하는 태그
● meta 태그는 끝 태그 없이 meta 태그 속성을 지정하여 원하는 설정을 하는 방식
→ 속성은 태그에 추가적인 기능을 구현하기 위한 설정 값
→ 시작태그 안에 태그 문자 뒤에 속성을 입력하는 방식을 사용
<태그문자 속성="속성값">
→ 속성은 하나만 사용가능한 것이 아니라 여러 속성을 동시에 설정할 수 있다.
<태그문자 속성="속성값" 속성="속성값">
| charset | 문자 인코딩 설정 |
| http-equiv | http 통신에서 http header 안에 들어갈 데이터를 설정 |
| content | http-equiv 사용시 들어갈 데이터나 값을 지정 |
3. br 태그
● 줄 바꿈 태그, 끝 태그를 사용하지 않는 태그
● enter를 입력해도 줄 바꿈을 인식을 못하기 때문에 사용
4. p 태그
● 문서 안에 내용의 단락을 정의하는 태그
● 줄 바꿈과 동시에 앞뒤에 약간의 여백을 자동으로 추가해주는 태그
5. h 태그
● h1~h6 태그
● html 문서 안에 내용 작성 중 제목이나 머리글을 작성하는 경우 사용하는 태그
● 자동으로 줄 바꿈과 앞뒤에 약간의 여백이 들어간다
6. strong 태그
● 중요한 문자나 문자열을 정의하기 위한 태그
● 문자를 굵게 표시한다
7. 목록 태그
● 종류
→ ul 태그, ol 태그, li 태그
● ul 태그
→ 정렬되지 않은 목록을 정의
→ 항목을 점으로 표시
● ol 태그
→ 정렬된 목록을 정의
→ 항목을 숫자로 표시 (오름차순)
● li 태그
→ 목록 안에 세부 항목을 지정
8. img 태그
● html 문서 안에 특정 이미지를 출력하는 태그
● img 태그에서 사용하는 속성이 중요하다
→ src, alt, height, width라는 속성이 있음
● src는 이미지의 위치, 경로, 주소가 들어간다
● alt는 이미지 출력이 실패하는 경우 출력할 텍스트 지정
● height는 출력할 이미지의 높이 지정 (기본 px)
● width는 출력할 이미지의 너비 지정 (기본 px)
9. a 태그
● 특정 page에서 특정 page를 연결하는데 사용되는 하이퍼링크를 정의하는 태그
● 링크를 구성하여 특정 page를 불러오는데 필요한 속성
● href → 링크가 연결된 페이지의 이름, 주소, 경로를 작성
● target → 연결된 페이지를 불러와 어디에 출력할 것인지 설정
→ _blank는 새로운 페이지에서 열기
● download → 링크가 연결된 page를 클릭하면 다운로드되도록 지정
10. form 태그
● 사용자 입력을 수집하여 처리, 사용하는 태그
● 사용자가 입력한 데이터를 어떻게 처리하고 동작할지 결정해야 하기 때문에 추가적인 설정이 필요하여 속성을 지정
① action → 사용자 입력값을 어느 html 문서에 전달할지 설정하는 것
② method → 사용자가 입력한 값을 서버에 전달할 때 어떤 method로 요청할지 결정하는 값
③ enctype → 사용자가 입력한 값을 어떻게 인코딩하여 서버에게 전달할지 결정하는 값
④ name → 서버에게 전달할 전체 양식의 이름을 지정
11. input 태그
● 사용자에게 원하는 타입의 데이터를 입력받는 태그
● 원하는 형태의 데이터를 지정하여 원하는 이름으로 저장, 입력받아야 하기 때문에 추가 설정이 필요한 속성을 지정
① type → 데이터의 타입 지정
② name → 데이터의 이름 지정
③ value → 데이터의 기본 값 지정
④ maxlength → 데이터의 최대 크기 제한
● type 속성의 속성값 종류
① text → 문자열 입력→ ID와 PW를 설정할 때는 구분해줘야 하기 때문에 name="ID" 이런 형식으로 설정해줘야 된다.
② password → 문자열 입력(화면에 출력X)
③ number → 숫자 입력(min, max 속성을 같이 사용 가능)
④ date → 날짜 입력
⑤ datetime-local → 날짜와 시간을 같이 입력
⑥ color → 색상 입력
⑦ file → 파일 업로드
⑧ button → 버튼 생성 (value를 이용한 버튼 이름 지정)
⑨ reset → reset 버튼 생성 (form 태그 안에서 입력했던 모든 사용자 입력값을 삭제)
⑩ submit → 전송 버튼 생성 (form 태그 안에서 입력했던 모든 사용자 입력값을 실제로 전송한다)
→ form 태그 속성 중 action 속성에 정의된 페이지로 요청
⑪ hidden → 화면에 출력하지 않는 태그
12. textarea 태그
● 복수의 라인 텍스트를 입력하고 싶은 경우 사용하는 태그
● 직접 입력란의 크기를 지정도 가능하다
① rows → 가로줄 크기 지정
② cols → 세로줄 크기 지정
③ placeholde → 반투명하게 안내하는 글 작성하는 경우에 사용
13. select 태그
● 드롭 다운 목록을 정의하는 태그
● 세부 항목을 지정하기 위해 추가적으로 option 태그를 같이 사용
● 특정 세부 항목 중에서 기본 선택을 지정하고 싶은 경우 selected 속성 사용
14. datalist 태그
● input 태그와 같이 사용하는 태그
● 특정 list를 만들어서 사용자가 원하는 선택을 하게 되면 input 태그와 연동하여 Data를 입력하는 태그
15. table 태그
● 표를 작성하는 태그로 가로줄이나 세로줄 등 형태를 구성하기 위해 추가적인 태그를 같이 사용
① tr태그
→ 테이블의 행을 지정
② th태그
→ 테이블의 머리글(제목)을 지정
③ td태그
→ 테이블의 셀을 지정
→ 셀을 확장하는 속성 (rowspan, colspan)
rowspan = 아래로 세로 방향으로 확장
colspan = 오른쪽 가로 방향으로 확장
16. iframe 태그
● 인라인 프레임을 지정하는 태그
● html 문서 안에 html 문서를 불러와 출력하는 태그
17. div 태그
● 아무 기능 없는 태그
● 전체 html 문서에서 특정 코드들을 하나로 묶어 일괄적인 설정을 적용하고 싶은 경우에 사용
● 구분하고 싶을 때 사용하는 태그
18. span 태그
● 전체 html 문서의 일부분을 하나의 블록으로 묶는 태그가 div 태그인데
span 태그는 문자열 안에서 일정 크기의 문자열을 하나의 블록으로 묶는 태그
19. style 설정
● style 속성을 이용하여 원하는 태그에 스타일 설정하는 방법
<h1 style="color:red;"></h1>
● head 태그안에 style 태그를 사용하는 방법
(해당 html 문서 안에 style 설정을 일괄적으로 적용할 수 있는 방법)
<head>
<style>
h1 {color:darkblue;}
#[지정한 id] {color:red;}
.[지정한 class] {color:purple;}
</style>
</head>
css(cascading style sheets)
→ 문서의 스타일을 지정, 꾸밀 때 사용하는 언어
● css 파일을 만들어 해당 파일안에 css 설정을 집어넣고 html 문서는 해당 css 파일의 설정을 불러와 적용하는 방식
① css 파일 만들기
styletest.css 파일 만들고 @charset "utf-8";을 맨 윗줄에 적기
② css 파일 불러오기
head에 <link rel="stylesheet" type="text / css" href="styletest.css">
rel 속성 → 연동하는 문서와의 관계
type 속성 → 연동하는 문서의 타입
href 속성 → 연동하는 문서의 경로, 이름, 주소
간단 실습
1. yum -y install php, httpd, vsftpd 설치
systemctl enable httpd, vsftpd 설정systemctl start httpd, vsftpd 설정
2. Win10에서 visual code 설치
※ 생성, 수정은 연동이 되지만 삭제는 연동이 안된다
'어플리케이션 보안 운영' 카테고리의 다른 글
| Parameter Brute Forcing (0) | 2025.01.03 |
|---|---|
| WEB 인증 공격 (0) | 2025.01.03 |
| 데이터 검증 / Bypassing Client Validation (0) | 2025.01.03 |
| Information Gathering (정보 수집) (0) | 2025.01.02 |
| 여러기능의 WEB 만들기 (0) | 2024.12.31 |
