본문 바로가기

CSS

(3)
[CSS] 로딩 애니메이션 출처 : https://studiomeal.com/archives/177 로딩 애니메이션, CSS로 만들어보자 studiomeal.com @keyframes spin { 100% { transform: rotate(360deg); } } .spinner { display: inline-block; width: 50px; height: 50px; border: 5px solid yellow; border-color: yellow transparent transparent; border-radius: 50%; animation: spin 1s linear infinite; } 이렇게 쉽게 할 수가 있구나.... 역시 많이 배우고 해야 한다.
[CSS] Pseudo-Class Selectors Level 4 - :is, :where 출처 : https://web.dev/css-is-and-where/ New CSS functional pseudo-class selectors :is() and :where() These seemingly small additions to CSS selector syntax are going to have a big impact. web.dev :is() /* before */ h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink; } /* after */ :is(h1,h2,h3,h4,h5,h6) > b { color: hotpink; } :where() :is 와 기능적으로는 같은 함수, 단 우선 순위가 :is 가 높고, :where 는 우..
[ CSS3 ] CSS 기초 CSS ( Cascade Style Sheet ) 의 약자로서 W3C의 CSS 규격으로 표준화 되어 있습니다. 요즘 웹 문서들은 대부분 태그를 사용하는 것 보다 태그와 CSS를 이용하는 쪽으로 변화하고 있습니다. 1) CSS를 배워야 하는 이유? (1) 통일감 있는 문서 작성이 가능 -> 한 번만 정의하면 웹 문서에 일관되게 적용할 수 있습니다. (2) 문서 관리의 편리 -> 스타일 시트 파일을 만들어놓으면 어떤 문서든 편하게 적용 가능합니다. (3) 웹 문서의 편집이 자유로움 -> 기존 태그를 이용한 편집보다 많은 자유도를 제공합니다. 2) CSS 적용 사례 예제 ( PhoneGap의 튜토리얼 Index.html ) > 위의 두 그림에서 가장 큰 차이는 CSS파일을 지정했다는 것..