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 말고 다른속성값을 개발자모드로 확인해 보았습니다. 생각보다 여러가지 속성을 가지고 있네요~ 속성값의 내용은 여기서 다루진 않고 한..

모바일에서 input 태그 폼영역을 터치하면 Android 나 IOS 에서 내용을 작성할 수 있는 키패드가 나옵니다. 이 부분을 글자를 적는 키패드가 아닌 숫자만 적을 수 있는 숫자 키패드만 나오게하는 방법이 있습니다. input 태그 작성 시 다음과 같이 작성하면 됩니다. 하지만 다음과 같은 방법은 치명적인 오류가 있습니다. Android에서는 숫자 키패드가 나오지만 IOS 에서는 키패드가 나오지 않습니다. IOS 에서도 똑같이 숫자 키패드가 나오게 하기위해선 다음과 같은 속성을 추가해 줍니다. 위와 같이 적용하면 Android OR IOS 모두 숫자키패드가 나옵니다. 또 한가지 팁 !!! input 의 type 이 number 일때 maxlength를 설정하려고 하면 실제 화면에서는 maxlength..

1. 풀 스크린 화면1cs홈스크린으로 등록하면 사파리 모바일에서 풀스크린으로 시작합니다. 2. 시작 시 화면1cs풀스크린 모드에서 위의 태그로 시작화면을 띄울 수 있습니다. 3. 상태바 없애기1cs풀스크린 모드에서 상태바 조정이 가능합니다. 4. 웹 클립 아이콘12 cs사파리에서 특정 페이지를 홈 스크린으로 만들때 모바일 사파리는 아이콘으로 만들 웹 클립 파일을 해당 웹페이지에서 찾습니다.(파일명: apple-touch-icon-precomposed.png)다른 방법으로는 link 태그로 지정하면 됩니다.

반응형 사이트를 작업하면서 생긴 이슈입니다.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 ..

프로젝트를 진행하다가 input 태그에서 마우스 클릭을 하면 알수 없는 자동완성 목록이 뜨는걸 확인할 수 있었다. 부트스트랩 프로젝트 였는데 이 기능이 부트스트랩에서 지원해주는 줄만 알고 쓸데없이 소스 까보는 불상사를 격어 이렇게 블로그에 정리한다. 우선 자동완성에 대한 부분을 안뜨게 하고 싶다면input 속성으로 autocomplete=off 으로 설정해주면 다시는 안나타는것을 확인할 수 있다.on으로 설정안해도 브라우저에 따라 지원되는 브라우저가 있기 때문에 꼭 자동완성창을 제거하고 싶다면 위의 설정값을 줘야 한다.123 Colored by Color Scriptercs

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 이미지를 이용하여 스크립트를 사용하는 방법말고는 생각이 나질 않네요. 제가 만든 소스를 보고 한번 그대로 가져다 확인해 보세요 정말 괜찮은 방법이..