본문 바로가기

전체 글

css :before, :after 가상태그의 활용 점점 모바일과 반응형 사이트의 빈도가 많아지면서 가상태그를 사용하게 되는 경우가 많아졌습니다. 아래와 같이 간단하게 마크업을 했을 경우에 1welcome to designsharpcs css로 :before 가상태그를 넣어줍니다. 12345p:before { content: "hi bro! "; font-weight: bold; font-style: italic;}cs 그럼 아래와 같은 결과화면을 볼 수 있습니다~ 이번에는 :before 가상태그를 이용해 아이콘을 한번 넣어보겠습니다~ 123456789p:before { content: ""; display: block; background: url("http://icons.iconarchive.com/icons/iconsmind/outline/128/A.. 더보기
월미도 밤바리 익사사를 구입하고나서 아직 제대로 어딜 다녀오질 못했는데어제는 마음먹고 상도동에서 월미도까지 달려봤다 새벽 2시라 차도 없고 씽씽 잘 나가고 너무 좋았지만 나이먹고 너무 겁이 많아져서 그런지 매 신호마다 멈춰서 좌우 잘 살피게 된다는... 친구가 선물해준 세나블루투스 덕분에 기분 좋게 밤바리!! 가서 문어구이만 사고 바다보며 잠시 생각에 잠기다 돌아왔다~ 종종 이런 시간좀 가져야겠다~ 더보기
john varvatos 좋은 친구 만나서 이런 향수도 다 받아보네~john varvatos. 좋다~ 더보기
유투브 영상 주소에 사용가능한 옵션 정리 http://spicaryn.tistory.com/23 더보기
유투브 동영상 api를 이용해 제어하는 방법 유투브 영상을 퍼올때 보통은 아래의 이미지처럼 공유의 iframe 소스코드를 복사해서 사용하지만, 자동재생, 음소거 등 다양한 설정을 할 수 없는 부분이 있었습니다. 옵션항목을 제어하기 위해서 유투브 API 코드를 활용할 수 있는데요~ 사용방법은 간단합니다. 유투브 동영상을 재생시켜줄 틀 하나 생성해주세요. ex. 출처 : https://developers.google.com/youtube/iframe_api_reference 더보기
앵커 클릭시 부드럽게 스크롤이동 앵커 01 앵커 02 앵커 01의 내용 앵커 02의 내용 위와 같은 앵커 이동의 소스코드가 있다고 했을 때 좀더 부드럽게 출력할 수 있도록 해보장.ㅋ 더보기
[플러그인] Goto CSS Declaration html 문서작업 중 css 속성을 빠르게 찾아 수정을 할 수 있도록 도와주는 플러그인을 찾아냈다. Goto-CSS-Declaration 출처 : http://webdir.tistory.com/403 우측분할화면에 css를 위치시켜야 하는 불편이 있기는 하지만 이 룰만 지켜서 작업해도 금방 css를 찾아서 수정할 수 있으니 잘만 활용하면 좋은 플러그인이라 할 수 있겠다. 더보기
특정 타겟으로 부드럽게 스크롤 되는 스크립트 기존 앵커는 타겟이 될 요소에 id를 지정하여 href속에서 해당 #id를 넣어 별 문제 없이 진행을 했었다. 그러나 앵커 연결시 다른 요소때문에 가려지는 문제가 생겼다. 헤더영역이 position:fixed로 되어있어서 앵커설정된 부분과 겹치는 것이다! 생각해보면 별 것 아니었는데 참... offset.top 에 fixed잡힌 요소의 높이값만큼 영역을 늘려주고 해결했다. Scroll to target 출처 : http://jewonagency.com/ 더보기