반응형 IT, 개발/웹개발13 css 적용되는 우선순위 웹 개발을 하면서 css로 각종 style을 관리하고 적용하게 되는데, 완벽하게 정리가 잘 되어있다면 크게 문제는 없겠지만 간혹 같은 속성을 두 번 이상 지정하면서 생각한 대로 화면에 표시가 안 되는 것 같은 결과를 볼 수도 있습니다. 그럴 때 css의 우선순위를 알고 있다면 내가 원하는 항목을 우선순위를 높여서 사용하면 원하는 결과를 얻을 수 있을 것입니다. 혹은 이미 적용된 css를 내가 원하는 위치에서 변경해주고 싶을 때에도 사용할 수 있습니다. 우선순위 기준 ◎ css는 일반적으로 실행 순서가 뒤로 갈수록 우선순위가 높습니다. ◎ clss보다 id가 우선순위가 높습니다. ◎ 우선순위가 같다면(예: 양쪽 다 id로 사용) 개수가 많은 쪽이 우선순위가 높게 됩니다. ◎ !important를 사용하면 .. 2022. 6. 22. MacOS 맥북 이클립스 자동완성 기능 사용하기 윈도우 환경에서 이클립스를 사용하다가 처음 맥으로 이클립스를 사용했을 때 자동완성 기능이 안 돼서 당황했던 기억이 있습니다. 윈도우 환경에서는 [Control + Space]가 자동완성 단축기였는데 맥북에서는 단축기를 눌렀더니 Spotlight가 갑자기 화면에 나왔던 것 같은 기억이.. 그래서 Spotlight 단축기를 변경하고 이클립스에서 자동완성 기능 단축기를 [Control + Space]로 할까도 생각했지만 기본 설정을 최대한 그대로 두는 걸 좋아해서 자동완성 단축기를 다른 키로 설정하기로 했습니다. 이제 이클립스 단축기 변경하는 방법을 살펴보겠습니다. 이클립스 실행한 상태에서 상단 좌측에 [Eclipse] > [환경설정]으로 들어갑니다. 환경설정에서 [General] > [Keys] 선택합니다... 2022. 6. 21. 자바스크립트 오디오 파일 실행하기 (JavaScript mp3, wav 등등) 자바스크립트로 웹 개발을 하다 보면 웹 상에서 오디오 파일을 실행하도록 세팅하는 경우가 있습니다. 배경음악이라던지, 버튼을 클릭했을 때 소리, 혹은 원하는 순간에 소리가 나도록 설정하기 위해 사용합니다. 자바스크립트에서 오디오 사용하는 방법을 알아보도록 하겠습니다. 1. 오디오 실행 사용법 자바스크립트에서 오디오를 실행하기 위해 아래 소스를 사용합니다. var audio = new Audio(filePath); 변수에 new Audio()를 선언하고 내부에 파일 경로를 입력합니다(파일 경로는 문자열로 입력). 그리고 오디오를 load 한 후 오디오를 재생합니다. // load audio.load(); // 볼륨 설정 audio.volume = 1; // 실행 audio.play(); 볼륨 조절은 0~1 .. 2022. 6. 15. 자바스크립트 MQTT 통신 예제 (mqttws31.js / mqttws31-min.js) MQTT client 연결하여 메시지 받는 방법과 메시지 보내는 방법에 대해 알아보도록 하겠습니다. 저는 웹 개발하면서 모든 화면에서 include 하는 header 파일에 MQTT 클라이언트 코드를 작성하고 각 화면에서 사용하였습니다. 우선 MQTT 통신을 위한 js 파일을 준비해야합니다. 아래 두 파일을 미리 준비하시면 좋을 것 같습니다. 1. mqttws31.js 2. mqttws31-min.js head 태그에 다운로드한 js 파일(경로 포함)을 넣어줍니다. 다음은 스크립트 예제입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43.. 2022. 4. 8. 이클립스(Eclipse)에서 Spring Framework 개발 환경 구축하기 (Maven Project) Maven Project를 생성하고 그 프로젝트에 스프링 프레임워크를 적용하고자 합니다. 이클립스에서 Maven Project 생성하고 Tomcat 연동하는 방법은 이전 글을 참고하시기 바랍니다. 하나씩 천천히 진행해보겠습니다. 1. pom.xml 수정 maven 프로젝트를 생성하면 그 생성한 프로젝트에 pom.xml이 있습니다. 그 부분을 수정해보겠습니다. 먼저 기본 생성된 pom.xml 파일입니다. 기본 pom.xml 파일에서 스프링 프레임워크 dependency를 추가해보겠습니다. 두 가지 항목을 추가할텐데 properties에 사용할 버전 정보를 입력하고, dependency에 스프링 프레임워크를 입력하도록 하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1.. 2022. 1. 7. 자바스크립트 - for문 안에서 Ajax 사용 시 순서 안맞는 문제 해결 웹 개발을 하게 되면 자바스크립트 내에서 Ajax 구현하는 일이 매우 많습니다. jsp단에서 데이터를 주고받는 방법이 Ajax가 유일한 것은 아니지만 효율을 높이는 측면에서 많이 사용되는 방법입니다. 웹 페이지에서 특정 부분만 갱신하고 싶을 때 html 페이지 전체를 다시 받아서 로드하는 것은 매우 비효율적인 방법일 것입니다. Ajax를 사용하면 내가 원하는 부분만 갱신할 수 있습니다. JSON, xml 등의 형태로 필요한 데이터만 받아서 갱신하기 때문에 효율적으로 서비스를 구성할 수 있게 됩니다. 1. Ajax 사용법 일단 간단한 예제를 보여드리겠습니다. 1 2 3 4 5 6 7 8 9 $.ajax({ type: type, // get, post .. url: url, // url dataType: d.. 2021. 12. 22. 이전 1 2 3 다음 728x90 반응형
