블로그

워드프레스 이미지 최적화 플러그인 – ShortPixel Image Optimizer

시작하기 전 인터넷을 검색하다가 kalkin7 님의 글을 보게됐는데 해당글이 워낙 잘 정리되어 있고 이보다 잘 쓰기는 힘들것같습니다. 이 글은 모든걸 설명하기 보다는 kalkin7 님의 글중 2.6 이미지를 최적화하자 라는 글에 이미지를 최적화하는 몇가지 플러그인들의 소개가 있는데,…


워드프레스 Contact Form 7 스텝(단계) 나누기 플러그인 – Contact Form 7 Multi Step

개요 Contact Form 7 은 워드프레스의 대표적인 플러그인입니다. 누적 활성화(다운로드 수가 아닌 현재 사용중인 사이트 수)가 5백만이 넘어가는 검증이 된 플러그인이며 단순하고 편한 사용법에 무료이기까지 하니 사이트를 제작한다면 문의메일 보내는 페이지를 만들때 그야말로…


html5 data속성을 이용한 버튼 애니메이션

Html5의 data 속성을 활용한 Css버튼 애니메이션 예제 Html5의 data 속성은 사용자 정의 데이터 속성이라 할 수 있다. 속성을 임의적으로 정하는 것이 가능한데 data-name="John" data-city="Boston" 이런식으로 사용자 정의가 가능한 속성. 즉…


조건부 주석

// html5shiv는 ie8이하 html5의 요소를 지원하며, respond.js는 ie8에서 미디어쿼리를 사용할 수 있게 한다. // 이러한 요소는 ie8에 대응하기 위한 요소로 조건부 주석을 적용하면 편하다.   // ie9 미만 (즉 8부터)…


버튼 가상클래스 (hover, focus 등)우선순위

a:link, a:visited, a:hover, a:active, a:focus { } 코드 상으로 나중에 등장하는 클래스의 우선순위가 높기 때문에 :hover 뒤에 a:visited 를 쓰게 되면 이미 방문한 링크 위에 올려도 :hover 명령이 적용되지 않습니다. 이미…


줄바꿈 속성 word-break, word-wrap, white-space

p {word-break: keep-all;} // keep-all : 단어 기준으로 줄바꿈 // break-all : 글자 기준으로 줄바꿈 // normal : 기본값 CJKChinese, Japanese, Korean word-break : CJK, 비…


Css 원하는 행에서 글자 자르기

.test { // 한 줄 자르기 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; // 3줄 자르기 white-space: normal;…


input, select 스타일 제어

input, select 스타일 제어를 항상 기억하고 있으면 좋겠지만.. 난 기억력이.. // 스타일링 제거 .input{ border-radius: 0; // 포커스시 효과 제거 outline-style: none; // 브라우저별 기본 스타일링…


meta viewport 뷰포트 태그

meta viewport는 애플에서 IOS장치의 모바일 뷰포트 크기를 조절하기 위해 만들었다. 따라서 표준은 아니지만 다른 브라우저 또한 이 태그를 채택했기 때문에 표준 아닌 표준이라 할수 있다. // 브라우저 넓이를 장치 넓이에 맞추고, 최초 확대 배율은 100%, 확대 금지,…


이미지 Transition 버그

이미지에 트랜지션을 걸 경우 hover시 이미지가 지글지글 거리는 버그가 있다. 이를 바로잡기 위해서는 해당 이미지와 hover 일 경우 모두 다음 코드를 넣어 해결이 가능하다. img{ opacity: 1; -webkit-backface-visibility: hidden;…