IT 공부

1. CSS 브라우저 접두어 2. !important 속성 3. 태그의 focus 속성 4. display: flex; (flexbox froggy) 1. CSS 브라우저 접두어 접두어 해당 브라우저 -webkit- Safari, Chrome, Android, iOS, Webkit -moz- Firefox, Mozilla -ms- Internet Explorer -o- Opera 브라우저 접두어는 CSS에 새로운 속성을 추가하기 전에, 일종의 테스트를 위해 실험 기간 동안 임시적으로 사용한다. 표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위함이다. 요즘은 잘 사용하지 않는다고 한다. 2. !important 속성 !important 사용법은 { 속성 : 속성값 !important; } 이다. C..

1. 목표 2. 완성 코드 1. 목표 버튼을 클릭하면 팝업창이 나타나도록 하는 것이 목표이다. 버튼을 누르면 배경색이 바뀌고 팝업창이 나타난다. 이때 팝업창의 X를 클릭하면 다시 [그림 1]의 상태로 돌아간다. 2. 완성 코드 input 태그를 써서 checkbox 타입을 지정하고, id는 layerPopup이라고 했다. label 태그를 붙여서 "버튼"이라고 쓰여져 있는 곳을 클릭해도 체크박스를 클릭한 것과 똑같이 작동하도록 만들어 주었다. div 태그를 이용하여 팝업창이 떴을 때 나타나는 배경 layer_bg과 팝업창 popup을 생성했다. h2 글자 크기로 제목을 적고 label 태그로 X를 클릭하면 체크박스를 클릭한 것과 똑같이 작동하도록 만들어 주었다. [그림 4]는 CSS에 대한 설명이다. t..

1. 목표 2. 완성 코드 1. 목표 메뉴를 클릭하기 전에는 햄버거(?)처럼 생긴 메뉴의 모양만 나타난다. 메뉴를 클릭했을 때에는 메뉴바가 나타나면서 그 안에 menu1, menu2, menu3 이라는 목록이 보인다. 2. 완성 코드 [그림 1]에 나타나는 메뉴를 input 태그를 사용하여 type은 checkbox, id는 icon으로 지정하였다. span 태그 3개를 이용해서 햄버거 모양이 되도록 CSS에서 작업할 것이다. [그림 2]에서 나타나는 메뉴바는 div 태그를 사용하여 id는 header로 하고 그 안에 ul, li 태그를 사용해 menu 목록을 만들었다.

1. 선택자 2. clear 속성 3. 클론 코딩 연습 사이트 1. 선택자 선택자 종류 선택자 형태 사용 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item *속성 선택자 선택자[속성] input[type] *인접 선택자 + #icon + label '선택자'란 CSS로 HTML문서에 스타일을 입힐 요소를 선택하는 문자이다. 선택자를 사용할 때에는 '선택자 { 속성 : 속성값; }' 의 형태로 사용한다. 예를 들어, CSS문서에 * { margin:0; padding:0; } 라고 작성하면 이 문서와 연결된 HTML의 모든 영역에 대해 margin과 padding 값이 0으로 설정된다. 태그 선택자는 동일한 태그가 있는 모든 곳에 적용되는..

1. Content 영역 삽입 2. 혼동하기 쉬운 태그 및 속성 정리 2.1. / 2.2. , / 2.3. display: block / inline /inline-block ; 1. Content 영역 삽입 id가 content인 div 태그를 생성하고 그 안에 id가 left, right인 div 태그를 만들어주었다. 개발은 나 혼자 하는 것이 아니기 때문에 id명은 직관적으로 쉽게 추측할 수 있는 것으로 하는 것이 나를 위해서도, 남을 위해서도 좋다. 따라서 left, right 같은 id 명을 쓰는 것보다 content의 왼쪽이나 오른쪽 부분에 넣을 내용으로 명시해주는 것이 바람직하다. [그림 1]을 보면 태그가 6개 포함되어 있으므로, id=left에는 content가 con1을 포함하여 6개가..

1. 사진 업로드 2. 글자 정렬 및 컬러 입히기 3. margin, padding, border 4. position 속성 1. 사진 업로드 복제하려고 하는 웹페이지는 '경일게임아카데미'의 웹사이트이다. 웹사이트에 사진을 올리려면 먼저 웹사이트의 사진을 내 작업 폴더에 가져와야 한다. 학원 웹사이트의 로고와 배너 사진을 index.html 파일이 속해 있는 21.12.22 폴더에 저장했다. 태그 안에 src=".\logo.png"를 넣어주었는데, 21.12.22 폴더에 속한 logo.png 사진을 불러온다는 의미이다. 배너 사진은 visual_1.png로 같은 폴더에 저장하여 태그에 붙여주었다. 웹페이지에 로고와 배너가 정상적으로 업로드된 것을 확인했다. 2. 글자 정렬 및 컬러 입히기 먼저 ,태그를 ..

1. CSS 정의와 특징 2. CSS 기능 3. Windows 명령어 1. CSS 정의와 특징 CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다. HTML과 같은 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. 2. CSS 기능 먼저 css 파일을 따로 사용하지 않고, HTML에 ..

1. Front-End vs. Back-End 2. Rendering(랜더링) 3. Web Browser(웹 브라우저) 4. Visual Studio Code 5. HTML(Hyper Text Markup Language) 1. Front-End vs. Back-End Front-End와 Back-End의 차이는 앞에 붙은 Front와 Back의 단어 뜻에서 직관적으로 알 수 있다. Front-End는 눈에 보이는 곳, Back-End는 눈에 보이지 않는 곳이라고 생각하면 쉽다. Front-End 웹 개발은 HTML, CSS, JavaScript의 사용을 통해 웹 사이트의 그래픽 사용자 인터페이스를 개발하여 사용자가 해당 웹 사이트를 보고 상호작용할 수 있도록 하는 것이다. Back-End는 컴퓨터와 응..

0. 조사 대상 구하기 (해당 PC의 IP 주소, 사용자 계정, 운영체제 버전) 1. 사용된 악성코드의 종류는 무엇인가? 2. 최초로 다운로드 된 악성코드의 경로 및 파일은 무엇인가? 3. 암호화된 파일의 확장자는 무엇인가? 4. 총 암호화된 파일의 개수는 몇 개인가? 5. 해당 PC는 hosts 파일이 변조 되어있다. 어떤 웹사이트에 접속하다가 감염이 되었는가? 6. 악성코드를 다운로드하는 html 파일과 유포하는 IP 주소는 무엇인가? 7. 문제의 html로 리다이렉트 시키는 악성 자바스크립트 파일은 무엇인가? 8. 어떤 취약점을 사용하여 악성코드를 유포하였는가? 9. 해당 취약점은 어떤 프로그램을 사용하였는가? 10. 악성코드 실행 후 시스템에 서비스가 설치되고 시작 프로그램에 등록되었다. 해당 비..

메모리 : infected.raw 1. 서버IP와 공격자IP를 구하시오. 2. 악성 파일과 경로를 구하시오. 메모리 : mem.raw 3. 해당 메모리의 OS, Build Number, Product Number를 구하시오. 1. 서버IP와 공격자IP를 구하시오. Ubuntu 20.04에서 volatility 툴을 이용해 서버IP와 공격자IP를 구하고자 다음과 같이 명령어를 입력하였다. $ python2 vol.py -f ../memory/infected.raw --profile=Win7SP1x64 netscan [그림 1]에서 local address에 나와 있는 IP 주소가 모두 192.168.236.146이므로 서버IP는 192.168.236.146이다. 빨간색 박스로 표시된 부분에서는 IP가 19..

1. arp spoofing 패킷을 분석하여 공격자 MAC 주소를 찾아 입력하시오. 2. 서비스거부 공격 패킷을 분석하여 공격기법의 이름, 공격자IP, 피해자IP를 입력하시오. 1. arp spoofing 패킷을 분석하여 공격자 MAC 주소를 찾아 입력하시오. - ARP Spoofing이란 무엇인가? ARP 스푸핑(ARP Spoofing)은 근거리 통신망(LAN) 하에서 ARP 프로토콜 메시지를 이용하여 상대방의 데이터 패킷을 중간에서 가로채는 중간자 공격 기법이다. 이 공격은 데이터 링크 상의 프로토콜인 ARP 프로토콜을 이용하기 때문에 근거리상의 통신에서만 사용할 수 있는 공격이다. 이 기법을 사용한 공격의 경우 특별한 이상 증상이 쉽게 나타나지 않기 때문에 사용자는 WireShark와 같은 패킷 분..

1. 프로세스 검증 누락 2. 불충분한 인가 3. 불충분한 인증 본격적인 내용에 들어가기에 앞서 '주요정보통신기반시설 기술적 취약점 분석 평가 방법 상세가이드'라는 제목의 pdf를 참고하는 것을 추천한다. 아래 [그림 1]은 해당 pdf의 웹 취약점에 대한 목차이다. 1. 프로세스 검증 누락 프로세스 검증 누락은 웹 페이지의 중요 기능에서 클라이언트 측 검증과 서버 측 검증이 미흡할 때 발생한다. - 회원가입 시 프로세스 검증누락으로 인해 중복 회원가입 가능 - 결제 값 조작, 포인트(마일리지) 조작을 통한 부당이득을 취할 수 있음 [프로세스 검증 누락 실습] http://XXX.XXX.XXX.XXX:XXXX - 취약한 비밀번호 등 랜덤한 정보로 회원가입 Burp Suite를 이용하여 function c..