-
Html, CSS 2014‧09‧04
CSS - vimeo 영상 높이 값 반응형으로 적용하기
vimeo를 삽입하다보면 iframe을 이용해서 홈페이지에 삽입하게 된다.그런데 이게 아이프레임으로 크기를 잡아버려서 브라우저 창이 조절 될 때 안의 영상은 이상한 비율로 보여질 때가 있다.이는 반응형웹에 적절하지 않은 사항이기 때문에 팁을 하나 얻어왔다.참고로 처음에는 자바스크립트로 엘리먼트를 제어하는 것을 만들어서 사용해 왔으나 순수 css만으로도 충분히 구현해 낼 수 있기에 css로 처리하려고 한다. 아래 설명을 보면서 진행해보자. <iframe src="//player.vimeo.com/video/동영상 […]
-
Html, CSS 2014‧06‧11
css - 텍스트에 그림자와 그라데이션 함께 넣는 코딩
코드 미리 보기 : http://jsfiddle.net/2GgqR/2/ 텍스트에 그림자 효과와 그라데이션 효과를 함께 넣고 싶을 때가 있다.물론 정식으로 코드를 제공하진 않지만 많은 사용자들이 이 효과를 위해 여러가지 방법을 동원한다.그 중에서 가장 효율적인 방법은 아래와 같다. h1 { font-size: 72px; background-image: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position:relative; } h1:after { background: none; content: attr(data-text); left: 0; position: absolute; […]
-
Html, CSS 2014‧05‧20
CSS3 - 이미지 또는 div 회전
회전 시킬 이미지의 클래스를 .spinimage라고 가정하고 4초동안 한바퀴 돌아가는 애니메이션을 구현한다고 할 때 아래와 같이 만들면 된다. .spinimage{ -webkit-animation: spin 4s infinite linear; -o-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { 0% {-moz-transform: rotate(0deg);} […]
-
Html, CSS 2014‧02‧10
반응형웹에서 이미지 높이 auto 값이 ie 8 이하에서 오류 대처
img { width: inherit; /* Make images fill their parent's space. Solves IE8. */ max-width: 100%; /* Add !important if needed. */ height: auto; /* Add !important if needed. */ } 또는 img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */ @media \0screen {img { width: auto }} /* Prevent height distortion […]
-
Html, CSS 2013‧09‧11
css3 - 이미지 교체
미디어쿼리를 사용할 때 이미지를 교체할 경우가 있다. #id img{ content: url("image.png"); } # id 자식 요소 중에 img가 있다면 image.png로 이미지를 노출한다. 하지만 이 방법은 아직 추천하지 않는다. 크롬 조차 제대로 작동하지 않을 때도 있고 css3이다보니 제대로 안보여지는 경우가 많다. 알아두면 좋은 정보니까 메모! img[data-src-desktop] { content: attr(data-src-desktop, url); } 위 방법도 있다고 하니 참고!
-
Html, CSS 2013‧04‧04
이미지에 여백이 생길 때 해결 방법들
이미지 태그를 이용하다보면 이상한 약간의 여백이 발생한다. 위 이미지를 보면 사진틀 이미지를 위아래로 나눈 것인데 아랫부분에 여백으로 인해서 약간의 공간이 생겼다.확대해서 보면 아래와 같다. 약간의 여백이 생겨서 위 아래 이미지가 떨어진 현상을 발견하였다.파이어 폭스로 해당 이미지의 부모 div 요소를 선택하면 아래와 같이 셀렉트 되어진다. 이유는 모르겠지만 해결 방법은 아래와 같다. 1. 이미지 요소에 vertical-align:top;을 […]
-
Html, CSS 2013‧01‧21
css로 div 세로로 중앙 정렬시키기
자주 검색하기도 하고, 여러가지 방법이 있긴한데 개인적으로 생각했을 때 가장 무난하고 가장 호환성이 높은 방법을 메모해 놓으려고 한다. 방법은 #contents라는 div를 세로로 중앙 정렬하고 싶을 때 #contents를 감싸는 #contentsWrap이라는 div를 하나 만든다 . #contentsWrap{ height: 400px; width: 100%; position: absolute; top:50%; margin-top: -200px; } #contents{ position: relative; margin: auto; background-color: #eee; width: 800px; height: 400px; […]
-
Html, CSS 2012‧10‧20
영문 텍스트의 경우 css로 대문자 혹은 소문자로 변환시켜 노출시키기
웹사이트를 만들다보면 특정 텍스트를 대문자로 노출시켜야할 때가 있거나 일괄 소문자로 표현해야할 때가 있다. 예를 들어 This is my portfolio site. 라는 글로 아래의 변환방법을 쓰면 1. 대문자로 바꾸는 방법 text-transform:uppercase 결과는 THIS IS MY PORTFOLIO SITE. 2. 소문자로 바꾸는 방법 text-transform:lowercase 결과는 this is my portfolio site. 3. 단어의 첫글자는 대문자로 나오게 할 […]
-
Html, CSS 2012‧09‧27
ul과 ol에 있는 li태그에서 들여쓰기 및 앞표시 없애기
보통 <li>는 들여쓰기가 되어 공백이 생기고, 앞에 숫자 혹은 ·(점)표시가 나는데 이것을 삭제하고 들여쓰기도 안하는 스타일 시트 ol, ul { list-style: none; margin:0px; padding:0px; }