본문 바로가기

전체 글9

JS 기본 개념 정리 1 변수와 상수변수:변하는 값var,let 상수: 변하지 않는 값const  -> let과 const ES6이후에 나왔다.그래서 지금은 var을 잘 사용하지 않게 되었는데 그 이유가 var은 같은 이름의 변수에 다른 타입의 값이 할당되기 때문에 오류나 버그를 일으킬 수 있기 때문이다. 자료형기본 자료형과 참조 자료형 기본자료형string, number,boolean, undefined, null, sumbol, bigintbigint는 23년도에 추가 되었습니다. 참조 자료형배열, 함수, 객체 연산자산술 연산자+,-,*,/,%증감 연산자++,--비교 연산자>, ,대입 연산자=, +=, -=. ...삼항 연산자조건 ? 참 : 거짓논리 연산자!,&&,|| 반복문 do..while, while, for, for .. 2025. 4. 2.
토이프로젝트 #1 - 화면에서 내리는 이모티콘 구현하기 오늘 수업으로 검색한 내용이 있으면 alert로 검색완료를 없으면 입력해주세요 ~ 라는 경고창을 if문을 이용해 만들었다.이렇게만 끝내기는 아쉬워서 배웠던 스킬을 이용해서 추가기능을 만들어보려고 한다. 전에 웹화면에서 이모티콘이 우수수떨어지는걸 본적이 있는데 정말 이뻤다.그래서 이 기능으로 결정~!  검색창 디자인도 좀 바꿔보고 css연습한다고 여러가지 만들어 보았다.css는 할만한데 js가 아직까진 좀 어렵다. 하트떨어지는걸 js로 구현하려니 도저히 방법이 생각이 안나서 인터넷의 힘을 좀 빌렸다.    근데 웬걸 하나씩 밖에 안떨어진다.. 내가 원했던건 하트에 파묻히는 거였는데...다시 시도!!  찾아보니 for문으로 구현할 수 있다고한다.그런데 for문으로 하면 성능이 저하되지 않을까라는 걱정이 있는.. 2025. 3. 17.
CSS #1 CSS 선택자 오늘은 수업에서 css선택자에 대한 실습을 진행하였습니다.다양한 css의 종류를 알게 되었습니다. 그래서 오늘은 선택자 종류에 대해서 포스팅 해보려 합니다.아래는 실습했던 이미지 입니다 ㅎㅎ  CSS 선택자  전체선택자  모든 요소를 선택합니다.전체 선택자는 부모와 자식간 관계에서 사용하는 것을 추천드립니다.*   유형선택자 태그이름을 이용해 css를 적용하는 선택자 입니다.div태그가 사용한 곳에 css가 적용됩니다.  div { background-color: green; }   클래스 선택자 태그에 class 특성이 적용이 된 요소를 선택할 수 있습니다.. 은 클래스 선택자를 선택하겠다 라는 뜻입니다.  .word { word-spacing: 50px; }.. 2025. 3. 9.
HTML #2 Form 요소 모음 Form 요소 모음   수업 시간에 사용했던 폼 요소들 모음 입니다.    우선 사용전에 폼태그를 불러와야 합니다. 요소를 가져오기 위해선 form 태그 사이에서 작업을 진행하여야 합니다.action 태그에 결과를 제출할 사이트 주소를 적습니다.메서드 속성에는 get, post 방법이 있는데 기본 메서드는 get입니다. 참고get과 post중 무엇을 사용해야할까?get을 이용하게 되면 url에 값이 담기게 됩니다.그래서 민감한 정보를 다룰때에는 POST를 사용해야 합니다.POST는 HTTP 바디에 데이터를 담아 전송합니다. id 와 name에 같은 이름을 써도 될까?id는 HTML 요소를 고유하게 식별하는 역할을 하고,name은 서버로 데이터를 전송할 때 변수처럼 사용됨.  ▪️ label 과 input.. 2025. 3. 5.
HTML #1 웹접근성과 기본태그 웹 접근성과 표준성 ▪️웹접근성이란? 웹사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것 전맹 사용자 : 시각인식이 어려워 화면의 텍스트를 음성으로 읽어주는 스크린 리더를 이용alt 부분에 이미지 설명 작성, QR이미지 일때 주소를 걸기색각이상 사용자 : 특정 색 구분이 어려워 색으로만 구분자 표시시 인지 어렵고령자와 약시자 : 통상적 크기 폰트 인식이 어려워 폰트 확대 기능 필요청각장애 사용자 : 동영상 음성, 오디오, 알람 청각 콘텐츠 인식시 어려움뇌병변 장애 및 지체장애 사용자 : 마우스를 사용하지 않을 경우 키보드만으로 모든 정보의 접근이 가능해야한다.tab키로 이동할 수 있게 접근성 강화일반 사용자 : 깜박임과 번쩍임 사용 제한, 사용자가 의도하지 않은 경우는 .. 2025. 3. 5.
WebGoat와 Docker를 이용한 웹 해킹 실습 #1 [실습 환경 구축] 저는 개발자가 되는 것을 목표로 하고 있습니다. 하지만 개발을 하려면 보안이나 네트워크 등의 다양한 지식을 쌓는 것도 중요하다고 생각합니다. 그래서 오늘은 웹 해킹에 대해 공부해 보았습니다.공부할 때는 권현준님의 『개발자를 위한 웹 해킹』을 참고하였습니다.  첫번째 포스팅은 실습 환경 구축에 대해 다뤄보겠습니다.  ◾ 개념 WebGoat 란?웹 애플리케이션에서 쉽게 발견되는 취약성을 테스트하도록 의도적으로 불안정하게 개발된 Java Spring Boot 프레임워크 기반의 웹 애플리케이션 👉 WebGoat를 사용하면 직접 웹 애플리케이션 개발 없이 공격을 수행해 볼 수 있다.    WebGoat를 PC에 바로 실행시켜도 되지만 실습 시 운영체제가 사용자 마다 다르기때문에 Docker을 사용해 Ubuntu.. 2025. 2. 27.