웹관련/HTML-CSS23 [CSS] animation 애니메이션을 구간별로 보여지도록 해보자 긴 이미지를 구간별 딱딱 한프레임씩 끊어서 보여주는 방법이 있습니다. 원래 긴 이미지를 animation 시키면 그냥 좌우 또는 상하로 쭈~~욱 이동이 됩니다... 하지만 긴 이미지를 딱딱 끊겨서 애니매이션처럼 보여주는 방법이 바로 animation-timing-function 안에 있는 steps() 라는 속성입니다. 사용방법은 아래와 같다. 표현방법은 한줄 표현방법으로~~ .test { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } } 이것만 가지고 이해가 안갈수 있습니다. 그래서 해외사이트를 뒤져서 예제를 하.. 2017. 8. 3. [CSS3] animation 사용하기 애니매이션을 CSS로 사용하기 위해선 @keyframes 을 정의하고 CSS에서 정의된 @keyframes 을 사용하고 모든 브라우져에서 동작하도록 벤더프리픽스를 적어주는 3단계의 작업이 필요합니다. 1. @keyframes 정의하기 - 우리가 정한 이름 (여기서는 tutsFade로 정했습니다)- 스테이지: 0%-100%; from (0%와 같음) 그리고 to (100%와 같음)- CSS 스타일: 각 구간에 적용시킬 스타일 @keyframes testAnimation { 0% { opacity: 1; } 100% { opacity: 0; }} 위 @keyframes 코드와 아래의 @keyframes 코드는 동일합니다. 편한걸 사용하면 됩니다. @keyframes testAnimation { from { .. 2017. 8. 3. [CSS] 체크박스 이미지로 변경하기 투박한 체크박스를 요즘엔 잘 사용하지 않기 때문에체크박스도 이미지화 시켜서 이쁘게 만들수 있다. CSS 부분input[type=checkbox] { display:none; }input[type=checkbox] + label { display: inline-block; cursor: pointer; line-height: 22px; padding-left: 22px; background: url('/img/check_off.png') left/22px no-repeat; }input[type=checkbox]:checked + label { background-image: url('/img/check_on.png'); } HTML 부분동의합니다.동의합니다. 은근히 많이 사용하게 되니 기록을 해둔다. 2017. 7. 6. [CSS] Transition 속성과 사용법 [ Transition 기본문법 ] transition: transition-property | transition-duration | transition-timing-function | transition-delay * transition-property : css 속성을 지정함.* transition-duration : 트렌지션 실행 시간. 기본값 0s * transition-timing-function : 트렌지션이 실행되는 동안 속도 설정* transition-delay : 언제 트렌지션을 시작할지 지정 *일반적으로 이렇게 한줄로 사용한다 : transition:all 0.3s ease 0; transition: 속성명 시간 효과 딜레이시간; [ Transition 속성 ] 기본적으로는 all 을.. 2017. 3. 31. [CSS] Font-face 사용방법 일반적으로는 웹폰트를 사용하지만, 서버에 직접 폰트를 설치후 해당폰트를 연결할때 사용합니다. EX) #iefix 를 뒤에 붙힌이유는 IE6~8 의 경우 format() 구문을 인식못해 다른 url 로 된 파일을 다운닫는경우가 있습니다.eot 파일 뒤에 ?#iefix 라는 쿼리스트링을 붙힘으로써 이후 문자들을 번역하는것을 멈추게하여 다른 파일의 다운로드 요청을 막는 일종의 꼼수 입니다. 우리나라의 웹 특성상 IE를 버릴수가 없네요 ㅠ 추가적으로 온라인으로 폰트를 변환해주는 사이트입니다.사용해보니 유용하더라구요.. https://onlinefontconverter.com/ 그리고 구글에서 폰트를 다운받을수 있는곳인데 이곳도 괜찮음^^ https://google-webfonts-helper.herokuapp... 2017. 2. 3. [CSS] Map code 생성해주는 프로그램 일반적으로 이미지위에 좌표를 찍고 링크를 걸어야 하는 일이 종종 생깁니다. 주로 그림판을 이용해서 좌표를 알아내서 코딩을 하지만, 좀 복잡한경우도 많이 있기때문에잘 사용을 안하게 되는경우가 많습니다. 하지만 해당프로그램을 사용해서 이미지를 연다음 좌표를 그리면 자동으로 HTML 코드를 생성을 해줘서 Ctrl + C 와 Ctrl + V 를 눌러서 사용하면 되는 아주 편한 프로그램입니다. 몇번만 사용해보면 금방 알수 있습니다 ㅎㅎ 2017. 2. 1. [CSS] 三 모바일 메뉴 버튼만들기 三 이런모양을 CSS로 만들때 주로 사용하는 방법입니다. 반응형 디자인 할때 모바일 모드에서 많이 사용합니다. See the Pen 모바일 아이콘 by DeokHwan (@deokhwan) on CodePen. 2016. 11. 23. [CSS] 파비콘 만들기 - favicon Favicon은 favorites icon의 줄임말로, 특정 사이트에 들어갔을 때 주소표시줄 왼쪽에 표시되는 아이콘을 말합니다. 16 x 16 픽셀의 아이콘은 즐겨찾기 목록, 탭 브라우징의 탭에서도 표시되며 사이트를 규정하는 데 도움이 됩니다. 만약 자신만의 사이트를 운영하고 있다면, favicon을 사용하는 것을 추천합니다. 즐겨찾기 목록에서 favicon이 없는 사이트들 보다 더 주목받을 수 있기 때문입니다. 또한, 잘 만들어진 favicon은 사이트를 기억하는 데 더 도움을 주게 되어 방문자수를 늘리는데 도움이 됩니다. 파비콘 만들어주는 사이트 : http://www.favicon.cc/ 파비콘 icon을 만든뒤 FTP로 업로드후, Head 부분에 아래의 링크를 걸어주면 됩니다. 2016. 11. 3. [CSS] 넓이를 정해주고 넘어가면 ... 으로 표시되게 하기 일반적으로 원하는 공간에 글이 작성이 되고 범위가 넘어가면 자동으로 한칸 아래로 떨어지게 됩니다. 하지만 레이아웃을 잡아서 떨어지면 레이아웃이 틀어지게 되어 떨어지면 안될때 사용하는 방법입니다.글이 해당 넓이를 벗어나게 되면 ... 으로 표시되도록 CSS를 넣어주는 방법이 되겠습니다. text-overflow:ellipsis;overflow:hidden;white-space:nowrap; 위에 CSS를 추가를 해주면 ... 으로 표시가 됩니다. 주의사항으로 반드시 width 값이 잡혀있어야 됩니다! 2016. 10. 27. 이전 1 2 3 다음
