본문 바로가기

전체 글231

JavaScript - z-index 값 동적으로 변경 & 특정 문자를 포함한 클래스 찾기 JavaScript - z-index 값 동적으로 변경 & 특정 문자를 포함한 클래스 찾기 구현하는 프로젝트에서 여러개에 모달창을 띄워서 정보를 나타내는데 여러개를 동시에 띄우면 css의 적용된 z-index값이 그대로 적용되므로 내가 클릭한 모달창을 제일 앞으로 띄우기 위해서는 클릭이벤트가 발생할때 마다 동적으로 값을 변경해줄 필요가 있다. 그 과정에서 z-index값 변경시 주의점과 변경해줄 모달들만 찾기 위해 사용한 특정 문자를 포함한 클래스 찾는 방법을 정리한다. z-index값 변경 보통 css의 style 속성 값을 변경할때 아래와 같이 많이 사용한다. document.getElementById("target_img").style.src = "book.gif"; 이와 같이 생각해서 docume.. 2021. 7. 26.
HTML - 특수문자 코드표 사이트 HTML - 특수문자 코드표 사이트 html을 작성시 < 와 같은 기호들을 그대로 쓰고 싶을때는 따로 표시를 해주지 않으면 태그로 인식을 하기 때문에 특수문자를 쓰기 위해서는 미리 약속한 이름이나 표기법을 사용해줘야 한다. 규칙 시작은 &로 시작을 하고 끝에는 꼭 ;로 끝내면 된다. 모든 특수문자를 외울수는 없으므로 필요시에 아래 사이트에 접속하여 이용하면 된다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 2021. 7. 23.
Spring - Port 8080 is already in use 에러 해결 Spring - Port 8080 is already in use 에러 해결 스프링부트에 내장된 톰캣의 기본 포트값은 8080을 사용해서 스프링부트를 실행했을때 8080번은 사용을 하고 있으면 다음과 같은 에러가 발생하게 된다. 해결방법은 간단하다. 1. 기본 포트 8080을 다른 포트로 변경해준다. 2. 기존에 사용하고 있던 8080번을 kill 명령어로 통해 종료한다. 8080포트 변경하기 프로젝트에 보면 application.properties 파일에 다음과 같이 서버 포트 정보를 입력한다. 그 후 인텔리제이를 재부팅한다. kill 명령어를 통해 종료하기 이 부분은 기존에 정리했던 포스팅에 있어서 링크로 대체한다. https://sjparkk-dev1og.tistory.com/62?category=.. 2021. 7. 22.
Include HTML을 이용한 html 파일 분리하기 들어가며 웹페이지 구조를 잡다보면 중복적으로 들어가게 되는 코드들이 존재하게 된다. 예를들어 상단에 헤더나 하단의 푸터같은 경우를 예로 들 수 있다. 기존 스프링에서 했을때는 thymleaf를 이용하여 이 작업을 하였는데 이번에 javascript만으로도 분리를 하는 방법을 알게 되어 정리한다. includeHTML.js 해당 스크립트문을 통해서 include-html이 포함된 html 파일을 로드할 수 있다. function includeHTML(callback) { var z, i, elmnt, file, xhr; /*loop through a collection of all HTML elements:*/ z = document.getElementsByTagName("*"); for (i = 0; i.. 2021. 7. 21.
JavaScript - Google Map API를 이용하여 웹페이지에 구글맵 띄우기 JavaScript - Google Map API를 이용하여 웹페이지에 구글맵 띄우기 웹페이지들을 보다보면 오시는길과 같은 서비스 페이지에 맵 기능이 있는 것을 보았을 것이다. 구글에서 제공하는 google map api를 통해서 쉽게 구현이 가능하다. API KEY 발급 먼저 코드를 작성하기 전에 api를 사용하기 위한 API KEY를 발급받아야한다. 어려운 내용이 아니고 다른 블로그에 발급받는 방법에 대해 잘 정리된 글들이 많아 이 부분은 생략을 하겠다. 아래 사이트에 접속하여 발급이 가능하다. https://console.cloud.google.com/apis/dashboard Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을.. 2021. 7. 19.
JavaScript - '==' 와 '===' 차이점 JavaScript - '==' 와 '===' 차이점 자바스크립트에서는 '='가 3개인 비교 연산자가 있다. 2개와 3개의 차이점을 알아보자. 차이점 '==' : 비교하는 두개의 값을 강제로 같은 형으로 변환 후에 비교를 수행한다. '===' : 비교하는 두개의 값이 타입과 값이 모두 같을 경우에 true를 리턴. 즉, '==' 연산자는 타입이 다르더라도 같은 형으로 변환했을시 값만 같으면 true를 리턴하는 것이다. 아래 예제를 통해 쉽게 알아볼 수 있다. See the Pen 문자열 by anna (@hianna) on CodePen. 여기서 추가로 null과 undefined를 비교를 하게 되면 결과는 어떨까? 위에 결과를 보면 어느정도 예상이 가능할 것이다. 결과는 '=='로 비교하였을때는 tru.. 2021. 7. 16.

티스토리툴바