분류 전체보기62

• 

  [JavaScript] 대문자 - 소문자 변환 (toLowerCase, toUpperCase) 영문 알파벳은 대문자와 소문자가 구분이 되어있는데, 전부 소문자나 대문자로 변환하는 방법이 있습니다. toLowerCase(), toUpperCase()로 구분이 되고, 이 메서드를 작성하게 되면 전부 소문자 혹은 대문자로 변경이 됩니다. 위의 변환 방법은 오로지 영문에서만 동작하고, 별도의 인자를 받지 않습니다. toLowerCase() 문자열 소문자로 변환 toUpperCase() 문자열 대문자로 변환 하단의 있는 userAgent 내용을 toLowerCase를 통하여 소문자로 변경합니다. 이번에는 userAgent 내용을 toUpperCase를 통하여 대문자로 변경합니다. 새해가 되고, 열심히 공부하고 있는 과정 중에 모르는 부분이 있으면 이렇게 정리하면서 지식으로 만드는 방법은 분명히 중요하다고 .. JavaScript 2021. 2. 3.

• 

  [jQuery] 이벤트 중복 오류 해결 (이벤트가 두번 실행됩니다!) jQuery를 이용해서 좌측의 메뉴를 클릭할 때마다 SlideToggle 메서드를 이용해서 구현하려고 하였으나, 뭔지 모르게 갑자기 두번씩 SlideToggle이 발생되는 것을 보았습니다. $('셀렉터').on('click', function(){ 이벤트 내용 }); 하지만 여러가지 방법을 찾다가 해결책을 찾게 되었고, 위 현상이 일어나는 것은 바로 이벤트가 중복으로 걸리는 경우라고 확인 되었습니다. 조금 코드가 길어지기는 하지만, off 메서드를 혼합하여 사용함으로써 해당 이벤트 중복 오류를 막을 수 있었습니다. $('셀렉터').off('click').on('click', function(){ 이벤트 내용 }); 위의 코드 내용으로 작성하면 이벤트 중복을 막을 수가 있습니다. 하지만, 해당 셀렉터에게만.. jQuery 2021. 1. 27.

• 

  a태그로 구글 메일 보내기 바로 링크 (ft.Gmail) 이번에는 HTML 태그로 이메일 보내기 링크 사용방법입니다. mailto도 있지만, 제가 사용한 방법은 a태그를 이용하여 href에 있는 주소에서 추가적으로 기재하면 사용가능한 방법입니다. 일반적으로 사용하시는 메일이 세팅이 되어있다면 편하시겠지만, 세팅이 되지 않았을 경우에는 이것저것 다른 창 열고 주소 복사하고 하는 번거로움도 있기 때문에 저도 이 태그를 제가 사용하는 페이지에서는 많이 사용합니다. 구글이 로그인이 되어있다면 해당 주소로 바로 메일쓰기가 가능해집니다. 메일 보내기는 일반적인 방법을 많이 사용하지만, 이런 방법도 있다는 점에서 공부도 할겸 작성했습니다. HTML 2021. 1. 18.

• 

  [JavaScript] 0~10까지 숫자 카운트 JavaScript에서 for문을 통하여 console에 0~10까지 카운트입니다. for(var i = 0; i JavaScript 2020. 12. 11.

• 

  아이디, 비밀번호 입력란에 로그인 버튼 색 변경하기 jQuery를 이용하여 아이디, 비밀번호란에 데이터를 입력 시에 로그인 버튼 배경 색상을 변경하는 방법입니다. - ID, 비밀번호 입력란에 text가 모두 입력이 되면, addClass('on')을 통해서 배경색이 pink로 변경 - ID, 비밀번호 입력란이 하나라도 비어있다면, removeClass('on')으로 기존 배경색으로 됨 - ID, 비밀번호 입력란 모두 작성했다가, 다시 삭제하면 기존 배경색으로 되는 부분 function checkInput() { var idCheck = $('.id_input').val(); // idCheck 변수 var passwordCheck = $('.password_input').val(); // idCheck 변수 var btnLogin = $('.btn_sub.. jQuery 2020. 12. 11.

• 

  구글 서치콘솔 URL 검사 색인 요청 비활성화, 페이지 작업이 일시적으로 사용 중지됨? 현재 제가 작성하고 있는 이 블로그는 기술적인 것 보다도, 제 개인적인 작업 내용, 미진했던 공부, 반복적인 코드 작성을 원활하게 정리하는 내용, 이슈 등의 용도로 사용하려고 작성하고 있습니다. 검색이 노출되지 않아도 상관은 없지만, 누군가는 저와 비슷한 내용으로 고민하고 있을 내용을 생각하였기에 검색 등록을 진행하는 도중에 계속해서 검색이 비활성화가 되어 내용을 찾아보게 되었습니다. 구글 웹마스터 도구에서 URL 검사를 통해서 현재 등록 여부부터, sitemap, 크롤링 등에 대한 내용이 자세하게 기재가 되어있습니다. 위의 포함된 내용으로 충분히 누락이 된 이유가 어떤 내용인지 알고 기술적인 부분에서 보완이 가능합니다. 일단 추가하려는 URL 주소를 넣고, 검사를 한 후에 우측에 실제 URL 테스트라는.. 카테고리 없음 2020. 12. 6.

• a 태그 특정 위치로 이동하기 이제 a태그를 통해서 페이지를 이동하게 되면, 최상단으로 가게 되는데 해당 문서에서 특정 위치나, 다른 페이지에서 특정 위치로 가는 방법이 있습니다. 물론, JS 등을 사용해서 이동하는 방법도 있겠지만, a태그를 통해서 간단하게 이동이 가능합니다. 1. 같은 페이지에서 특정 위치 이동 박스 영역으로 이동 여기는 박스 영역 위의 a태그에서 href에 #ID 영역만 작성하게 되면, 바로 이동이 가능합니다. 2. 다른 페이지에서 특정 위치로 이동 이동 위의 a태그에서는 특정 위치로 이동하려는 사이트 + 그 섹션이 있는 ID값을 같이 기재해주면 a태그에서 이동하려는 URL과 해당 섹션으로 자동으로 포커스가 이동이 됩니다. a태그 특정위치로 이동 이동된 사이트는 제가 플레이하는 일루전커넥트 홈페이지인데, 위의 내.. HTML 2020. 12. 5.

• 

  [jQuery] 아...이런 siblings;; 제이쿼리로 현재 모바일 홈페이지를 과제로 하고 있습니다. 기존에는 데스크탑으로 탭메뉴를 구성하는 형태였고, ul 구조에 li가 4개로 하나씩 누를 때 마다 쉽게 변경되는 구조였습니다. 위의 코드는 누구나 구현이 가능한 쉬운 누구나 기초를 배우셨다면 구사가 가능한 정도입니다. 하지만, siblings() 이녀석이 저를 괴롭힐 거라고는 조금도 생각하지 못했습니다... 이번에는 select 태그의 value 값으로 리스트를 호출하는 방식으로 셀렉트 메뉴를 구성했습니다. 일단, 하나의 ul의 여러개의 list 구조로 이루어져있고, 각 주제마다 class를 부여한 상태입니다. 맨 위의 예제처럼 쉽게 풀릴 것 같았지만, 같은 클래스를 사용하는 list 구조에서 siblings를 부여하니까 show는 커녕 리스트 전.. jQuery 2020. 11. 7.

• 

  [jQuery] attr()로 태그 속성 다룰 수 있습니다. jQuery를 공부하면서 메서드를 다시 하나씩 공부하기로 시작했습니다. codeit을 큰맘먹고 결제하면서 귀로 따고, 눈으로 보고, 예제 다시 만들고, 다시 처음으로 돌아가면서 하나씩 열심히 하기로 했습니다. 이번에 공부한 내용은 attr() 메서드입니다. .attr() : html 태그 속성(attribute)을 다루게 됩니다 attr은 기존 걸려있던 값을 다루면서 변경할 때 사용하는 메서드입니다. 현재 태그에서는 #boom이라는 임의의 ID를 작성하였는데, img 태그에 1번이미지 주소를 넣었습니다. #boom img영역을 태그하면 attr()를 클릭하면 src 값이 2번이미지 주소로 변하게 됩니다. 지금 위의 값으로는 1회성으로 1번이미지 ▶ 2번이미지 변경하게 됩니다. attr()를 이용하여 오마.. jQuery 2020. 11. 4.

• 

  카카오지도 API 연결 성공기 주말 내내까지는 아니고, 주말에 조금씩 시간내서 시안을 만들었던 부분에서 카카오지도를 연결해서 회사 위치를 넣어야하는 부분이 있었습니다. (내가 만든건데도.. 참) 일단, 여러가지이면서 다양한 페이지들을 구현해보려고 구성을 했었습니다. 위치 찾기나 회사 위치 등에 페이지를 보면서 꼭 넣어봐야지 했었는데, 이번에 페이지에 추가하게 되었습니다. 생각보다 넣는 것까지는 어렵지는 않았습니다. 그래 넣는것까지... 그 뒤가;; 정말, 위 코드만 넣고, 바로 지도가 되는 줄 알았습니다. 하지만..!! 로컬에서는 테스트가 되지 않아 굉장히 괴로워했다.. 그래서 API 관련 테스트는 웹서버에 업로드 후에 확인을 해야합니다. 위의 코드로 코드펜에 찍으면 그냥 이렇게만 나오기 때문입니다.. (CSS로 background:.. JavaScript 2020. 11. 2.

• 

  그래프, 이런건 어떻게 표현.. 어렵구나 갑자기 무슨 주식 정보냐고 의아할 수도 있지만, 현재 포트폴리오를 준비하는 과정에서 주가정보 페이지를 기입해야겠다고 마음을 먹어서 어떻게 구현하는지 궁금했습니다. 데이터 이런 부분에서는 논외이고.. 데이터로 들어가는 부분은 제 영역이 아니니까 패스하고, 일단 UI 정도만 해야되기 때문에 분석을 하는 부분에서 골똘히 생각해보기로 했습니다. 그런데 소스를 살펴보니 rect 태그가 보였다. 일단, 아직 배운 적이 없어서 이번 주말에는 붙여보기 위해서는 조금 살짝 공부를 하고, 그래프를 넣어보려고 합니다. 이번 주말에도 맨땅 삽질은 계속될듯.. 예상됩니다. HTML 2020. 10. 30.

• 

  뒤로가기 액션에 대한 피드백 최근 데스크탑 웹페이지 작업을 하면서 뒤로가기 버튼을 넣으면 조금 사용자가 편리하지 않을까 생각하고 고려하고, 심오하게 생각하고, 또 생각하고 하다가 넣게 되었습니다. 그런데 뒤로가기는 어떻게? href에다가 뭘 넣어야하지? 엄청 고민하고 있었습니다. href에 인라인 문구만 기입하면 끝나는 부분이어서 간단했지만, 이 과정을 습득하는데에도 또 폭풍 검색을 하고 말았습니다. 1. href에 그대로 코드 작성 뒤로가기 일단, 제가 처음에 열심히 찾아본 방법 중에 깔끔하고, 많은 어려움이 없이 이해가 바로 되었던 코드였습니다. "오호.. 히스토리 빽~ (history.back() ) 이방법으로 하면 끝이구나" 하고 말이죠! 이게 맞는지 아닌지 테스트 해봐야되니까, 일단 테스트! 오호! 성공적 이었습니다. 그럼.. JavaScript 2020. 10. 29.