web sprit

문제점 Swiper js를 사용하여 모바일의 슬라이드를 만들어 보았다. 문제는 스크롤 시 반복되는 사로 슬라이드가 있는데 스크롤을 위에서 아래로 내리고 다시 위로 올리면 슬라이드를 조작하는 nav 버튼이 사라져서 안보인다는 것이 문제다. 안보여도 누르면 기능은 동작한다. 해결방법 z-index문제일거라면 큰 오산이다. 이미 z-index의 값은 슬라이드 움직이는 리스트보다 nav가 더 크게 잡혀있었다. 검색을 하다가 우연히 발견한 크롬fixed 버그에 대한 내용이다. 크롬에서 fixed를 사용하면 사라지는 버그가 있다고 한다.(?) 우선 한번 그대로 아래와 같은 내용을 넣었다. .target{ -webkit-backface-visibility:hidden; -webkit-transform:translat..

a링크를 비활성화 하는 방법은 javascript나 jQuery 로 비활성 하는 방법이 있지만 css 속성을 통하여 비활성화 할 수 있습니다. css 를 이용하는것을 권하는 이유는 가볍게 무거움을 덜 뿐 아니라 특정 상태였을때 링크를 활성화하고 비활성화 하는것에 class 추가 또는 제거를 통해 가능하기 때문이죠. 방법은 매우 간단합니다. 아래와 같이 적용해 주세요. 네이버 바로가기 href 에 네이버로 연결할 수 있게 링크를 걸어 주었지만 실제 웹으로 화면을 확인하고 눌렀을때 네이버로 링크를 가지 않는것을 확인할 수 있습니다. pointer-events 의 속성으로 none 말고 다른속성값을 개발자모드로 확인해 보았습니다. 생각보다 여러가지 속성을 가지고 있네요~ 속성값의 내용은 여기서 다루진 않고 한..

반응형 사이트를 작업하면서 생긴 이슈입니다.iframe을 모바일에서 스크롤 안되는 문제가 있었는데특히 사파리(아이폰에서 안된다능....)에서 안된다는 이슈가 있었습니다. 특정 영역 안에 iframe을 넣으면 스크롤이 안될뿐더러 모바일 화면에서 영역을 벗어나 넘치는 현상입니다. 구글신(?)의 힘을 빌려 서치하던 중 여러가지 해결 방법이 있었는데제가 잘못 적용한것도 있을 수 있지만 완벽하진 않았습니다. 그래서 조금 수정해서 올려봅니다.HTML123 Colored by Color Scriptercs SCSS1234567891011.iframe-wrap{ border: 1px solid #d6d6d6; height: 150px; overflow: auto; -webkit-overflow-scrolling: to..

가끔 사용하는데 매번 까먹어서 블로그에 정리해 봅니다. background-origin 속성은 배경의 이미지의 위치를 처음에 어디에 설정할 것인지를 정해줍니다. 정식 설명은 무시하고 내가 사용해본 결과 그렇습니다. 속성의 값으로 다음과 같습니다. 속성값 설명 padding-box 기본값 border-box 배경이미지의 시작을 보더선에서 시작 content-box 배경의 시작을 패딩(padding)의 안쪽에서 시작 initial 기본값으로 설정 inherit 부모요소에서 상속받는다. 사용에 대한 화면 확인은 w3schools 에서 확인하면 됩니다.참고 : https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin

알고 보면 엄청 단순하지만 막상 이론적으로 머리가 안굴러가는 현상.... 정말 단순하지만 정리해 봅니다. 우리가 반응형 사이트를 만들때 em또는 rem 단위로 font size를 작업합니다. em이나 rem 같은 경우는 유동적이라 반응형이나 모바일에 사용하고 있습니다. 간단하게 em과 rem을 설명하자면em은 부모요소에게 영향을rem은 최상단 부모요소(html)에게 영향을 받습니다. em은 부모요소에 12px의 폰트사이즈가 적용되어 있다면1em은 12px 입니다. 그럼 2em은 24px 이고요. ㅎ rem은 부모요소에 12px로 적용하여도 부모요소에 영향을 받는 것이 아니라최상단 부모요소(html)에게 영향을 받기 떄문에html 태그에 16px로 적용되어 있다면1rem은 16px이고 2rem은 32xp ..

CSS3 기술인 flex 에 관한 정리를 하려 합니다. flex를 사용하기 위하여 크게 감싸고 있는 부모요소에 적용해야 할것과자식요소에 적용할 부분을 나눠서 설명하도록 하겠습니다.우선 기본코드는 아래와 같습니다.HTML123456 cs CSS123456789101112131415161718192021222324252627282930.conbox{ width:500px; height:300px; -ms-display:flexbox; display:-webkit-flex; /* Safari */ display:flex; -webkit-flex-flow:row-reverse wrap; /* Safari 6.1+ */ flex-flow:row-reverse wrap;}.conbox div{ -webkit-fle..

일반적으로 form 요소의 customize를 추천하지도 않고 사용하고 싶지도 않습니다. 이유는 브라우저별 모양이 너무 재각기이고 이러한 폼요소는 기본적으로 최소한의 꾸밈으로 사용하는 것이 디바이스별 사용성에도 좋은듯 합니다. 대부분 background 이미지를 이용하여 스크립트로 클래스 제어를 통해 form요소를 customize 하는 것으로 알고 있습니다. 지금 알려드릴 방법은 css를 이용한 방법이며 스크립트를 사용하지 않습니다. 그리고 브라우저는 IE를 기준으로 IE9 이상 잘 나오고 있습니다. 만약 더 하위버전을 맞추고 싶다면 그때 background 이미지를 이용하여 스크립트를 사용하는 방법말고는 생각이 나질 않네요. 제가 만든 소스를 보고 한번 그대로 가져다 확인해 보세요 정말 괜찮은 방법이..

웹페이지에 들어가면하드코딩 되어진 글씨 영역에 마우스를 대고 드래그하여 복사를 할 수 있다. css 에서는 드래그를 막아주는 속성이 있습니다. 그렇다고 해서 완벽히 차단은 아니고,속성을 적용하지 않은 곳에서 부터 드래그 한다면 표시는 안나더라도 복사할 수 있다고 하네요 ^^;;; 그래도 실전에 필요할 수 있으니 꼭 참고 바랍니다. 저도 플젝을 하면서 한번 사용해 보았네요 . 소스는 다음과 같습니다.123456 -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; cs 설정값은 다음과 같습니다.text – 텍스트를 선택할 수 있습니다.element – 텍스트를 선택할 수 있지만 요소 범위로 제한됩니다..

transform 속성은 크게 2가지로 나눌 수 있습니다. 2D Transforms 와 3D Transforms 입니다. 우선 브라우저 서포트 현황을 알아 봅시다. propertiy 크롬 엣지 파이어폭스 사파리 오페라 2D Transforms 36.0 ~ 4.0 -webkit- 10.0 ~ 9.0 -ms- 9.0 ~ 3.2 -moz- 23.0 ~ 15.0 -webkit- 10.5 -o- 23.0 ~ 15.0 -webkit- 10.5 -o- 3D Transforms 36.0 ~ 12.0 -webkit- 12.0 ~ 10.0 16.0 ~ 10.0 -moz- 9.0 ~ 4.0 -webkit- 23.0 ~ 15.0 -webkit- ※ 정확한 정보가 아닐 수 있으니 문제점 지적 부탁드립니다. ^^ Syntax12..

CSS3 는 아직 표준안에 확정되지 않은 상태에서각 브라우져는 벤더 프리픽스를 제공하여 CSS3 속성을 실험적으로 사용할 수 있게 해 줍니다.브라우져별 벤더 프리픽스는 아래와 같습니다. 웹킷 계열 브라우저 (사파리, 크롬) -webkit- 모질라 (파이어폭스) -moz- 오페라 -o- 인터넷 익스플로러 -ms- CSS3 기본속성기본속성 작성 벤더 프리픽스를 작성할 때 위와 같은 순으로 작성하면 됩니다.그 이유는 추후 CSS3 속성이 표준안으로 변경 되었을 경우 벤더 프리픽스가 붙은 내용은 무시하고 표준 속성만 지원하기 때문 입니다. ex)123456789box{ -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-..