본문 바로가기

CSS37

:is() 와 :where() CSS에 선택자 구문이 추가되었습니다. :is() 와 :where()로 선택자들을 그룹화할 수 있습니다. :where(header, main, footer) p { color: blue; } section :is(.title, .content) { background: #999; } button:is(.focus, :focus) { border: 2px solid green; } 이 둘의 차이점은 명시도의 차이입니다. :where()는 명시도가 없지만 :is()는 선택자의 명시도를 따라갑니다. :is()-styled links Here is my main content. This contains a link. Here is my aside content. This also contains a link. .. 2022. 5. 2.
CSS방법론 SMACSS (Scalable and Modular Architecture for CSS) SMACSS는 기본스타일(Base), 레이아웃스타일(Layout), 모듈스타일(Module), 상태스타일(State), 테마스타일(Theme)로 총 5가지로 나뉩니다. 이렇게 함으로 규칙과 패턴이 생기고 스타일을 이해하기 쉽게 정리합니다. 기본스타일(Base) 초기 설정을 말하며 reset.css도 포함됩니다. 아이디나 클래스 선택자를 포함하지 않으며 !important는 허용하지 않습니다. body, p, table, form, fieldset, legend, input, button ... { margin: 0; padding: 0; } 레이아웃스타일(Layout) 여러 요소를 배치하고 구별하는데 사용합니다. 주요 컴포넌트는 아이디, 하위 컴포넌트는 클래스를 사용합니다. 클래스명을 사용할때는 접두사로.. 2021. 8. 6.
flex를 이용한 반응형 레이아웃 display: flex 를 이용한 레이아웃입니다. Header Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aside 1 Aside 2 Footer .wrapper { display: flex; flex-flow: row wrap; font-weight: .. 2019. 9. 29.
아이폰 버튼 효과 HMTL + CSS3로 아이폰 버튼 효과를 만들었습니다. 동의 거부 .btn_wrap { padding: 50px; } .btn_wrap label { font-size: 30px; } .btn { display: inline-block; position: relative; background: #b2b2b2; border-radius: 30px; width: 100px; height: 50px; cursor: pointer; vertical-align: middle; transition: all 0.3s; } .btn:after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 48px; height: 48px; bor.. 2019. 9. 26.
will-change will-change는 변화가 예상되는 요소를 브라우저에게 미리 알려줍니다. 브라우저는 실제 요소가 변화되기 전에 적절하게 최적화를 할 수 있습니다. 큰 비용이 드는 변화도 최적화로 인해 페이지의 반응성을 증가시킬 수 있습니다. will-change의 지원 범위 will-change의 속성 will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: top, left; auto 기본값으로 브라우저는 별다른 최적화를 실시하지 않습니다. scroll-position 스크롤 할 때 엘리먼트의 위치가 변경될 것을 알려줍니다. 이 값을 설정하면 브라우저는 스크롤 가능한 엘리먼트를 .. 2019. 9. 26.
텍스트에 색을 반씩 넣는 효과 가상 엘리먼트와 data 속성을 이용하여 만들어 보겠습니다. 1 split text color 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body { height: 100vh; margin: 0; background: linear-gradient(90deg, #3498db 50%, #ffffff 50%); } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: #3498db; font-size: 7vw; font-family: 'Open Sans', sans-serif; font-weigh.. 2019. 9. 25.

티스토리툴바