CSS36 line-through 부분만 색깔 바꾸기 최근 지인에게 텍스트의 색은 그대로 놔두고 line-through의 색만을 바꿀수 있느냐고 질문을 받았는데,그렇게 해본 경험이 없었기에 찾아보게 되었다. 찾아보니 그 방법이 금방 나왔다.예제 및 방법은 아래 링크를 참고하면 된다. https://jsfiddle.net/kevinfunk/b2ztqLr3/ 2017. 7. 13. 고정형과 반응형이 섞인 레이아웃 만들기 최근 만들고 있는 프로그램에서 레이아웃 구조를 잡다가왼쪽 div는 고정형으로 하고 오른쪽 div는 반응형으로 해야 하는 상황에 직면하게 되었다. 사실 방법을 알고 있었지만 그 방법을 잊어버려서 다시 기억하고 적용하는데 시간이 좀 걸렸다..(이래서 평소에 기록이 중요한거 같다.) 간단히 그 방법을 말하면 왼쪽에 고정된 width 값을 주었다면,오른쪽에는 그 고정된 만큼의 padding-left 값을 주면 된다. 예제는 아래의 링크에 잘 나와있다. https://codepen.io/winghouchan/pen/wcrAI 2017. 7. 4. 반응형 테이블 만들기 회사에서 만들고 있는 사이트에서 반응형 테이블을 만들일이 생겼다.지금까지 반응형 테이블을 만든적이 없기에 인터넷 검색을 해서 어떻게 만드는지 찾아보았더니 생각보다 어렵지 않았다.결론은 HTML의 before 속성을 사용하는 것이다.이를 위해 CSS의 설정이 필요하다.실제 구현한 것을 보면 이해가 빠르기에 아래의 링크를 걸어둔다. https://codepen.io/geoffyuen/pen/FCBEg 2017. 6. 8. masorny 구현하기 bootstrap을 통해 masorny를 구현할 일이 최근에 생기게 되었다.masorny 구현 방법은 생각보다 어렵지 않았다.아래의 링크에 bootstrap을 써서 직접 구현하고 있는데,CSS 및 HTML 구조가 그리 복잡하지 않다. 핵심은 CSS 코드에서 column-width 속성이다.본 속성의 단위를 현재 em으로 정해주고 있는데,실제 홈페이지에 적용할때는 가로형 사이즈에 반응하는 vw 단위로 바꾸어주니까반응형으로 잘 나왔다. 참고로 column-width는 적혀진 값만큼의 사이즈로 홈페이지를 컬럼으로 나누는 기능이다.자세한 설명은 아래의 링크를 참고하면 된다. https://www.w3schools.com/cssref/css3_pr_column-width.asp 2017. 6. 1. parallex scrolling 만들기 마우스로 페이지를 스크롤 하면 그에따라 그림이나 영상이 유동적으로 바뀌는것을 보았을 것이다.이러한 것을 parallex scrolling방식이라고 부르는데,본 parallex scrolling을 구현하는 것을 찾아보니 그렇게 어렵지 않았다. 아래는 우리의 친절한 w3schools에 올라온 강좌이다. https://www.w3schools.com/howto/howto_css_parallax.asp 2017. 5. 18. modal 팝업 이벤트 정지시키기 최근 조건에 따라 modal의 팝업 기능을 멈추게해야하는 일이 있었다.modal같은 경우에 팝업을 멈추게 할 수 있는 이벤트를 찾아본 결과 아래와 같은 결과를 얻었다. $('#modal').on('show.bs.modal', function (e) { e.preventDefault();}) 저기에 id 값은 팝업 div의 id 값이다.그리고 오른쪽에 show.bs.modal은 modal 팝업이 뜨기전에 실행되는 이벤트이다.고로 해당 modal 이벤트에 e.preventDefault()를 적용하면 본 팝업을 막을수 있다. 이외에도 shown.bs.modal, hide.bs.modal, hidden.bs.modal 등이 있다. 본 이벤트에 관해서는 아래의 사이트를 참고하면 된다. https://v4-alph.. 2017. 5. 16. 무료 이미지 사이트 2 이전에 무료 이미지 사이트를 정리해서 올렸었는데, 나보다 더 정리를 잘해놓은 사이트가 있어 공유한다. https://www.typeform.com/blog/ask-awesomely/free-pics/ 2017. 5. 16. google captcha 반응형 제작방법 google captcha를 쓰면 문제점이 하나 있는데,captcha가 고정형 사이즈라서 스마트 폰에서 그 디자인이 깨지게 된다는 점이다. 그 문제를 해결하기 위해 captcha를 반응형으로 제작해야 한다.하지만 captcha는 iframe으로 불러오는것이기 때문에 % 값을 적용하는 것이 불가능하다.고로 transfrom의 scale 방식을 써서 그 사이즈를 줄여주게 된다. 아래는 그 방법을 자세히 설명한 링크이다. https://geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/ 2017. 5. 12. div태그 안의 이미지 가운데 정렬하기 div를 hidden으로 설정해 놓고 그 안에 img 태그를 뿌리는 방법은우리가 흔히 섬네일 이미지를 보여주려고 할때 많이 사용한다.이때 이미지를 수평, 수직 가운데 정렬하고 싶은데 그 방법은 간단하다.아래와 같은 CSS 속성을 이미지에 부여해주면 된다. position: absolute;top: 0; bottom: 0;left:0; right: 0;margin: auto; 이 방법은 흔히 콘텐츠를 정 가운데 배치할때 많이 쓰는 방법인데,섬네일 이미지 가운데 정렬에서도 사용 가능함을 최근 알게 되었다. 2017. 5. 1. 이전 1 2 3 4 다음