All
[자바스크립트] PC, MOBILE 구별하기
2020.12.01 댓글에 이렇게 써져 있어서 참고할겸 캡쳐했다. 어차피 실제 사이트에서는 저런 소스 안쓴다. 개발자가 알아서 조절한다. 단지 저런게 있구나. 하고 알 겸 쓴건데. 환장한다며 쓰지마라고 누가 만들어서 퍼트리니 마니 그러니까 혹시나 내 블로그 보고 따라 쓸 것 같아서 맨위에 올려둔다. 알아서 걸러 보길.. * 스크립트로 PC와 MOBILE 구별 할 때. "win16|win32|win64|mac|macintel"; Win16 : 16비트 윈도위기반 컴퓨터 Win32 : 32비트 윈도위기반 컴퓨터 Win64 : 64비트 윈도위기반 컴퓨터 Mac : 매킨토시컴퓨터 MacIntel : 인텔CPU 를 가진 매킨토시 컴퓨터 // 모바일 위주로 구별 var mobileKeyWords = new Arra..
[이슈노트] iOS 이슈 모음 #2 (img display:none)
작업 중 마지막 단계인 기기별 확인하기! 메인 컨텐츠를 화면 정 중앙에 맞추고 싶다는 기획자의 요청에 의해 높이를 100vh로 맞추고 컨텐츠는 absolute로 띄었다. 다른 폰에서는 괜찮았는데, 갤럭시 폴드 앞 화면에서 이슈가 생겼다. 메인 컨텐츠에 텍스트 입력 부분이 있었는데, 이 부분에 텍스트를 입력하려고 하자 자판이 올라오면서 자판을 뺀 높이가 100vh로 먹히면서 컨텐츠 위치가 엉망이 되어버렸다. 그래서 어쩔 수 없이 뒤에 투명 이미지를 놓고 컨텐츠를 올렸다. 하지만 탭에서는 컨텐츠에 absolute를 뺀 상태였어서 img를 display:none 시켜야 했었는데, 이게 다른 기기에서는 괜찮은데 아이패드 6세대에서 이미지에 display:none이 안먹는거다... 도대체 이해가 안되서 아이디도 ..
[CSS] CSS Framework 종류
관리자 페이지나 사이트 제작을 위해 혹은 다양한 CSS/HTML 스타일을 공부하기 위해 다양한 CSS 프레임워크를 배워두면 좋다. 1. 부트스트랩 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, ..
[자바스크립트] 자바스크립트 스터디
* 패스트캠퍼스 자바스크립트 강의 내용 *자바스크립트 - 스크립트 언어 - 인터프리터 언어 - 웹브라우저에서 주로 사용 - ECMA script *실습환경 만들기 - 크롬과 node.js 설치 *Expression - 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다. *Statement - 하나 혹은 여러 개의 표현식이 모여 문장을 이룬다. - 모든 표현식은 문장이 될 수 있다. - (보통) 문장의 끝에는 세미 콜론을 붙인다. - 조건문(if)과 반복문(for)도 문장이다. 이 경우 마지막 } 뒤에 세미콜론을 붙이지 않는다. => 표현식이 모여 문장이 되고 문장이 모여 만들고자 하는 프로그램이 된다. *키워드와 예약어(keywords & Reserved Words) 키워드 - 자바스크립트에..
[제플린] 퍼블리셔가 제플린 사용하기
사용환경 : window10 제플린을 쓰는 이유 - 이미지 슬라이스 사용이 편리하다. - 텍스트 선택시 폰트 정보가 다 나온다. CSS로 나오는데 필요한 부분만 셀렉해서 사용하는 것을 추천. - 좌표값을 다 알려준다. 제플린의 특징 - 프로젝트 1개는 무료 - 스케치와 psd를 활용할 수 있다. - 개발자가 스케치를 활용 할 수 없을때 사용한다. - 프로젝트 디바이스 선택이 중요하다 - IOS선택 - Untitle에 프로젝트 이름 입력 - 스케치, XD, 피그마, 포토샵을 볼 수 있다. - 모래시계는 작업 히스토리다. - 안드로이드 선택 > 우측 프로젝트 명 아래에 안드로이드 클릭하면 해상도 설정할 수 있다. 제플린 쓰는 법 - 제플린 다운 https://zeplin.io/ Zeplin Connected..
[CSS3] display: flex 정리
감싸는 부모 요소인 container와 각각의 items가 필수이다. container와 items에 적용하는 속성이 구분되어 있다. container => display, flex-flow, flex-direction flex-wrap justify-content align-content align-items items => order flex flex-grow flex-shrink flex-basis align-self container display display : flex display: inline-flex flex-flow : 주축 여러줄묶음 flex-direction : items의 주 축(main-axis)을 설정 flex-direction : row (items를 수평축으로 표시) fl..
[자바스크립트] 쿠키 굽기
닫기 쿠키 사용해서 이벤트 제어하기. setCookie로 쿠키를 설정하고 getCookie로 쿠키를 굽는다. 쿠키 이벤트를 줄 태그에 onclick을 추가. 함수로 제어한다. 위 소스는 토글 이벤트에 쿠키를 적용한거다. 카카오톡 아이콘이 처음엔 보여지고 닫기를 누르면 다시 오픈을 누르기 전까지 계속 닫힌 상태여야 한다. 그러다가 다시 오픈을 하면 또 오픈한 상태로 유지한다.
[플러그인] 이미지 확대 플러그인 Zoomer
https://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/ jQuery Zoomer Plugin Examples www.jqueryscript.net 이미지를 확대, 축소 하고 마우스로 드래그하면 이동이 가능한 플러그인. 간단한 지도 이미지에 사용하면 좋다. 간단한 예약 사이트를 작업 하는데 썸네일을 클릭하면 팝업이 뜨고, 버튼을 클릭하면 팝업 내 이미지가 확대되고 축소도 되면서 드래그도 가능해야 했다. 처음에는 백그라운드 이미지를 넣어서 +버튼을 누르면 백그라운드 이미지 사이즈를 늘리고 -버튼을 누르면 백그라운드 이미지 사이즈가 줄어드는 식으로 생각을 해서 스크립트를 짰다. 하지만 이런저런 변수로 인해 플러그인을 찾아 보았고 그 ..
[CSS] 기기별 미디어쿼리
디바이스별 미디어 쿼리 정리속성으로 구분 /* 스마트폰 (가로/세로): */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* 스마트폰 (가로): */ @media only screen and (min-width : 321px) { /* Styles */ } /* 스마트폰 (세로): */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPad (가로/세로): */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {..
[자바스크립트] 스코프
스코프란 '변수가 스크립트 안의 어떤 곳에서 참조할 수 있는가'를 결정하는 개념이다. - 함수의 바깥에서 선언한 변수 => 글로벌 변수 - 함수의 안에서 선언한 변수 => 로컬 변수 그러나 var 명령을 사용하지 않고 선언된 변수는 모두 글로벌 변수로 간주한다. 때문에 var 명령으로 정의된 변수는 정의한 장소에 따라 변수의 스코프가 정해진다. 즉 로컬 변수를 정의하려면 반드시 var 명령을 사용해야 한다. 위와 같은 이유로 괜한 혼란의 소지를 만들지 말고 모든 변수에 var를 붙인다. 로컬 변수의 유효범위는 어디까지인가? var scope = 'Global variable'; function getValue(){ console.log(scope);//1 var scope = 'Local variable..