728x90 반응형 분류 전체보기298 [CSS]CSS만을 이용해서 차트 그리기 [CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 ) 이전에 그라디언트를 이용해 원형 차트를 그렸었다. 이건 원형으로 그릴 수 있지만, 애니메이션 효과를 내기위해서는 스크립트를 이용해야한다.. 그럼 완전 CSS만을 이용해서 차트를 그릴 수도 있다. 하지만 반원만 가능하다.. 그려진 반원을 영역밖에 두었다가 rotateZ를 이용해 돌려서 그려지는 것처럼 보이기 때문이다. .chart-skills 의 overflow : hidden을 지워보면 어떻게 움직이는지 알 수 있다. See the Pen css - chart by gahyun (@gahyun) on CodePen. [javascript] - [자바스크립트플러그인]도넛 차트 그려주는 플러그인 2019. 5. 24. [CSS] css를 쓰다보면 알아야하는 가상선택자 a 태그 hover : 마우스를 올렸을 때 active : 마우스를 눌렀을때 link : 방문 전 링크 visited : 방문 후 링크 See the Pen active/hover/link/visited by gahyun (@gahyun) on CodePen. input 태그 focus : 입력을 위해 초점이 맞춰져 있을 때 See the Pen input focus by gahyun (@gahyun) on CodePen. :nth-child 여러개의 같은 태그중 하나 선택하기 :nth-child(3) 3번째 태그 선택 :first-child 첫번째 태그 선택 :last-child 마지막 태그 선택 선택자1.not(선택자2) 선택자1중 선택자2를 제외한 요소 See the Pen nth-child by .. 2019. 5. 23. [CSS]가상선택자 :before / : after 활용하기 해당 태그 앞과 뒤에 생기는 가상선택자로 content 속성이 꼭 있어야한다. 목록의 리스트 도형을 만들 수도 있고 아래와같이 꾸밈에 사용할 수도 있다. See the Pen after css by gahyun (@gahyun) on CodePen. See the Pen ribbon by gahyun (@gahyun) on CodePen. 아래와같은 코드로 삼각형모양을 만들 수 있다. 선은 아래와 같이 표현된다. 기본 투명으로 선을 원하는 높이만큼의 두께로 그린뒤 - transparent (투명) 원하는 방향의 선 색을 주면 삼각형 모양으로 나온다. 이를 이용해 위에처럼 리본을 만들수도 있고 말풍선을 만들수도있다. border: 10px solid transparent; border-top-color:#.. 2019. 5. 23. [CSS]input[type=radio], input[type=checkbox] 스타일 적용 및 checked 선택자 이용하기 input[type=checkbox]와 input[type=radio]는 안보이게 하고, label을 이용해서 스타일을 적용합니다. input[type=radio]은 name을 통일시켜 하나만 선택 가능하도록 합니다. .input-radio:checked 를 이용해 체크되면 css 스타일이 변경되도록 합니다. See the Pen input checked by gahyun (@gahyun) on CodePen. [CSS/CSS 기초] - [CSS] input type=file CSS적용하기 [html] - [html] form 작성하기 2019. 5. 23. 이전 1 ··· 47 48 49 50 51 52 53 ··· 75 다음 728x90 반응형