AI와 데이터 사이언스의 이론과 실전

1. CSS Animation 요소의 현재 스타일을 다른 스타일로 변환하는 기능을 제공합니다. 애니메이션 효과를 넣습니다. 0% 5% 50% 100% 장면1 장면2 장면3 장면4 위와 같이 원하는 퍼센트에 원하는 장면을 넣으면 장면 사이의 효과를 css에서 알아서 주게됩니다. 이때 시작은 from, 끝은 to로 표현할 수 있습니다. 1.1. CSS Animation의 속성 animation-name : 애니메이션의 이름을 설정 animation-fill-mode : 애니메이션이 끝난 후 어떻게 처리할지 결정 forwards : 애니메이션 키프레임이 완료되었을때 마지막 프레임을 유지(기본값 : 끝나면 첫장면을 보여줌) animation-direction : 애니메이션의 진행방향을 정하는 속성 reverse..

1. Transform trnasform 은 2차원 좌표에서 요소를 변형시키는 기능을 가진 속성입니다. translate : 이동 rotate : 회전 (각도deg) scale : 확대, 축소 (비율) skew : 경사, 비틀기 (각도deg) 2. 벤더 프리픽스 (Vender Prefix) 벤더 프리픽스는 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사입니다. w3c css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙이고 원하는 새로운 기능을 작성하여 사용합니다. 2.1. 벤터 프리픽스 작성법 속성자 { 적용되지 않을때 실행할 코드; 벤더 프리픽스를 사용한 코드(버전별..

CSS를 작성해보시면 원하는 대로 스타일이 적용이 안되는 문제에 직면할 수 있습니다. CSS는 에러코드가 발생하지 않음으로 해결하기에 큰 어려움을 겪는 경우도 많습니다. 그래서 오늘은 CSS에 적용하는 규칙인 우선순위에 대해서 알아보겠습니다. 1. CSS 우선순위 연산 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일과 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부 외부 인라인 스타일 시트 중 인라인을 우선시 적용 계산식 inline: 1000점 id 속성 : 100점 class, 속성 선택자 : 10점 element : 1점 1.1. 예시1 css우선순위 div 1번 div 2번 div 3번 div 4번 div 5번 li 1번 div 6번 ..

1. 반응형 웹이란? 반응형 웹 (Responsive Web Design) 이란 하나의 웹사이트에서 pc,스마트폰,태블릿 등 접속하는 디스플레이에 따라서 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근방법입니다. 반응형 웹은 웹 페이지의 구조, 레이아웃, 컨텐츠 및 디자인을 유연하게 만들어 다양한 디바이스에서 일관된 사용자 경험을 제공합니다. 이는 그리드 시스템, 유동적 이미지, 폰트 크기 조절 등 다양한 기술을 포함합니다. 2. 미디어 쿼리 (Media Query) 미디어 쿼리는 반응형 웹 디자인을 구현하기 위한 기술 중 하나입니다. 이는 CSS3의 기능으로, 화면 너비, 해상도, 뷰포트 방향 및 기타 미디어 특성에 따라 스타일을 동적으로 조절하는 데 사용됩니다. 미디어 쿼리는 반응형 웹 디자인의 ..