728x90 반응형 CSS127 [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. [CSS]Object-fit 이미지나 비디오 크기에 맞춰 자르는 방법 Object-fit 속성으로 fill = 가로 세로를 크기에 맞게 꽉채운다(비율무시) contain = 지정한 크기에 맞게 비율을 유지한채 꽉 채운다 cover = 비율을 유지한채 가로와 세로가 꽉차도록 확대된다 none = 원본 크기 상관없이 가운데 정렬된다. scale-down = 원본보다 작아지며 contain과 비슷한 결과가 보여진다. See the Pen object-fit by gahyun (@gahyun) on CodePen. 유튜브 동영상 반응형으로 [html] - [CSS3][JAVASCRIPT/JQUERY]유튜브 동영상 반응형으로 삽입하는 두가지 방법 2019. 5. 23. 이전 1 ··· 16 17 18 19 20 21 22 ··· 32 다음 728x90 반응형