본문 바로가기

[WEBHACKING.kr]register 모든 포스트 목록 Base64 회원가입 WEBHACKING.kr 문제를 풀어보기로 하였다. 신난다. 처음 들어가면 이렇게 간지나는 페이지가 나온다. 저번 회의 때 어떤 분이 발표한 것을 들었기 때문에 회원가입 코드를 찾고자 했다. 요즘 자바스크립트를 공부하면서 개발자도구를 사용하는 데 취미가 들려서 웹페이지의 코드를 확인할 방법을 바로 떠올릴 수 있었다. 코드를 자세히 살펴보면 register로 시작하는 주석이 있다. 이 상황에서 할 수 있는게 개발자도구를 이용할 수 밖에서 없어서 이것저것 눌러봤더니 웹페이지를 편집할 수 있음을 알았다! 주석을 제거하니 회원가입 버튼이 나왔다. 회원가입 버튼을 클릭해보았다. 회원가입 창이 나왔다. 근데 DECODE ME라는 텍스트 입력 값이 있었다. 이게 뭐지 싶었는데 ..
[CSS]font 속성 font 속성에 대해 설명합니다 모든 포스트 목록 font property order order : STYLE - VARIENT - WEIGHT - SIZE - /LINE-HEIGHT - FAMILY mandatory : SIZE, FAMILY optional : STYLE, VARIENT, WEIGHT, LINE-HEIGHT - if optionals are omitted, will not inherit from parent STYLE or VARIENT or WEIGHT : before SIZE and FAMILY LINE-HEIGHT : after SIZE with slash 출처 : font order
stackoverflow april fools day cursor-effects 공부하다가 stackoverflow 에 들어가니 재밌는게 있었다. 그래서 공부하기도 지치고 재미도 있어보여서 도전해보았다. 짜잔! 만우절 이벤트로 마우스를 움직일 때마다 꽃이 흩날렸다! 한 번 따라 해보려고 구글에 검색했으나 1차 시도는 fail... 어떻게 할 지 고민하다가 막무가내로 stackoverflow의 소스를 보고 찾아보기로 하였다. 아직 자바스크립트도 제대로 못 배운 초심자라서 mouse 이벤트 관련해서 찾아보면 나오겠지 싶어서 찾아보니 초심자의 행운 덕분인지 바로 발견할 수 있었다. 주석으로 입력된 홈페이지를 발견하고 그 페이지로 이동하였다. cursor-effects 페이지 꽃 효과 이외에도 다양한 효과들이 존재하였다. (푸른 색 링크를 따라가면 다양한 효과들을 체험해볼 수 있다!) 뭐 ..
[JavaScript]생활코딩 클라이언트 - 웹브라우저 자바스크립트 정리 예시 수정 : 현재 웹페이지가 완성이 되었을 때 웹브라우저는 window 객체의 onload라는 것을 호출하기로 약속되어 있어 웹페이지가 로드가 끝나고 함수가 실행되므로 id가 hw인 태그가 존재하여 오류가 발생하지 않는다 만약 script 태그를 body 끝에 위치시켰다면 window.onload는 필요하지 않다 8 Broswer Object Model : 웹브라우저를 제어하기 위하여 브라우저가 제공해주는 객체들 9 전역객체 window DOM에 소속되어 있던, BOM에 소속되어 있던, JavaScript에 소속되어 있던 간에 상관없이 전부 window 객체에 소속되어 있다 window 객체의 document 객체에 접근할 경우 window.document window 객체의 navigator 객체에 ..
[시스템프로그래밍]파일 기본 예제 - 학생정보 시스템 만들기 모든 포스트 목록 데이터베이스 프로그램 코드 학생의 학번, 이름, 점수를 저장하는 데이터베이스를 만듭니다. 데이터베이스의 기능은 다음과 같습니다. 데이터 베이스를 생성한다 학번을 입력하면 그 학생의 정보가 출력된다 학번을 입력하면 그 학생의 점수를 수정할 수 있다 어떤 학생의 정보가 없을 시, 그 학생의 정보를 추가한다 모든 학생 정보을 출력한다 종료한다 결과 데이터베이스 프로그램을 실행하면 목록이 뜨고 메뉴를 선택할 수 있습니다. 1번 메뉴를 선택하면 데이터 베이스를 만들 수 있습니다. 2번 메뉴를 선택하면 학번으로 학생 정보를 검색할 수 있습니다. 검색 후 다시 검색할 지 묻고 그 결과에 따라 다시 검색하거나 메뉴로 돌아갈 수 있습니다. 3번 메뉴를 선택하면 학생 정보를 수정할 수 있습니다. 학번으로..
[JavaScript]생활코딩 언어 - 자바스크립트 정리 모든 포스트 목록 리스트목록(목록을 클릭하시면 해당 항목으로 이동합니다) 오리엔테이션 자바스크립트 실행 숫자와 문자 변수 주석과 여백 비교연산자 조건문 반복 함수 배열 객체 모듈 UI/API 정규표현식 유효범위 값으로의 함수와 콜백 a 언어 자바스크립트 1 자바스크립트는 웹브라우저라고 분류되는 소프트웨어를 프로그래밍적으로 제어하기 위한 언어이다. (프로그래밍적으로 제어란 예를 들어 브라우저가 가지고 있는 경고창이라는 기능을 alert이라는 프로그래밍 코드로 제어한다.) 탈웹브라우저 최근에는 자바스크립트가 웹브라우저를 제어하기 위한 용도로만 사용되고 있지 않다. 웹서버를 동작하기 위한 도구로써 자바스크립트인 Node.js를 사용한다. 서버에 존재하면서 웹브라우저에게 응답하기 위한 정보를 프로그래밍적으로 생..
[CSS]생활코딩 WEB2-CSS 정리 +) ;은 구분자 5 CSS에 대해 배울 것을 크게 두 가지로 나누어 배운다 어떤 효과가 존재하는지(declaration의 property) 그 효과를 정확하게 선택하여 지정하기 (selector) 6 (5의 효과에 대하여 배움) property 검색 방법 : CSS (원하는 것) property 7 selector 특정 태그들에 효과를 주고 싶을 때는, html 태그에 class라는 property를 주고 그 class를 selector로 사용한다. class 특징 class의 value는 여러 개가 올 수 있고 띄어쓰기로 구분 가능하다 → 하나의 태그에 공동으로 여러 효과를 지정할 수 있음(밑의 예시 참고) → 이 경우에 둘 이상의 태그에 같은 효과를 줄 때 뒤에 있는 효과만을 적용하기 때문에 좋지 ..
[HTML5]이미지 태그, 오디오 태그, 비디오 태그 이미지 태그에 대해 설명합니다 모든 포스트 목록 이미지 관련 태그 이미지 태그 src(source) 속성 : 파일의 주소 width, height 속성 : 파일 크기 조정 alt(alternate text) 속성 : 이미지가 표시하지 못할 경우를 대비한 대체 설명 텍스트 지정 콘텐츠 그림, 사진 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급하고 싶을 때 사용하는 태그 설명 요소를 위한 제목을 표현, 요소 내에 위치한다 img, figure 태그 예시 [figurecaption]logo [figurecaption]logo 오디오 태그 대체 텍스트 입력 오디오 삽입 태그 controls 속성 : 미디어 제어기를 표시할 지 여부 autoplay 속성 : 파일이 로드되자마자 자동으로 재생 여부 loop ..