본문 바로가기

분류 전체보기

(224)
마우스 오버시 이미지 크기조절 심화편! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 알톤스포츠의 자존심을 담은 대표 브랜드 스피드를 위한 스타일리쉬 자전거 쉐보레의 공학기술이 적용된 퍼포먼스 자전거 전거전 거전..
마우스 오버시 이미지가 자동으로 커지고 작아지고 하는 효과! 초간단 :P 언뜻 복잡할거 같은데 진짜 겁나 쉬운 방법이다. 먼저 style에서 class로 정의해 준 다음 addClass와 removeClass를 사용하는 방법이다. 세상간단. 진짜 세상에서 제일 간단. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98..
google map api 사용법 (한 페이지에 다수의 구글맵 가능) 진짜 겁나 헤맸던 google map api 사용법. 직접 발급받은 key를 사용하는 법이 있고 왜인지 모두가 쓸수있는 key를 사용하는 법이 있는데, 진짜 모두 쓰는 그 방법이 훠어어어엉어어어어어얼씬 낫다 진짜..후... 1. 직접 발급받은 key사용법 - key를 발급받는 절차부터 복잡하다. 이건 naver에 검색하면 많이 나오므로 패스. 키를 발급받은다음, 스크립트 선언을 먼저 한다. 빨간부분은 내가 발급받은 api 키를 넣으면 된다. map을 넣을 공간을 마련해준다. 이때, #map은 width와 height값을 준 상태여야 한다. 이 #map에 width와 height값을 준다. 그리고 body가 닫히기 직전, 이렇게 써준다.후... 그런데 이방법을 사용하면 1p에는 하나의 구글맵밖에 업로드 하..
추천사이트 coderap HTML,CSS의 레퍼런스 사이트. 한눈에 보기 깔끔하게 정리되어 있다. http://coderap.tistory.com/
버튼스타일 2 https://codepen.io/TryHardHusky/pen/KdQQVq HTML ...이랄 것도 없고, 하나의 a에 스타일 주는것이다. CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106..
마음에 드는 버튼스타일 https://codepen.io/seanfree/pen/NpMevj 여기서 가져왔당 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Clockwise Horizontal Vertical Both Counter-clockwise Horizontal Vertical Both Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 ..
placeholder의 색상 바꾸기 이렇게 기본적인것 바꿀수 있는거 너무쬬아 ! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ::-webkit-input-placeholder { /* Chrome */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; } Colored by Color Scripter cs
display: table display:table은 그말 그대로, table로 보이도록 하는것이다. 만약 distplay: table-cell; 을 가지고 있다면, 그 요소들은 블럭 요소라도 한 행에 위치하고, 폭과 높이가 동일하게 된다. td처럼 셀을 만드는것이다. 가로로 정렬하야하는 요소에 table-cel을 부면 float 하지 않아도 정렬할수 있다. 그리고, 세로로 가운데 정렬도 간단하다. HTML 1 2 3 4 5 6 7 세로 가운데 정렬 cs CSS 1 2 3 4 5 6 Colored by Color Scripter cs
(링크) 버튼 여러가지 모음 https://nanati.me/css-button-design/
HTML,CSS를 이용한 hover 이펙트 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 Bottom to Top Hi, this is a simple example =D Top to Bottom Hi, this is a simple example =D L..
텍스트 드래그 스타일링 HTML 1 산야에 살 찬미를 창공에 관현악이며, 쓸쓸하랴? 크고 새가 어디 못하다 아름다우냐? 피어나기 거선의 속에 보배를 석가는 눈이 보이는 아름다우냐? 용기가 현저하게 이 철환하였는가 풍부하게 것이다. 주며, 가치를 관현악이며, 심장의 청춘의 위하여 쓸쓸하랴? 꽃이 속잎나고, 착목한는 위하여, 예가 있을 위하여 관현악이며, 뿐이다. 품으며, 착목한는 그들은 칼이다. cs CSS 1 2 3 4 5 6 7 8 9 10 11 ::selection { color: white; background-color: #ff7473; } ::-moz-selection /* Firefox needs an extra attention for this */ { color: white; background-color: #f..
flexbox CSS로 레이아웃을 잡는 방법, IE 11부터 원활하게 적용되며, -ms-를 붙일경우 IE10에서도 적용가능. 아직 flexbox에 대해서는 제대로 공부하지 못했다 ㅠ.ㅠ flexbox를 이용한 중앙정렬이라는데, .vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } http://daumui.tistory.com/44 이 블로그를 보면서 많이 공부해야겠다.
배경'만' 투명도 조절 HTML 1 2 3 기아 타이거즈가 웬일로 잘한다 했더니 오늘 뚜드려 맞았구나...8ㅅ8.... Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 .rgba { width: 100%; max-width: 480px; margin: 1rem auto; text-align: center; padding: .6rem; background-color: transparent; background-color: rgba(200,200,200,0.2); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd); -ms-filter: "progid:DXI..
텍스트의 각도 변경하기 (transform) HTML 1 2 3 4 5 12 September 2016 Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 .example-date { width: 115px; background-color: #D09E88; position: relative; padding: 45px 5px 0; margin: 0 auto; } .example-date .example-day { font-size: 45px; line-height: 45px; position: absolute; left: 5px; top: 0px; } .example-date .example-month { text-..
테두리 여러개 그리기 id가 borders라는 div에 적용하는 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 #borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600; } #borders:before { content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929; } #borders:after { content:""; pos..
reset CSS css의 기본적인 값을 reset. 가장 보편적으로 쓰이는걸 가져오긴 했는데, 이정도까지 다 쓸 필요는 없다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:..
각종 미디어쿼리! /* 스마트폰 (가로・세로) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* 스마트폰 (가로용) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /*스마트폰 (세로용) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (가로・세로) ----------- */ @media only screen and (min-device-width : 768px) and (max-d..
float를 해제하자, clearfix Float, 레이아웃 잡을때 마법의 요소다. 그런데 float를 사용하면 '없는 영역' 으로 간주하여 부모 요소의 height가 없어져버리는 경우가 있다..^^ 물론 부모 요소에 고정된 height값을 주면 바로 될 일 이지만 지금같은 반응형 시대에서 height에 고정값을 주는일은 뭐다?= 있을수 없는일... 고로 부모요소에 height를 주는 대신 float로 인한 레이아웃 오류를 잡을수 있는 clearfix를 하면 된다. CSS 4 5 6 7 8 9 10 11 12 13 14 15 16 .clearfix{ *zoom:1; } .clearfix:after{ content: ''; display: block; clear: both; } cs 먼저 .clearfix라는 클래스를 정의해주자. 그리고 나서 ..
항상 화면 하단에 고정되는 footer HTML 1 2 3 4 브라우저 아래에 고정되는 footer부분 Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 #footer { position:fixed; left:0px; bottom:0px; height:60px; width:100%; background:#EE7785; color: white; } #footer p { text-align: center; } cs
min-height 크로스브라우징 1 2 3 4 5 6 .minheight { min-height: 240px; height:auto !important; height: 240px; background: #D499B9; } cs

728x90