퍼블리셔(프론트)/js12 jquery position()을 활용하여 css 일괄적용 [eq,position활용하여 css 일괄적용] 위 사진처럼 #spot1에는 .detail-wrap과 .m-position, 그리고 사진에는 나와있지 않지만 p태그요소가 들어간다. 그리고 #spot1 ~ #spot7까지 총 7개의 요소에 저런식으로 3개가 동시에 들어가게 되면서 굉장히 비효율적인 아름답지 못한 코드가 되어감을 보았다. .spot은 좌우 영역에 나눠져서 들어가게 되는데 좌우에 들어가는 css를 1번만 지정해주면 알아서 각 요소별로 위치에 따라 css를 적용하도록 코드를 구현하였다. 1. 전체 화면의 1/2을 나누어 각 요소 위치가 좌측에 있는지 우측에 있는지 확인한다. var wrap = $(document).width()/2 2. wrap 영역의 위치가 전체화면의 1/2값보다 큰지 작은지.. 2017. 1. 19. 모든 브라우저에서 input값에 숫자만 허용 [모든 브라우저에서 input값에 숫자만 허용] 익스플로러와 크롬 등 모든 브라우저에서 input값에 숫자만 입력받도록 할 경우(연락처, 생년월일 등) 다음과 같은 코드를 사용한다. [tip] 모바일에서는 굳이 javascript를 적용하지 않아도 된다. input type=tel 로 하면 된다^^ 2016. 11. 23. 네이버 아이디 연동 [네이버 아이디 연동] 회원가입을 할때 네이버 아이디로 로그인하는 기능을 구현해보았습니다. 아무것도 모르는 상태에서 시작하려니 조금 막막했습니다 ㅠㅠ 제가 했던 방법을 정리해보겠습니다. 1. 해당 사이트의 오픈 API 정보를 설정한다. API를 사용하려면 이용신청을 해야합니다. 애플리케이션을 등록하는데 필요한 정보를 입력해주세요. 저는 웹사이트에서 사용하는거라 웹 애플리케이션 기준으로 정리하겠습니다. 저는 사진처럼 설정해주었습니다. 서비스 URL과 callback URL은 해당 사이트의 링크를 적어주시면 됩니다. 링크 : https://developers.naver.com/register 2. 로그인 폼 설정과 include 파일 연동 로그인에서 사용될 HTML 을 작성해줍니다. a태그는 해당 페이지에 .. 2016. 9. 28. 선택된 체크박스의 value값 가져와 계산하기 [선택된 체크박스의 value값 가져와 계산하기] 생성된 게시판(목록) 에서 선택한 값만 가져와 계산을 하려면 어떻게 해야할까? 1. 선택자를 클릭할때 발생하는 이벤트 생성2. 선택한 선택자마다 반복문을 사용하여 체크되었는지 확인3. 해당 체크박스가 있는 열에서 가져올 데이터 지정 (value값)4. 계산식 생성 $('#chkMaintainAll, .chkMaintain').click(function(){ // 1번 알고리즘 실행 var sum = 0; // 합계 초기화 변수 -> 반복문 밖에서 선언해준다. $('.chkMaintain').each(function(){ // 2번 알고리즘 실행 if ($(this).is(":checked") == true) { // html 에서 선언해준 input ty.. 2016. 9. 2. 이전 1 2 3 다음
