사이먼's 코딩노트

[팝업 만들기]이번에는 JavaScript를 사용해서 팝업창을 만들어보도록 합시다.만들어 볼 팝업창의 기본 기능은 다음과 같습니다.버튼을 눌렀을 때, 화면 중앙에 팝업창이 생기게 되고, 팝업창이 열리게 되는 순간, 화면의 배경색은 살짝 어두운 색상으로 변하게 된다.팝업창을 닫기 위해서는 팝업창의 x 버튼을 누르거나, 팝업창 바깥의 어두운 배경을 마우스로 아무데나 클릭했을 때 팝업창이 닫히게 된다.아래는 먼저 구현된 HTML, CSS JS 코드이며 각 섹션별로 코드 풀이를 해보려한다.See the Pen 팝업 복습 by psm817 (@psm817) on CodePen. [HTML]html 하단의 텍스트로 된 box-3 부분을 제외하고 마크업한 코드를 아래 작성하였다. ..

[자바 스크립트 소개]JavaScript(JS)는 웹 사이트와 어플리케이션을 동적 및 상호 작용적으로 만드는 데 사용하는 언어 중에 하나이다.서버뿐만 아니라 브라우저에서 직접 실행할 수 있다는 점이 독특하다.HTML/CSS와 함께 JavaScript는 가장 일반적으로 사용하는 프로그래밍 언어 중 하나이다.이 때 주의할 점은 기본 Java의 클래스 사용이나 방식은 유사하지만, JavaScript는 엄연히 Java와는 다른 언어이다.JavaScript 작업을 쉽게 구현하기 위해서는 일반적으로 라이브러리를 많이 사용한다.JQuery나 React가 대표적인 JavaScript의 라이브러리라고 생각하면 된다.프레임워크는 라이브러리의 모음인데, 웹 사이트 구축에 필요한 모든 코드를 제공할 수 있다.Vue.js, N..

[토글 사이드 바 만들기]이번에는 전에 만들어본 풀 다운 메뉴와 transition 등을 활용해서 토글 사이드 바를 만들어 봅시다.토글 사이드 바란 화면의 좌 또는 우측에 위치한 사이드 바 메뉴를 의미합니다.사이드 바는 좌측에 위치하고 4개의 1차 메뉴가 존재하고, 1차 메뉴의 마지막 메뉴 아이템에만 또다른 4개의 2차메뉴, 3차메뉴가 존재한다.1차 메뉴를 제외한 2, 3차 메뉴들은 모두 hover를 적용하여 마우스 커서를 올려 놓았을 때만 보이도록 한다. 예시의 사이드 바를 설명하자면, 각 메뉴에서 2, 3차와 같은 하위메뉴가 존재하면 메뉴의 이름 끝에 [+] 를 붙혀준다.그리고 뒷 배경에 lorem을 통해 텍스트를 길게 썼을 때, 화면을 스크롤해도 사이드 바가 그대로 형태를 유지하도록 하는 것이 주의..

[라이브러리]이번에는 HTML과 CSS를 보다 더 편하게 꾸며줄 수 있는 몇 가지 라이브러리를 소개하려고 합니다.라이브러리는 보통 HTML의 body 태그 아래에 작성할 수 있습니다. [cdnjs]cdnjs는 Cloudflare에서 호스팅하는 무료 오픈 소스 소프트웨어 콘텐츠 전송 네트워크이다.JavaScript와 CSS 라이브러리를 제공한다.URL : https://cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developersSimple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service ..

[풀 다운 메뉴 만들기]이번에는 position: absolute; 속성을 응용해서 풀 다운 메뉴를 만들어 봅시다.풀 다운 메뉴란 아래 사진과 같은 메뉴 구성을 의미합니다.기본적으로 4개의 1차 메뉴가 존재하고, 각 1차 메뉴별로 하단에 4개씩의 2차 메뉴가 존재한다.마찬가지로 2차 메뉴별로 이번에는 하단이 아닌 좌측에 3차 메뉴가 존재한다.모든 기능은 hover를 적용하여 마우스 커서를 올려 놓았을 때만 2차, 3차 메뉴가 보이게 된다. HTML 마크업 시  ul 태그 안에는 오직 li 태그만 들어갈 수 있는 점을 주의하여 마크업 해야한다.해당 메뉴를 구성할 때는 ul, li, a 태그가 모두 포함되기 때문에 노멀라이즈 작업을 필수로 진행해야한다.2차 메뉴를 생성할 때는 2차 메뉴 ul 태그에 posi..

[테이블]테이블은 표를 만들어주는 HTML 태그 중 하나이다.표 뿐만 아니라 갤러리를 만들 수도 있다.기본 구조는 열과 행으로 정렬하여 표현할 수 있고, 모든 테이블 행에는 셀의 수가 동일해야 한다.아래는 테이블과 관련된 기본 구조 태그들을 정리한 표다.기준이 되는 칸은 th 태그로 작성하는 것이 관례라고 생각하면 좋다. 아래는 테이블을 사용해서 학교 시간표를 만들어보았다.See the Pen html day7 복습 by psm817 (@psm817) on CodePen. 만들어진 시간표 테이블을 보면 디자인 속성에서 특이점을 몇 가지 찾을 수 있다.먼저, th 태그로 감싸진 셀들은 태그의 속성에 의해 글씨의 굵기가 굵고 가운데 정렬이 되어있다.나머지 td 태그로 감싸..

[호텔 예약 관리 프로그램 시연 영상]여지껏 구현한 호텔 예약 관리 프로그램의 모든 기능을 영상으로 담아보았습니다.구현된 모든 코드는 저의 깃허브 리포지터리에서 확인하실 수 있습니다. 아직 부족한 실력이지만 시간 여유가 있으시다면 시청 부탁드립니다^^깃허브 리포지터리 주소 :https://github.com/psm817/hotel_booking_proj GitHub - psm817/hotel_booking_projContribute to psm817/hotel_booking_proj development by creating an account on GitHub.github.com [시연 영상]

[호텔 예약 관리 프로그램 제작]작성된 모든 코드는 저의 깃허브 리포지터리에서 확인하실 수 있습니다.깃허브 리포지터리 주소 : https://github.com/psm817/hotel_booking_proj GitHub - psm817/hotel_booking_projContribute to psm817/hotel_booking_proj development by creating an account on GitHub.github.com [리뷰 목록 html로 추출 구현]이번 개인 프로젝트인 호텔 예약 관리 프로그램의 마지막 작업으로 회원이 남긴 리뷰를 html로 추출하는 기능을 추가하려한다.'export html' 이라는 서비스 명령어와 함께 서비스가 실행됨과 동시에 모든 리뷰 목록을 가져와서 html로..

[호텔 예약 관리 프로그램 제작]작성된 모든 코드는 저의 깃허브 리포지터리에서 확인하실 수 있습니다.깃허브 리포지터리 주소 : https://github.com/psm817/hotel_booking_proj GitHub - psm817/hotel_booking_projContribute to psm817/hotel_booking_proj development by creating an account on GitHub.github.com [리뷰 조회 구현]리뷰 작성이 구현이 완료가 되었으니 이번에는 프로그램에 방문한 모든 사람이 작성된 리뷰를 볼 수 있도록 조회하는 기능을 추가하려한다.아래 코드는 ReviewController에서 리뷰를 조회하는 review list를 구현하기 위해 작성된 코드이다.현재 ..

[호텔 예약 관리 프로그램 제작]작성된 모든 코드는 저의 깃허브 리포지터리에서 확인하실 수 있습니다.깃허브 리포지터리 주소 : https://github.com/psm817/hotel_booking_proj GitHub - psm817/hotel_booking_projContribute to psm817/hotel_booking_proj development by creating an account on GitHub.github.com [리뷰 작성 구현]이번에는 리뷰와 관련된 새로운 기능을 추가하려한다.리뷰는 호텔 숙박을 마친 회원에 한해서만 작성 가능하고, 프로그램에 방문한 사람들은 작성된 모든 리뷰를 볼 수 있다.먼저 리뷰와 관련된 데이터들을 정의하기 위해 Review.java 클래스를 새로 생성한다..