본문 바로가기

전체 글128

[CSS] Transition 속성과 사용법 [ Transition 기본문법 ] transition: transition-property | transition-duration | transition-timing-function | transition-delay * transition-property : css 속성을 지정함.* transition-duration : 트렌지션 실행 시간. 기본값 0s * transition-timing-function : 트렌지션이 실행되는 동안 속도 설정* transition-delay : 언제 트렌지션을 시작할지 지정 *일반적으로 이렇게 한줄로 사용한다 : transition:all 0.3s ease 0; transition: 속성명 시간 효과 딜레이시간; [ Transition 속성 ] 기본적으로는 all 을.. 2017. 3. 31.
[자바스크립트] 고정된 배경을 패럴랙스 하는방법 일반적으로 CSS로 배경을 고정시키게 할땐 아래와 같이 간단하게 코드를 할수 있습니다. 하지만 뒷배경이 고정은 되지만 몬가 입체적으로 고정된거 같은 느낌은 없죠.... 그래서 자바스크립트로 좀 추가하여 마우스를 드래그 할때 고정된 뒷배경이 같이 살짝움직이도록 움직임을 줘보았습니다 기본인 제이쿼리를 연동한 다음 현재 스크롤의 위치를 scrolled 라는 변수에 저장하여백그라운드 이미지가 있는 aa 라는 클래스에 백그라운드 위치값을 현재스크롤 값에서0.4를 곱하여 미묘하게 움직이도록 했습니다. ^^ 2017. 3. 29.
[CSS] Font-face 사용방법 일반적으로는 웹폰트를 사용하지만, 서버에 직접 폰트를 설치후 해당폰트를 연결할때 사용합니다. EX) #iefix 를 뒤에 붙힌이유는 IE6~8 의 경우 format() 구문을 인식못해 다른 url 로 된 파일을 다운닫는경우가 있습니다.eot 파일 뒤에 ?#iefix 라는 쿼리스트링을 붙힘으로써 이후 문자들을 번역하는것을 멈추게하여 다른 파일의 다운로드 요청을 막는 일종의 꼼수 입니다. 우리나라의 웹 특성상 IE를 버릴수가 없네요 ㅠ 추가적으로 온라인으로 폰트를 변환해주는 사이트입니다.사용해보니 유용하더라구요.. https://onlinefontconverter.com/ 그리고 구글에서 폰트를 다운받을수 있는곳인데 이곳도 괜찮음^^ https://google-webfonts-helper.herokuapp... 2017. 2. 3.
[CSS] Map code 생성해주는 프로그램 일반적으로 이미지위에 좌표를 찍고 링크를 걸어야 하는 일이 종종 생깁니다. 주로 그림판을 이용해서 좌표를 알아내서 코딩을 하지만, 좀 복잡한경우도 많이 있기때문에잘 사용을 안하게 되는경우가 많습니다. 하지만 해당프로그램을 사용해서 이미지를 연다음 좌표를 그리면 자동으로 HTML 코드를 생성을 해줘서 Ctrl + C 와 Ctrl + V 를 눌러서 사용하면 되는 아주 편한 프로그램입니다. 몇번만 사용해보면 금방 알수 있습니다 ㅎㅎ 2017. 2. 1.
[자바스크립트] 정규 표현식 정규표현식은 소프트웨어에 따라서 방식이나 지원 범위가 다를 수 있습니다. ^TheThe로 시작하는 문자열of despair$of despair로 끝나는 문자열^abc$abc로 시작하고 abc로 끝나는 문자열 (abc 라는 문자열도 해당됨)noticenotice가 들어 있는 문자열 ab*a 다음에 b가 0개 이상 (a, ab, abbb 등등)ab+a 다음에 b가 1개 이상 (ab, abbb 등등)ab?a 다음에 b가 있거나 없거나 (ab 또는 a) ab{2}a 다음에 b가 2개 있는 문자열 (abb)ab{2,}a 다음에 b가 2개 이상 (abb, abbbb 등등)ab{3,5}a 다음에 b가 3개에서 5개 사이 (abbb, abbbb, 또는 abbbbb)*, +, ?는 각각 {0,}, {1,}, {0,1}과.. 2016. 12. 13.
[자바스크립트] 마우스 휠 이벤트를 활용하자 마우스 휠을 이용하여 이벤트를 만드는경우가 있습니다. 예를 들면 상단에 탑 배너영역이 있는데, 해당 배너영역에서 마우스 휠을 조작할경우아래로 휠을 하면 아래원하는 위치로 이동을 하고 위로 휠을 돌리면 상단으로 올라가게끔 하는 이벤트를 작성해보았습니다. 우선 마우스 이벤트를 활용하기위해 jquery mousewheel 이라는 이벤트를 활용해야했습니다.하지만 파이어폭스에선 mousewheel 인식을 못하기 때문에 파이어폭스에서 인식이 가능한 DOMMouseScroll 이벤트 2개를 동시에 걸어주기위해On 이벤트로 잡아주었습니다. 마우스 스크롤을 아래로 하는지 위로 하는지 알기위해 e 라는 이벤트생성자를 만들어객체를 확인해보니 originalEvent객체 안에 detail 이라는 객체가 휠을 아래로 돌리면 3.. 2016. 12. 13.
[MS-SQL] Datetime Like 함수로 검색하기 Like 패턴 검색시 mm [d]d yyyy hh:mm[AM or PM] 패턴으로 검색해주시면 됩니다. datetime 인 데이터를 convert (varchar,registerDate) 해주시면 패턴을 알수 있습니다. 주의하실점은 일자일 경우 10일 이하인 9일 같은 경우 앞에 스페이스를 두개 넣어 검색하셔야 한다는 점입니다. _를 스페이스라 하면 5월 2일 검색시.... like '05__2%' 로 하시면 됩니다. 다만 초검색은 Like 검색으로 안됩니다. ms(미리세컨) 까지 검색시는 Between 검색 또는 convert(char(23),getdate(),121) 로 해 주셔야 합니다. 다음을 실행해 보세요 --------------------------------------------------.. 2016. 11. 29.
[CSS] 三 모바일 메뉴 버튼만들기 三 이런모양을 CSS로 만들때 주로 사용하는 방법입니다. 반응형 디자인 할때 모바일 모드에서 많이 사용합니다. See the Pen 모바일 아이콘 by DeokHwan (@deokhwan) on CodePen. 2016. 11. 23.
[Jquery] 패럴랙스 보통 백그라운드 이미지를 고정시키고 싶을때 사용하는 CSS는 아래와 같습니다. background-image: url('w3css.gif');background-repeat: no-repeat; background-attachment: fixed; 그런데 뒤에 고정된 백그라운드가 마우스 드래그할떄 미묘하게 움직이고 싶다면 별도의 플러그인이 필요합니다. 그럴때 사용하기 유용한 플러그인입니다. 사용방법은 간단합니다.아래와 같이 제이쿼리 및 플러그인을 추가하고난뒤 제이쿼리로 선택자를 선택한뒤 원하는 값을 주면 됩니다. 자세한건 첨부파일 index.html 파일과 css를 열어서 확인하면 좋을꺼 같습니다. 플러그인을 사용하는 방법도 있지만 제가 직접 작성한 부분도 있습니다.해당 부분을 보고 싶으시면 아래 링크를.. 2016. 11. 23.