CSS13 CSS 우선순위와 Custom Properties, 애니메이션 CSS 우선순위 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 수선시 적용 우선순위 계산 inline: 1000점 id: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0 순위 CSS 우선순위 div 1번(인라인 스타일 우선) div 2번(id 우선) div 3번(class 우선) div 4번(같은 속성의 경우 나중에 적용한 것이 우선) div 5번(같은 속성의 경우 나중에 적용한 것이 우선, 외부 스타일 시트 적용) li 1번(점수가 높은 속성이 적용) div 6번(!important 우선) div { background.. 2024. 4. 12. 과제 CSS에 애니메이션 적용하기 @keyframes moving{ from { padding-top: 100%; transform: rotate(720deg); } to { padding-top: 0%; transform: rotate(0deg); } } @keyframes rolling { from { left: 70px; /* 초기 위치: 부모 요소의 왼쪽 끝 */ transform: rotate(0deg); } to { left: calc(100% - 120px); /* 최종 위치: 부모 요소의 너비에서 요소의 너비를 뺀 값만큼 이동 */ transform: rotate(2880deg); } } #icon1 { animation: rolling 5s linear infinite alternate; animation-delay: 4.. 2024. 4. 12. CSS 미디어 쿼리 미디어 쿼리(media query) 반응형웹 하나의 웹사이트에서 pc, 스마트폰 태블릿 등 접속하는 디스플레이 종료에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 @media 매체유형 and (속성에 대한 조건) { css 코드 ... } 미디어쿼리1 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam magni rem, deserunt, facilis doloremque ab vel dolore veniam laborum nemo voluptatum sequi, velit numquam sit minus. Sint, facilis dicta!Lorem ipsum dolor sit amet.. 2024. 4. 11. CSS 레이아웃, flex 2단 레이아웃 HTML 다단 레이아웃 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam facilis nostrum veritatis reprehenderit illum quod architecto dignissimos soluta perspiciatis reiciendis quasi quibusdam vel!Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias eaque quaerat officiis dolores, ducimus aperiam quisquam fa.. 2024. 4. 11. 이전 1 2 3 4 다음
