콘텐츠기획자의 IT입문서

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있으므로 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다! // no error let message = "hello"; message = 123456; 따라서 자바스크립트는 동적 타입 언어이다. *동적 타입 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어. 자바스크립트에는 10가지 기본 자료형이 있다. 자료형은 크게 원시 자료형과 참조 자료형으로 나뉜다. *원시 자료형 : 한 가지 값만 표현할 수 있는 자료형. *참조 자료형 : 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있는 자료형. 원시 자료형 1. 숫자 Number = 정수 & 부동소수점 숫자 +) 숫자형엔 일반적인 숫자 ..

변수 LET 변수란, 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 따라서 변수명은 간결하고, 명확해야 하며, 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다. 자바스크립트에서 let 키워드를 사용해 변수를 생성한다. (과거에는 'var'을 사용했다.) 변수명을 정하기 위한 규칙 userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요. 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요. 최대한 서술적이고 간결하게 명명해 주세요. data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용..

jQuery 쓰는 것도 카페24 쓰니까 click 이벤트로 css 바꿔주는 정도만 쓰다보니 자바스크립트 배웠던 게 기억 속에서 희미해져서.... ^_ㅠ 복습 차원에서 다시 차근차근 공부해본다! 스크립트 HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용해야 한다. 스크립트가 길어지면 별개의 분리된 파일로 만들어 저장해야 한다. 그 이유는 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다고 한다! 예를 들어, 여러 페이지에서 동일한 스크립트를 사용하는 경우 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용하기 때문에 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다. 문 (St..

타임세일 이벤트는 많은 쇼핑몰에서 진행되고 있는 이벤트 중 하나! 위의 디자인처럼 구현은 하지 않았지만 비슷한 형식으로 타임세일을 구현해보았다. 매일 특정시간대에 진행되는 타임세일 이벤트이기 때문에 카운트다운 하는 시계를 만드는 코드에 추가적으로 if else 문을 통해 시간 조건을 걸어주었다. 1. 특정 시간대만 상품이 노출되게 한다. 2. 이벤트 진행 시간대가 아니라면 1) 이벤트 진행 전 - 상품에 blur 필터를 추가하여 정보를 가리고, "3시 OPEN" 문구 노출 2) 이벤트 진행 후 - 상품에 blur 필터를 추가하여 정보를 가리고, "내일 3시에 만나요" 문구 노출 function timeSale() { var nowTime = new Date(); var openTime = new Date..

UI/UX 디자인에 관심이 있다면, 혹은 해당 직무에 취준 중이라면 추천하는 인스타그램 계정이 있다. 인스타그램은 사람들이 많이 사용하는 SNS로 일상속에 녹아들어있다. 나는 매일 아침 출근길에 인스타그램을 보는 편이었다. 그래서 공부를 해야겠다라는 마음이 아니어도 인스타그램 계정으로 정보를 습득하는 것이 자연스럽게 아침에 확인하게 되어 습관을 형성해주기 좋다 :) 1. DESIGNUS___ https://www.instagram.com/designus___/ 로그인 • Instagram www.instagram.com 이런 식으로 매일 오전 UI/UX 관련된 토픽을 A/B 테스트 형식으로 올려주신다. 피드 뿐 아닌 스토리로도 올려주셔서 투표 결과를 알 수 있다! 실제 UI/UX 업계에 계신 분들의 의견..

현재 카페24를 이용하여 쇼핑몰을 구축중인데 기존에 제공되는 카테고리 모듈의 경우 클릭을 해도 페이지만 이동할 뿐 아무런 css, js적인 변화가 없다. 그래서 현재 페이지가 어디인지 명확하게 소비자에게 인지되지 않을 것 같아 디자인을 추가하기로 함! 클릭시 addClass를 해주게 되었을 때 클릭 후 리다이렉트 되므로 Class가 다시 사라져서 ㅠㅠㅠ 현재 페이지의 URL에 따라 addClass가 되도록 코드를 수정했다. HTML 홈 {$name|cut 25} {$name|cut 25} jQuery var url = $(location).attr('href'); var home = 'https://홈페이지 주소/'; var no = url.substring(url.lastIndexOf('=') + 1)..

네이버페이 연동을 위해서 사업자정보를 넣어야 한다. (없으면 검수 과정에서 피드백이 오니 빠르게 대응해서 재검수 요청하면 됨!) 그중 사업자정보확인이 가능하게 구현해야하는 것이 필수인데 스타일난다 쇼핑몰의 푸터를 보면 이런 식으로 들어가 있다! 아래 링크의 개발 가이드에서 상세하게 알려주니 코드를 그대로 복붙하면 끝!! https://www.ftc.go.kr/www/bizCommList.do?key=3765 등록현황 - 공정거래위원회 본자료는 전자상거래시장에서 소비자가 정확한 사업자 정보를 가지고 안전한 거래를 할 수 있도록 전국 시,군,구에 신고된 통신판매업자의 신원정보를 전자상거래소비자보호법 제12조4항 에 따 www.ftc.go.kr HTML [사업자정보확인] SCRIPT *물음표 부분에 사업자번호..

IMG MAP 이미지의 부분마다 링크를 다르게 연결하고 싶다면 을 사용해주면 된다. 이미지 태그에는 usemap="#맵핑명" 을 추가해주고 맵 태그에는 name="맵핑명" 으로 연결해주면 적용이 된다 :) 좌표는 어떻게 구할까? 라고 한다면 포토샵, 그림판과 같은 이미지 에디터 프로그램을 통해 구할 수 있다. 포토샵으로도 좌표를 구해봤지만 이상한 곳으로 좌표가 찍히길래 그림판으로 좌표를 찾아서 적용했더니 정상 작동한다! ​ 참고로 서치하다 image map 에디터 사이트를 발견해서 나중에 쓸 일 있을까 해서 기록해 둔다. http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu 반응형 MAP 좌표 기준이기 때문에 ..