메뉴 보이기
조회 수 20 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
출처 https://codepen.io/marcobiedermann/pen/kjwzC

svg 파일을 id값으로 클래스화해서 사용하기


<svg><symbol id="ID명"></symbol></svg> 


이렇게 심볼로 만든 다음에


<svg><usr xlink:href="#ID명"></use></svg>


이런 식으로 사용 가능하네요.

<svg class="클래스명"> 이렇게 써줄 수도 있습니다.




  1. 공지사항 notice

    UI컴포넌트는 UI프레임워크 게시판에 글을 작성해주세요

    Date2018년 05월 27일 Categorycss 조회22 좋아요0
    켄도UI,JUI,UIKIT 등의 UI프레임워크는 UI프레임워크 게시판에 작성해주세요.
    read more
  2. 공지사항 notice

    CSS(Cascading Style Sheet) 뜻

    Date2018년 05월 13일 Categorycss 조회37 좋아요0
    CSS의 약자는 Cascading Style Sheet의 약자입니다. Cascading 의 사전적 뜻은 '폭포처럼, 계속되는, 연속적인'이란 의미를 가집니다. 윈도우 정렬 모드 중 Cascading으로 하면 차곡차곡 정렬되는 그런 형태를 말하는데, CSS는 '우선순위가 있는 ...
    read more
  3. 공지사항 notice

    CSS(Cascading Style Sheet) 뜻

    Date2018년 05월 13일 Categorycss 조회23 좋아요0
    CSS의 약자는 Cascading Style Sheet의 약자입니다. Cascading 의 사전적 뜻은 '폭포처럼, 계속되는, 연속적인'이란 의미를 가집니다. 윈도우 정렬 모드 중 Cascading으로 하면 차곡차곡 정렬되는 그런 형태를 말하는데, CSS는 '우선순위가 있는 ...
    read more
  4. 공지사항 notice

    html/css/javascript 공부하는 사이트

    Date2018년 01월 02일 CategoryLayout 조회43 좋아요0
    html/css/javascript 공부하는 사이트 https://developer.mozilla.org/ko/docs/Web https://www.w3schools.com/ CSS https://css-tricks.com/ CSS Layout http://ko.learnlayout.com/ http://www.free-css.com/free-css-layouts/page1 https://www.w3schools.c...
    read more
  5. notice

    Metirial Icons (머티리얼 디자인 아이콘)

    Date2015년 12월 06일 Category아이콘폰트 조회91 좋아요0
    머티리얼 디자인https://material.io/tools/icons https://github.com/google/material-design-icons/tree/master/action/svg/design [사용법] <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><i class="material-ic...
    read more
  6. SVG svg 파일을 id값으로 클래스화해서 사용하기

    Date2019년 01월 07일 CategorySVG 조회20 좋아요0
    svg 파일을 id값으로 클래스화해서 사용하기 <svg><symbol id="ID명"></symbol></svg> 이렇게 심볼로 만든 다음에 <svg><usr xlink:href="#ID명"></use></svg> 이런 식으로 사용 가능하네요. <svg class="클래스명"> 이렇게 써줄 수도 있습니다.
    Read More
  7. SCSS [SCSS] SCSS문법 정리 네스팅 변수 @import @mixin @include @for @each @while

    Date2018년 09월 01일 CategorySCSS 조회87 좋아요0
    SCSS = SASS + CSS SASS 컴파일러로 SCSS파일이 CSS파일이 됨 - SCSS는 CSS를 보다 효율적으로 보다 편리하게 사용하기 위해 만들어진 언어다. SASS와 CSS의 중간쯤이라고 볼 수 있지만 SASS를 몰라도 SCSS는 할 수 있다. 기본적으로 CSS를 바탕으로 하고 있...
    Read More
  8. (번역) CSS flex box 3분만에 배우기 https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/ > flex 의 기본 개념에 대해서 가장 간단하게 설명한 글입니다. CSS Flexbox https://www.w3schools.com/css/css3_flexbox.asp > w3schools...

    그리드 flex 개념 알기

    Date2018년 08월 25일 Category그리드 조회50 좋아요0
    (번역) CSS flex box 3분만에 배우기 https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/ > flex 의 기본 개념에 대해서 가장 간단하게 설명한 글입니다. CSS Flexbox https://www.w3schools.com/css/css3_flexbox.asp > w3schools...
    Read More
  9. css <style> .parallax { /* The image used */ /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .s8_3{...

    css parallax only css

    Date2018년 08월 14일 Categorycss 조회19 좋아요0
    css <style> .parallax { /* The image used */ /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .s8_3{...
    Read More
  10. 마진 상쇄 현상을 해결하는 방법으로 여러 가지 방법이 있겠습니다만, 개인적으로는 display:inline-block;width:100%; 를 이용합니다.

    css 마진 상쇄 현상 해결팁

    Date2018년 07월 30일 Categorycss 조회67 좋아요0
    마진 상쇄 현상을 해결하는 방법으로 여러 가지 방법이 있겠습니다만, 개인적으로는 display:inline-block;width:100%; 를 이용합니다.
    Read More
  11. https://codepen.io/eond/pen/xWQgGB ">

    SVG CSS HEXAGON

    Date2018년 04월 19일 CategorySVG 조회17 좋아요0
    https://codepen.io/eond/pen/xWQgGB ">
    Read More
  12. @keyframesBefore applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages: 0% is the first step of the animation 5...

    css CSS animation infinite

    Date2018년 04월 13일 Categorycss 조회12 좋아요0
    @keyframesBefore applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages: 0% is the first step of the animation 5...
    Read More
  13. /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align...

    css CSS로 Center 정렬

    Date2018년 01월 13일 Categorycss 조회19 좋아요0
    /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align...
    Read More
  14. CSS [attribute*=value] Selectorhttps://www.w3schools.com/cssref/sel_attr_contain.asp example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain div[class*="test"] { background: #ffff00; }

    css css 선택자 | CSS [attribute*=value] Selector

    Date2018년 01월 02일 Categorycss 조회16 좋아요0
    CSS [attribute*=value] Selectorhttps://www.w3schools.com/cssref/sel_attr_contain.asp example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain div[class*="test"] { background: #ffff00; }
    Read More
  15. See the Pen socialIcon with XEicon by eond (@eond) on CodePen.

    CSS아이콘 social Icon with XE icon

    Date2017년 12월 22일 CategoryCSS아이콘 조회59 좋아요0
    See the Pen socialIcon with XEicon by eond (@eond) on CodePen.
    Read More
  16. ul > li 로 꾸몄는데 1 2 3 4 5 6 7 8 9 이렇게 나오는 스타일을 1 4 7 2 5 8 3 6 9 이런 형식으로 나오게 하는 방법입니다. #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }

    css ul 컬럼 다단

    Date2017년 12월 20일 Categorycss 조회56 좋아요0
    ul > li 로 꾸몄는데 1 2 3 4 5 6 7 8 9 이렇게 나오는 스타일을 1 4 7 2 5 8 3 6 9 이런 형식으로 나오게 하는 방법입니다. #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
    Read More
  17. ::-webkit-input-placeholder { color: #CCC; } /* Firefox 4-18 */ :-moz-placeholder { color: #CCC; } /* Firefox 19+ */ ::-moz-placeholder { color: #CCC; } /* IE10+ */ :-ms-input-placeholder { color: #CCC; }

    input input 속성 중 placeholder 의 색 바꾸기

    Date2017년 09월 25일 Categoryinput 조회54 좋아요0
    ::-webkit-input-placeholder { color: #CCC; } /* Firefox 4-18 */ :-moz-placeholder { color: #CCC; } /* Firefox 19+ */ ::-moz-placeholder { color: #CCC; } /* IE10+ */ :-ms-input-placeholder { color: #CCC; }
    Read More
  18. [js] $(document).ready(function(){ $('#menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); 출처 : http://codepen.io/elliottmangham/pen/RoVwRm

    CSS아이콘 Animated dots icon

    Date2017년 03월 30일 CategoryCSS아이콘 조회49 좋아요0
    [js] $(document).ready(function(){ $('#menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); 출처 : http://codepen.io/elliottmangham/pen/RoVwRm
    Read More
  19. 참조 http://codepen.io/akademy/pen/FlkzB http://nubiz.tistory.com/443

    css [CSS] 배경 이미지에만 흐림효과(Blur) 적용하기 :: Life is an egg.

    Date2017년 03월 27일 Categorycss 조회711 좋아요0
    참조 http://codepen.io/akademy/pen/FlkzB http://nubiz.tistory.com/443
    Read More
  20. css CSS로 표현하는 스텝바(Step bar only CSS)

    Date2016년 10월 04일 Categorycss 조회104 좋아요0
    http://codepen.io/eond/pen/ALbQbr http://codepen.io/eond/pen/BLmwzZ
    Read More
  21. 웹킷엔진을 사용하는 브라우저에서 두줄이상 여러줄 말줄임 처리가 가능한 프로퍼티가 생겼다. 이름은 -webkit-line-clamp 언제 생겼는지 참 유용하다! .ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; ...

    css 두줄이상 여러줄 멀티라인 말줄임 처리 (-webkit-line-clamp)

    Date2016년 07월 05일 Categorycss 조회5145 좋아요0
    웹킷엔진을 사용하는 브라우저에서 두줄이상 여러줄 말줄임 처리가 가능한 프로퍼티가 생겼다. 이름은 -webkit-line-clamp 언제 생겼는지 참 유용하다! .ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; ...
    Read More
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6