본문 바로가기
반응형

CSS312

css 커스텀 프로퍼티 사용법 :root { --mainBgColor: gold; } body { background: var(--mainBgColor); } /* 대소문자를 구분함 MainBgColor !== mainBgColor */ 이 변수는 js에서도 읽어들일 수 있습니다. const myBg = getComputedStyle(document.documentElement).getPropertyValue("--mainBgColor") nuxt3 처음에 나오는 페이지도 비슷하게 구현해볼 수 있다. https://jsfiddle.net/hyuckjin/k16tego4/9/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net 2023. 11. 10.
clamp() clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하고 작은 CSS 코드만으로 구현이 가능하기 때문에, 단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리합니다. h1 { font-size: clamp(16px, 5vw, 34px); } /* clamp(최소값 16px, 유연한값 5vw, 최대값 34px) */ 5vw의 폰트사이즈를 가질수 있는데 최소 16px, 최대 34px까지 커질 수 있습니다. 패딩, 마진값에서도 사용이 가능합니다. 미디어쿼리를 대신해서 훨씬 간결하고 유지보수가 쉬운 반응형 웹을 제작할 수 있지만 최소, 최대 값을 명확하게 제한할 수 있는 경우에만 사용할 수 있으므로 용.. 2022. 12. 6.
: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.
한줄, 여러줄 말줄임 처리 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 한줄 처리는 아래처럼 간단하게 처리할 수 있습니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dum.. 2020. 11. 16.
:focus-within :focus-within은 포커스를 받은 요소와 그 요소를 포함하는 요소까지 나타냅니다. 필드내에서 하나가 포커스 된 경우 전체를 강조하거나 접근성을 위해 tab키로 메뉴 이동시 메뉴의 하위메뉴가 계속 나타날 수 있게 해줍니다. 메뉴1 뎁스2 - 메뉴1 뎁스2 - 메뉴2 뎁스2 - 메뉴3 뎁스2 - 메뉴4 메뉴2 뎁스2 - 메뉴1 뎁스2 - 메뉴2 뎁스2 - 메뉴3 메뉴3 .depth2 { display: none; } .depth1 li:focus-within .depth2 { display: block; } jsfiddle에서 보기 jsfiddle.net/hyuckjin/vhxqtwjL/ 2020. 10. 12.
반응형

티스토리툴바