CSS17 [CSS] Font 설정 무료 Font 사이트 📌 Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Font 설정 📌 Font 설정 ① 사이트에 접속해 원하는 폰트를 선택한다. ② 원하는 폰트들을 선택한 후, import를 복사해 .css 파일 상단에 붙여넣는다. ③ font-family를 복사해 .css 파일에 붙여넣는다. 2022. 9. 21. [CSS] Media Query Media Query 📌 Media Query : CSS만을 사용해 사용자가 보고 있는 스크린의 사이즈를 알 수 있는 방법. 📌 사용법 : @media screen (조건) { } : 스크린 크기에 따른 설정. @media print (조건) { } : 인쇄할 때 설정. 📌 조건 min-width : 최소 너비. max-width : 최대 너비. orientation: landscape : 가로 모드. orientation: portrait : 세로 모드. https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN 미디어 쿼리는 단말기의.. 2022. 9. 19. [CSS] Animation Animation 📌 Animation : 자동으로 애니메이션이 진행되도록 함. 📌 infinite : 반복해서 계속 애니메이션이 진행됨. + 추가 설명 더보기 이미지가 회전하는 애니메이션을 반복해서 한다. Animation - % 📌 % : %로 나눠서 애니메이션을 설정할 수 있음. + 추가 설명 더보기 이미지가 회전하면서 위로 이동했다가 내려오는 것을 반복하는 애니메이션을 진행한다. 2022. 9. 19. [CSS] Transform Transform 📌 Transform : 변형. 📌 종류 rotate : 회전 scale : 크기 translate : 이동 💡 다른 형제 요소는 변화시키지 않으며, margin과 padding이 적용되지 않는다. https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. developer.mozilla.org + 추가 설명 더보기 마우스를 그림 위에 올리면, 그림이 회전한다. * border-radius:.. 2022. 9. 19. [CSS] Transition Transition 📌 Transition : 어떤 상태에서 다른 상태로 변화할 때 애니메이션을 만드는 것. 📌 사용법 : transition: (변화시킬 것) (변화할 시간) (추가 설정); transition은 state가 없는 요소에 사용해야 함. 💡 (변화시킬 것)의 'all'은 모든 것을 바꾼다는 것을 의미. This is Link + 추가 설명 더보기 링크 위에 마우스를 올리면 링크의 글자색과 배경색이 서서히 바뀐다. ease-in function 📌 ease-in function : 브라우저에게 애니메이션이 어떻게 변할 지 말해주는 것. 📌 종류 linear : 같은 속도로 좌우 이동. ease-in : 뒤로 갈수록 빨라짐. ease-out : 뒤로 갈수록 느려짐. ease-in-out cu.. 2022. 9. 19. [CSS] custom property custom property 📌 custom property : 값을 저장하는 것. '변수'라고 생각하면 쉬움. root에서 선언 📌 규칙 : --( )-( ) 형식으로 이름 사용. No words are enough for you. 멜로디로 담고 싶어. So, 너의 모든 감정 내가 들을 수 있게 해줘. I just want to love you. 널 혼자 두지 않아 난 I just want you, I need you. 이 밤은 짧고 넌 당연하지 않아. + 추가 설명 더보기 p::first-letter { background-color: var(--main-color); → p의 첫번째 글자 배경색 설정. border: var(--default-border); → p의 경계선 설정. } p::first.. 2022. 9. 15. [CSS] Pseudo Element Pseudo Element ::placeholder 📌 ::placeholder : placeholder 꾸밀 때 사용. Pseudo Element ::selection 📌 ::selection : 선택한 것의 설정을 변경 할 때 사용. Pseudo Element ::first-letter 📌 ::first-letter : 첫 글자만 적용. Pseudo Element ::first-line 📌 ::first-line : 첫 줄만 적용. Pseudo Element - 예시 No words are enough for you. 멜로디로 담고 싶어. So, 너의 모든 감정 내가 들을 수 있게 해줘. I just want to love you. 널 혼자 두지 않아 난 I just want you, I need y.. 2022. 9. 15. [CSS] States States 📌 States ① active : 마우스가 클릭할 때. ② focus : 선택되었을 때. ③ focus-within : focused인 자식을 가진 부모 엘리먼트에 적용됨. ④ hover : 마우스가 대상 위에 있을 때. ⑤ visited : 방문한 상태인 경우.(링크에만 적용.) button1 button2 Go Naver + 추가 설명 더보기 button:active { background-color: tomato; → button 클릭하면 배경색 변함. } button:hover { background-color: lightskyblue; → button 위에 마우스 커서가 올라가면 배경색 변함. } button:focus { background-color: orange; → butt.. 2022. 9. 15. 이전 1 2 3 다음
