Web
[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을 추가. 함수로 제어한다. 위 소스는 토글 이벤트에 쿠키를 적용한거다. 카카오톡 아이콘이 처음엔 보여지고 닫기를 누르면 다시 오픈을 누르기 전까지 계속 닫힌 상태여야 한다. 그러다가 다시 오픈을 하면 또 오픈한 상태로 유지한다.
[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..
[자바스크립트] 함수를 정의할 때 주의할 네 가지
1. return 명령은 도중에 개행(표시 위치를 다음 행의 동일 위치로 이동시키는 동작) 하지 않는다. var getTriangle = function(base, height){ return// X base * height / 2;// X return base * height / 2 // O } + 위와 동일한 이유로 다음과 같은 문장에서도 명령 직후에 개행을 해서는 안 된다. - 레이블문과 함께 기술된 break / continue 명령 - throw 명령 - ++, - 연산자(후치) 특히 복잡한 루프인 경우는 return 명령 이상으로 문제를 발견하기 어렵게 될 가능성이 있다. 2. 함수는 데이터형의 하나다. Java Script에서 '함수는 데이터형의 일종'이다. 함수를 정의한다는 것은 실은 '변..
[gulp] gulp 시작하기
퍼블리셔로 일을 하다보면 마크업이 전부가 아니게 된다. 이것 저것 신경써야 할게 많고, 내 머리에서 나오는게 충분하지 않기 때문에 다양한 사이트의 힘을 빌려야 할때가 많다. 그럼 매번 작업을 하고 수정을 할때마다 똑같은 작업을 반복(예를 들어 css minify나 scss를 css로 변환하던가 하는..)해야 하는 이 번거로움을 어떻게 줄일 수 있을까? gulp를 사용해서 초기에 셋팅을 해놓으면 알아서 변환이 된다. 나도 사용안해봐서 이게 얼마나 편하고 좋은지는 모르겠다. 이제 써봐야지 싶어서(반강제적으로) gulp를 사용하기로 했다. 우선gulp를 작업 환경을 구축해야한다. 1. Node.js 다운받기 10.16.0 LTS를 다운받는다. 나는 react 때문에 미리 다운받았기 때문에 패스~ 2. git ..
[React] 리액트 작업환경 준비하기
* window환경입니다. * 다운받을 프로그램들 Node.js 다운받기 10.16.0 LTS를 다운받는다. Yarn 다운받기 npm에 이미 익숙하다면 생략가능 git for windows 다운받기 node 생성할 때 사용 VS Code 다운받기 에디터 프로그램. * 새 프로젝트 만들어보기 git Bash를 열어서 다음 명령어를 입력한다. $ npx create-react-app begin-react 입력하고 좀 기다리면 begin-react라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다. 생성이 끝나면 cs 명령어를 사용하여 해당 디렉터리에 들어간 다음 yarn start 명령어를 입력한다. $ cd begin-react $ yarn start 그러면 http://localhost:3000/..
[CSS] background-attachment:fixed; parallax에 최적화
https://jsfiddle.net/Kimara/fh031Lcx/6/ background-attachment scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 이미지가 움직이지 않는다. parallax에 최적화! local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. background-attachment 배경 이미지의 스크롤 여부를 결정하는 CSS이다. parallax 효과를 낼 때 사용하면 좋다. 애증의 IE에서도 사용 가능! 하지만 IE에서 스크롤을 내리거나 키보드로 내리면 이미지가 덜거덕 거린다. 세..
[SVG] svg stroke animate
CSS 사용버전 ▼ https://jsfiddle.net/Kimara/v7snm2wf/ svg stroke - JSFiddle jsfiddle.net 플러그인 사용버전 ▼ https://jsfiddle.net/Kimara/90x5qb74/7/ Edit fiddle - JSFiddle jsfiddle.net SVG를 이용해서 stroke 애니메이션 효과를 주었다!! CSS로 구현 가능하지만 IE에서 작용이 안되는 단점이 있다.ㅠㅠ IE를 버리지 않는 이상 animate효과를 크롬에서만 볼 수 있다는 뜻인데.. 하지만 세상엔 천재들이 많고요? 구글을 뒤지니 역시 제이쿼리 플러그인이 있다! 내가 쓴건 jQuery DrawSVG 플러그인 인데, 이건 윈도우 스크롤을 할때 애니메이션이 발생하게 할수도 있고, 처음..
[VUE] 조건부 렌더링
조건부 렌더링 v-if #객체 구문클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.일반 class 속성과 공존할 수 있다.예제보기