본문 바로가기
javascript 기본 표현문 자바스크립트의 사용 빈도수는 아주 오래전 내가 제일 처음 웹을 접했을 때 보다는 상당히 높다. 거의 js만으로 이루어진 페이지도 있고 ajax같은 경우는 거의 필수로 나는 사용하고 있다. 간혹 javascript 와 java를 같다고 생각하는 사람들을 볼 수 있는데 엄연히 완전히 다 른언어이다. if문 같은 경우는 조건이 들어가서 괄호 안의 조건을 만족하거나 할 때 사용을 하게 된다. var i = 5;if( i == 5 ) { 맞으면}else { 아니면.} 그리고 자주 쓰는 경우중에 선언이 안되어있거나 빈값이나 null일 경우 비교할 때도 쓰게 된다. if( z == null { }if( booleanok) { } 참이면if( !boleanok) {} 혹은 참이 아니면.if( booleanok == "..
fotorama 슬라이더 웹사이트를 제작을 하다 보면 한두개 정도의 슬라이더는 반드시 들어가게 된다.대부분은 즐겨 쓰던 슬라이더를 가지고 있기 때문에 두고두고 매 프로젝트마다 기본적으로 설정을 하게 되는데. 꽤 많은 것들을 나도 그동안 제작을 하면서 다양하게 이용을 해보기도 했지만 어느 순간이 되면 쓰던 것만 쓰게 된다. 바쁜 업무나 할 양이 많아서 이기도 하지만 설정에 익숙하고 작업이 빠르기 때문이다. 나도 바쁠때는 기존에 사용하던 슬라이더를 쓰기도 하지만 그렇지 않을 경우엔 뭐 더 좋은게 없나 하고 다른것을 테스트페이지를 만들어서 활용을 해보기도 한다. 기본적인 고유 슬라이더기능만 있는 것도 있지만 그리고 자바스크립트 소스를 볼 줄 안다면 원천소스에서 변형을 해서 넣을수도 있는 부분이지만 기본적으로 캡션기능이 있는 것에 대해..
워드프레스 차일드 테마 워프를 이용하다 보면 타의든 자의든간에 테마를 수정할 경우가 반드시 생긴다.유료로 판매하는 테마들도 그 레이아웃에 그 사진을 넣어서 가장 이쁜것이지 실제로 사서 적용을 하다보면 느낌이 조금 틀려지게 되거나 달라진다. 그렇기 때문에 기본적으로는 style.css를 손대서 바꾸기도 한다. 물론 수정을 할 수 있는 플러그인등을 활용해서 사용을 해도 되지만 나같은 경우는 간편하게 파일로관리 하기 편하도록 차일드로 나눠서 거기서 생성해서 쓰는 편이다. 자식테마를 만드는 이유는 여러가지가 있겠지만 나같은 경우는 그냉 원본으로 쓰다가 간간히 업데이트가 될 때 하고 나면 이전에 적용했던 부분이 날라가서 덮어지는 경우가 몇번 있었기 때문에 그렇게 하고 있다. 작업할때에야 다 기억이 나겠지만 시간이 지나고 이플젝 저플젝을..
반응형 작업시 css 반응형 홈페이지를 작업을 할 경우에는 편리할 경우도 대부분 있지만 가끔씩은 문제가 발생하는 경우도 있다. 특히 슬라이드 풀사이즈 이미지일 경우 pc에서는 가로가 긴 와이드형태의 이미지를 쓰지만 모바일로 되면 줄어들고 와이드의 이미지도 비율적으로 줄어들기 때문에 현저히 작은 배너가 되어 버린다. 그렇기 때문에 모바일인지 피씨인지 디바이스 구별을 하여 모바일이라면 모바일에 맞는 배너를 작업을 하는게 보통의 경우다. 메인 슬라이드나 대형 배너인 경우 그렇게 되고 그게 아닌 이미지나 디비전이라면 가로 크기에 맞게 엘리먼트가 개행이 되거나 줄어들어야 한다. 고정 width, height를 가지고 제작을 해서 pc 타켓이 되었다면 모바일일 경우에는 대부분 width:100%로 해당 엘리먼트를 고쳐주면 대부분이 해결..
내가 자주쓰는 자바스크립트 라이브러리 작업을 하다보면 세세한 기능 구현은 코드가 각각 다를 수있지만 비슷한 부분도 많이 있다. 그래서 보통은 그러한 것들을 모아서 유틸.js에 모아놓기도 한다. 이렇게 하는 이유는 그 기능을 구현하기 위해서 한번 이전에 해봤다면 또 자주 쓴다면 만들어두고 사용만 하면 됙 때문에 구현해야 하는 시간을 줄일 수 있다. jquery는 필수로 쓰고 가끔 쓰는 것은 template js등을 쓰기도 한다. 루프문에서 태그를 생성하기 귀찮을 때 알아서 돌아갔으면 좋겠고 몇가지 변수나 경우의 if문을 넣을 수 있으면 되는 딱 그쯤만 되면 되는것이기에 쓰기도 하지만 근래엔 쓸 일이 없다. 슬라이드류는 boxslider, OwlCarousel2나 slide.js 그냥 빨리 구현을 할 수 있는 것을 쓰고 그 때 그때 마다 상황이..
css3 애니메이션 참조 플래시 등으로 애니메이션을 할 경우가 나같은 경우는 거의 드물다. 그렇지만 애니메이션을 해야 할 때가 있거나 아이콘이 움직이거나 케릭터가 동작을 간단하게 하기 위해서는 필요한데 css3에 있는 기능을 참조 하면 된다. 코드 읽을 줄 알면 그렇게 어려운 내용이 없고 설명이 영어라서 영어울렁증이 있더라도 다 이해가 된다. 애니메이션이 다 그렇듯이 keyframes와 실제 속성들을 조절하거나 설정하는 부분으로 대충 나뉜다. 기본적인 내용과 그 내용에 대한 예제부분을 바로 볼 수 있기 때문에 공부하거나 이해하기 좋다. https://www.w3schools.com/css/css3_animations.asp 꽤 유명한 사이트로 이밖에도 css 속성에 관련된 부분이 방대하게 있으므로 이전에는 정말 많이 가서 공부했..
여러가지 svg 애니메이션 정리 된곳 최근에 들어서 svg로 부드럽게 animation 하는 부분에 대해서 관심이 많이 생기게 되었다. 이전이라면 필히 플래쉬등을 써야 했겠지만 요즘은 이러한 스크립트나 html5로 인해서 엘리먼트 애니메이션이 좋은게 너무 많은것같다. 크로스 브라우저 문제때문이라도 쓰고 싶었지만 참았던 부분들이 많이 있는데.. 나 같은 경우는 경우가 심한 브라우저는 타켓브라우저에서 빼버리는게 정신건강에 좋기 때문에 크게 신경을 쓰지 않는다. 그래도 가끔 업무적으로 꼭 맞춰야 한다고 요구사항이 있을 때는 아쉽게도 빼야 하는 부분들이 있기는 한데 뭐 그것은 상황에 따라 그때 그때 다른 부분이니... 아무튼 30가지의 svg 애니효과를 잘 정리를 한 곳을 보게 되었다. 주로 자주쓰는 보더 애니메이션이나 화살표등이 가만 있지 않고 ..
svg 햄버거 메뉴 애니메이션 효과 모바일 홈페이지는 이제 무조건 만들어야 하는 경우이기 때문에 왼쪽 위 혹은 아래쪽에 햄버거 메뉴는 무조건 들어간다. 그리고 정적으로 멈춰 있는 부분인 경우도 쓰지만 가끔씩 애니메이션 효과를 주고 싶을 경우가 있는데 해외 사이트를 잘 찾아보면 천재같은 누군가가 만들어놓은 멋진 효과들이 있다. 그중에서 찾은 결과다. X로 변하는 부분 중간에 애니메이션이 들어간다. html 코드다 css 코드다. 이부분은 실제 적용을 할 경우에 알맞게 변경을 하면 되겠지. body,html,div { background: #292a38; margin: 0; padding: 0; width: 100%; height: 100%; text-align: center;}svg { width: 200px; height: 150px; c..

티스토리툴바