반응형 애니메이션3 [웹 디자인] 20일차: 애니메이션과 트랜지션 CSS 트랜지션CSS 트랜지션은 요소의 스타일이 변경될 때 그 변화를 부드럽게 만들어주는 기능입니다. 트랜지션을 사용하면 스타일 변경을 애니메이션처럼 자연스럽게 처리할 수 있습니다.트랜지션 기본 문법transition-property: 트랜지션 효과를 적용할 속성을 지정합니다.transition-duration: 트랜지션 효과가 완료되는 데 걸리는 시간을 지정합니다.transition-timing-function: 트랜지션 효과의 진행 속도를 지정합니다.transition-delay: 트랜지션 효과가 시작되기 전에 대기할 시간을 지정합니다.예제:.box { width: 100px; height: 100px; background-color: blue; transition: width 2s, heig.. 2024. 8. 20. [포트폴리오 페이지] 다음 과정 1. 반응형 디자인 구현모든 화면 크기에서 잘 작동하는 웹사이트를 만들기 위해 반응형 디자인을 구현하세요. 미디어 쿼리를 사용하여 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 조정합니다.예시:styles.css (추가된 미디어 쿼리)@media (max-width: 768px) { nav ul li { display: block; margin: 1em 0; } #project-list { flex-direction: column; } .project { flex: 1 1 100%; }}2. 프로젝트 상세 페이지 추가각 프로젝트에 대한 상세 페이지를 추가하여 프로젝트의 구체적인 내용과 이미지를 포함할 수 있습니다.예시:새.. 2024. 6. 16. [CSS] CSS 심화2 CSS 학습의 다음 단계는 CSS의 고급 기능과 기법을 배우고, 이를 통해 더욱 복잡하고 세련된 웹 디자인을 구현하는 것입니다. 아래에는 CSS를 더 깊이 이해하고 활용할 수 있는 고급 주제와 학습 계획을 소개합니다.1. CSS 전처리기 (Preprocessor)CSS 전처리기를 사용하면 CSS를 더 효율적으로 작성하고 관리할 수 있습니다. 대표적인 전처리기로는 Sass와 LESS가 있습니다.1.1 Sass (Syntactically Awesome Stylesheets)Sass는 CSS를 더 강력하게 만드는 전처리기입니다. 변수, 중첩(Nesting), 믹스인(Mixin) 등을 사용하여 코드 재사용성을 높일 수 있습니다.변수와 중첩 예제// 변수 사용$primary-color: #4CAF50;$secon.. 2024. 6. 8. 이전 1 다음 반응형