반응형

온라인 강의/Advanced CSS and Sass [Udemy] 70

10. Building a Complex Animated Button - Part 2

의사 클래스(pseudo-class) pseudo element는 해당 요소의 자식 요소 처럼 다루어진다 animation-fill-mode: backward animation에 delay를 줬을 때 늦게 나타나라~ 했는데 animation 이 실행되기 직전에는 우뚝 서있는 모습을 볼 수 있다 none: 기본값으로 설정됩니다. 애니메이션이 실행되기 전과 후에 요소의 스타일을 변경하지 않습니다. 따라서 애니메이션이 실행되는 동안 요소의 스타일은 애니메이션 키프레임에 의해만 결정됩니다. forwards: 애니메이션이 종료된 후, 마지막 키프레임의 스타일을 유지합니다. 즉, 애니메이션의 마지막 키프레임의 스타일이 적용된 상태로 유지됩니다. backwards: 애니메이션이 실행되기 전, 첫 번째 키프레임의 스타..

9. Building a Complex Animated Button - Part 1

가상클래스 중에서 :link 과 :visited 란? 이미 기존 클래스에서 한 것을 보니 나도 꼭 알아야 할 개념들인듯 하다 .btn:link와 .btn:visited는 CSS에서 링크 스타일을 지정하는 가상 클래스( pseudo-class)입니다. 이러한 가상 클래스를 사용하여 방문하지 않은 링크와 이미 방문한 링크의 스타일을 다르게 지정할 수 있습니다. .btn:link는 방문하지 않은 링크의 스타일을 지정하는데 사용됩니다. 링크를 클릭하기 전에 해당 스타일이 적용되며, 일반적으로 링크의 기본 색상, 텍스트 스타일, 배경 등을 변경하는 데 사용됩니다. .btn:visited는 이미 방문한 링크의 스타일을 지정하는데 사용됩니다. 사용자가 링크를 클릭하여 방문한 이후에 해당 스타일이 적용됩니다. 이를 통..

8. Creating Cool CSS Animations

한 가지 문제가 발생했는데 로고에 hover를 하는 순간 무한 루프에 빠져 우다다다다 하는 애니메이션 오류가 발생한 것 이 경우에는 박스에 hover 효과를 줬을 때 .logo가 움직이도록 작성해야 한다. .logo-box:hover .logo { animation: moveInLeft 1s ease-out; backface-visibility: hidden; } 로딩될 때 글자가 오른쪽 / 왼쪽에서 날라오면서 글자 투명도가 달라지는 효과를 적용할 수 있게 되었다!

7. Building the Header - Part 2

계속해서 프로젝트를 만들고 css로 중앙정렬하는 방법들을 배운다 줄간격 : letter-spacing position: absolute를 이용한 중앙 정렬 방법 선생님이 아주 간단하게 설명해줘서 바로 이해! /* COLORS: Light green: #7ed56f Medium green: #55c57a Dark green: #28b485 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", "Sans-serif"; font-weight: 400; font-size: 16px; line-height: 1.7; color: #777; padding: 30px; } .header { height: 95vh; bac..

6. Building the Header

Linear-gradient와 Clip-path를 배웠다 Linear-gradient는 색상을 합치는 그라데이션 효과를 줄 수 있고 clip path는 네 개의 꼭지점들을 기준으로 모양을 만들 수 있다 기본 초기화 방법을 배운다 브라우저가 페이지를 같은 방식으로 렌더링하기 위해서 사용했던 노멀라이즈 지금은 universal selector로 간단하게 초기화한다. * {} 하지만 상속에 대한 개념 때문에 font-family는 body 속성 안에 추가한다. /* COLORS: Light green: #7ed56f Medium green: #55c57a Dark green: #28b485 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font..

2. Read Before Start

시작하기 전에 읽어보세요! 1️⃣ 스타터 코드 다운로드 과정을 시작하기 전에 아래 GitHub 저장소에서 시작 파일, 최종 프로젝트 코드 및 과정 슬라이드를 다운로드하십시오. 🚨 GitHub의 FAQ를 읽어보세요! 저를 믿으세요, 당신은 결국 이러한 질문들 중 일부를 물을 것입니다 😉 👉 GitHub의 과정 자료 및 지침 2️⃣ 커뮤니티 및 리소스 👉 Discord에는 60,000명 이상의 학생이 있는 매우 친근한 학생 커뮤니티가 있습니다 . 여기에서 귀하와 같은 다른 학생들과 함께 학습하고 새로운 과정에 대한 업데이트를 받을 수 있습니다 . 여기를 클릭하여 가입하세요 ! 👉 과정 중에 우리는 내 리소스 페이지 에 있는 많은 온라인 도구와 리소스를 사용합니다 . 👋 프로 팁: 메모를 할 때 강의 번호를 ..

1. Welcome to the Most Advanced CSS Course Ever!

Udemy 강의 추천 찾아보다가 누군가 이 강사님 것을 강추하셔서 나도 한 번 간밤에 결제해봤다 Advanced CSS and Sass: Flexbox, Grid, Animations and More! 1. Welcome to the Most Advanced CSS Course Ever! CSS에 대한 뭔가 깊은 지식이 부족한 것 같기도하고 기본 지식은 있는데 좀 더 화려한 것을 만들기에는 부족하다고 느꼈다. 멋진 포폴 완성을 위해 강의를 알차게 또 들어보자!

반응형