본문 바로가기
반응형

IT, 개발93

제이쿼리(jquery) 사용하기(jquery 다운로드/CDN) JAVA로 웹 개발 시 매우 유용하게 사용하는 제이쿼리 사용하는 방법에 대해 알아보도록 하겠습니다. 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 사용하면 간단한 코드로 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 많은 장점이 있지만 일단 HTML 조작이 쉽고, CSS 스타일도 간단하게 수정, 추가할 수 있는 것이 장점입니다. 이 제이쿼리를 사용할 수 있도록 하기 위해 준비과정에 대해 알아보고 간단하게 테스트까지 해보도록 하겠습니다. 1. jquery 준비(다운로드 or CDN) 2. jquery 적용 3. 테스트 1. jquery 준비 js파일을 다운로드하거나, URL로 연결하여 사용할 수 있습니다. 두 가지 방법 중 원하는 방법으로 적용할 수 있습니다... 2022. 6. 30.
HTML/CSS class명 띄어쓰기의 의미 오늘은 class명에 관련된 내용을 보도록 하겠습니다. 먼저 class명을 지정하는 방법을 확인해보겠습니다. ⊙ 첫 글자는 알파벳으로 시작해야 합니다. ⊙ 두 번째부터는 알파벳과 숫자, 하이픈(-), 언더바(_)를 사용할 수 있습니다. (대소문자 구분되기 때문에 카멜 기법으로 사용 가능) * 카멜 표기법 낙타의 등 모양처럼 생겨서 붙어진 이름입니다. 단어의 첫음절마다 대문자를 사용하여 표기합니다. ex) className testClass 이제 class명 띄어쓰기 의미에 대해 알아보도록 하겠습니다. HTML 태그 예시를 보면서 살펴보겠습니다. 테스트 위 태그 예제에서 class 항목에 "className1"와 "className2"가 적혀있습니다. 두 단어 사이에 띄어쓰기로 표시가 되어있는 것은 서로 .. 2022. 6. 29.
HTML/CSS class 사용하여 관리하기 웹 개발을 할 때 class 속성을 사용해서 css를 관리하게 됩니다. 각 태그마다 style을 사용하여 적용한다면 한 두 번은 편할지도 모르지만 점점 소스량이 많아질수록 관리하기가 매우 어려워집니다. 처음 설정한 값이 절대 변하지 않는다면 모르겠지만 나중에 수정하거나 추가하려면 여기저기 찾아다니며 수정하기란 결코 쉬운 일이 아닙니다. 예시를 보며 비교해보도록 하겠습니다. 1. class 사용 HTML 소스 테스트 CSS 소스 .box { background-color: black; width: 100%; height: 50%; } 2. class 미사용 테스트 위 예시로만 본다면 style을 사용하여 코딩하는 쪽(class 미사용)이 더 편리해 보일 수 있으나 동일한 style을 가진 태그가 양이 많아.. 2022. 6. 28.
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.
728x90
반응형

티스토리툴바