DDD120의 기록장 DDD120의 기록장

CSS

• [CSS] focus-within과 focus-visible

  CSS 2024. 1. 10. 17:17

  CSS에서 포커스 상태를 스타일링 하기 위해 가상클래스인 focus를 주로 사용하였지만 focus 이외에 focus-within과 focus-visible도 있다는 사실을 알았다. focus-within이란? focus-within을 사용한 요소는 해당 요소나 내부 요소 중에 포커스 상태가 되면 활성화가 된다. div:focus-within { background: red; } div 요소에 focus-within을 사용하여 스타일링을 한 경우 div 안의 input이 포커스를 받으면 활성화가 되어 배경색이 빨강색이 된다. 기존의 focus와 달리 해당 요소를 포함하여 내부 요소까지 감지하여 활성화가 된다는 차이점이 있다. focus-visible이란? focus-visible을 사용한 요소는 해당 요소..

  Read More
• [CSS] 가변 폰트(Variable fonts)란?

  CSS 2023. 8. 14. 23:52

  가변 폰트(Variable Font)은 한 개의 폰트 파일 안에 여러 개의 스타일을 담을 수 있는 기술이다. 일반적으로, 폰트은 여러 개의 별도 파일로 제공되며, 각각의 파일은 다른 스타일를 담고 있다. 예를 들어, 'Regular', 'Medium ', 'Bold'과 같은 여러 형태의 폰트은 각각 별도의 파일로 제공되었고, 이는 애플리케이션을 개발할 때 여러 폰트 파일을 관리하고 불러와야 하는 번거로움을 가져왔다. 가변 폰트은 이런 문제를 해결하고자 만들어진 개념이다. 원하는 두께나 스타일을 프로그래밍적으로 선택할 수 있다. 이를 통해 여러 폰트 파일 관리의 번거로움이 줄어들고 데이터의 크기와 다운로드 시간을 줄일 수 있다. Get started by importing the font you would..

  Read More
• [CSS] color-scheme, prefers-color-scheme 속성

  CSS 2023. 7. 10. 23:39

  color-scheme - CSS: Cascading Style Sheets | MDN The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. developer.mozilla.org color-scheme이란 속성을 봐서 무엇인지 찾아보았다. 요즘 웹페이지에서 많이 다크 모드를 구현하듯이 속성의 값을 'light'이나 'dark' 등을 사용하게 되면 운영체제 시스템에서 모드에 맞게 UI를 조정하는 속성인 것 같다. See the Pen Untitled by DDD120 (@DDD120) on CodePen. 위의 CSS 코드를 보면 배경색 등 따로 스타일을..

  Read More
• [CSS] SVG path의 currentColor 키워드

  CSS 2023. 4. 13. 17:24

  CSS의 currentColor 키워드는 현재 color 속성 값을 그대로 상속받는 키워드이다. 다크모드를 구현할 때 svg를 사용하였는데 path fill 속성에다 모드가 바뀔 때마다 color 값을 주고 싶었다. 이때 currentColor 값을 사용하면 현재 color 값을 상속받아 다크모드를 구현할 수 있었다.

  Read More
• [CSS] 창 축소 시 요소 짤림 해결

  CSS 2023. 3. 13. 15:24

  반응형이 아닌 요소의 너비가 딱 정해진 웹페이지를 만드는 중에 창을 축소하거나 화면을 확대할 때 스크롤이 생기지만 요소의 일부가 짤려 보이지 않는 경우가 생겼다. 이때 min-width, min-height를 이용하여 해결이 가능하다. 만약 보여줄 요소가 width는 1280px, height가 600px이라면 아래와 같이 적용해주면 된다. 나의 경우 body에 적용하니 해결되었다. min-width: 1280px; min-height: 600px;

  Read More
• [CSS] 이미지 Layout Shift 방지

  CSS 2022. 10. 26. 19:15

  이미지에 사이즈를 명시해주지 않으면 페이지 레이아웃이 변동(Layout Shift)되는 모습을 종종 볼 수 있다. (이미지 뿐만 아니라 동적으로 삽입되는 컨텐츠, 광고들도 마찬가지) 이는 사용자 경험에 좋지 않다. 따라서 해결방법으로 이미지 사이즈를 명시해주면 된다. 하지만 요즘은 반응형으로 많이 제작하는 터라 직접적인 사이즈를 명시하기보다는 width:100%과 같은 스타일로 작성된 코드들을 많이 볼 수 있다. 이때 aspect-ratio를 사용하면 된다. img { width: 100%; height: auto; aspect-ratio: width / height; } aspect-ratio 속성에 관한 글은 예전글로 대신 대체한다 [CSS] aspect-ratio : 요소의 비율 유지하기 목적 반응..

  Read More
• [CSS] flex: 1이란

  CSS 2022. 9. 14. 20:31

  flex: 1을 사용할 때마다 헷갈려가지고 매번 구글에 검색하였다. 이 의미에 대해 확실히 이해하고자 쓴다! flex flex-grow, flex-shrink, flex-basis를 한 번에 사용하는 단축 속성 flex: 1 === flex: 1 1 === flex: 1 1 0 flex: 1은 flex: 1 1, flex: 1 1 0과 같다. 즉, 아래와 같다. flex-grow: 1; flex-shrink: 1; flex-basis: 0; flex-grow [기본값] flex-grow: 0; 0 : 부모의 너비가 남을 경우에도 해당 아이템의 기본 너비를 유지한다. 1 : 부모의 너비가 남을 경우 너비를 채운다. flex-shrink [기본값] flex-grow: 1 0 : 부모의 너비가 해당 아이템보다..

  Read More
• [CSS] non-boolean attribute warning

  CSS 2022. 9. 4. 16:52

  Warning: Received `true` for a non-boolean attribute `속성`. If you want to write it to the DOM, pass a string instead: 속성="true" or 속성={value.toString()}. styled-components 사용 시 마주친 오류이다. 이 경고 메시지는 비표준 속성이 HTML DOM 요소에 첨부되고 있음을 나타낸다. const Link = props => ( {props.text} ) const StyledComp = styled(Link)` color: ${props => (props.red ? 'red' : 'blue')}; ` 위의 코드는 아래처럼 렌더링된다. Click React는 요소에 대해 유효한..

  Read More