본문 바로가기

민트코딩83

[웹접근성] header/footer는 오직 한번 사용? 아니! 일반적으로 header는 로고를, footer는 coryright를 담기 위해 한 번씩만 사용하는데, 사실 header는 가까운 부모의 타이틀 영역을, footer는 출처 영역을 담는 태그로, 반드시 한 번만 사용할 수 있는 건 아니다. { ...content } 다만 위에서 "영역"이라 표현했듯이 header안에 h2 하나만 들어가는 경우라면 header는 불필요한 태그라는 의견도 있다. mian / article과 같이 큰 영역에 타이틀 영역이라 구분할 수 있는 영역이 있을 때에 사용하는 것을 추천한다. article title 2023.08.27 article contents 1 article contents 2 article contents 3 article title article content.. 2023. 8. 27.
[웹접근성] CSS: outline는 절대 지우지 말 것! 간혹 'link / button을 누르고 난 후 생기는 border 좀 삭제해 주시겠어요?' 같은 QA 요청을 받는데.... outline: none은 웹접근성에 반하는 코드이다. 오히려 어디선가 은거하고 있는 outline: none가 없는지 찾아 제거해야 한다. 2023. 8. 27.
[웹접근성] Skip 메뉴 header의 존재로 main content까지 불필요한 리딩이 있기 때문에, 사용자가 바로 main으로 넘어갈 수 있도록 body 내 최상단에 skip 메뉴 리스트를 추가한다. Skip to main content Skip to footer 화면에 숨길 때는, 지난 blind 편에서 언급했듯이 text-indent:-9999px와 같은 방법이 아닌, 살짝~ 가리는 정도를 추천한다. [css-real] 웹접근성을 고려한 .blind(hidden) 처리 스크린리더와 브라우저별, 그리고 매해 업데이트되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법으로 해결될 수 있습니다~'라는 방법은 아직 없다 fresh-mint.tistory.com .skip { positio.. 2023. 8. 27.
[css] 망할 놈의 다크 모드 대응하기 3부: Chrome으로 확인 1. 개발자도구(F12)를 열어, 더보기 > More tools > Render 선택 2. 하단에 추가된 Render에서 Emulate CSS media feature prefers-color-scheme의 옵션을 dark로 변경 [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' fresh-mint.tistory.com [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통.. 2023. 8. 25.
[css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통해 간단히 이미지 전환할 수 있다 부수적인 이야기로, 다크모드 관련하여 검색해 보면, 순수한 흰색 배경의 이미지는 피하자는 글을 만날 수 있다. 어두운 배경으로 인해 빛 번짐 현상이 발생하며, 무엇보다 사용자의 눈의 피로도를 높이기 때문이다. 덧붙여, 이미지의 밝기를 줄이고 대비를 높이거나 그레이스케일을 낮춰 보다 피로도를 낮추자는 글들도 심심치 않게 찾을 수 있다. body.dark img { filter: brightness(.8) contrast(1.2); } @media (prefers-color-scheme: dark) { img { filter: brightness(.8.. 2023. 8. 25.
[css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' 를 외치며 dev에 올려보면, '내가 이제 복붙도 못하는 지경인가' 싶을 것이다. 아니다. 지원율이 너무나 낮을 뿐이다. 현재로서 스크립트 없이 우리가 선택할 수 있는 방법은 prefers-color-scheme 이다. 'prefers-color-scheme' 은 { } 안에 모든 컬러를 재정의하면 된다. .link { color: blue; } @media (prefers-color-scheme: dark) { .link { color: yellow; } } 다만 위와 같이 작성하면, 불필요하.. 2023. 8. 25.
[scss] @at-root가 아닌 @mixin으로 최상위 부모에 클래스 추가하기 .parent.bold .child span { font-weight: bold }를 지정하고자 할 때 @at-root를 잘못 활용하는 경우가 있다. .parent { .child { span { @at-root .bold & { font-weight: bold; } } } } 위의 컴파일 결과물은 .bold .parent .child span { font-weight: bold } 이다. @at-root를 이용하여 .parent에 .bold 클래스를 추가하고자 한다면 귀찮더라도 클래스명을 다 적어줘야 한다. .parent { .child { span { @at-root .parent.bold .child span { font-weight: bold; } } } } 그런데, 이를 간단히 해결해 주신 분이.. 2022. 5. 4.
[css] 텍스트 길이에 맞춰 너비 조절하기 grid-template-columns: minmax(최소너비, max-content) 1fr; HTML 삽입 미리보기할 수 없는 소스 위와 같은 경우, 간혹 "텍스트 길이에 맞춰 너비가 늘어나게 해주세요~" 라는 요청 때문에 로 변경하는 경우가 있다. 더이상 그러지 말자, 우리에겐 grid가 있다. HTML 삽입 미리보기할 수 없는 소스 grid-template-columns: minmax(최소너비, max-content) 1fr; 예로, grid-template-columns: minmax(100px, max-content) 1fr; 일 때, grid 첫번째 요소의 기본 너비는 100px이다. 하지만 콘텐츠가 길어 너비가 120px이 된다면, 화면에 그려지는 너비는 grid-template-columns: 120px 1fr과 같다. 결론은 과 이별하자. 가나다 가나다라마바사아자차카파타하 .gri.. 2022. 1. 25.
[css] Text Gradient with Gradient Rotate Animation 텍스트 그라디언트 효과 HTML 삽입 미리보기할 수 없는 소스 HTML 구조: Text Gradient scss 버전: .text-gradient { overflow: hidden; position: relative; display: inline-block; vertical-align: top; font-size: 40px; font-weight: 900; line-height: 1.4; &:before { content: ''; position: absolute; width: 110%; padding: 50% 0; top: 50%; left: -5%; transform: translateY(-50%) rotate(0deg); transform-origin: center; background-image: linear-gradi.. 2022. 1. 23.
[css] filter를 이용해 이미지를 white/black 실루엣 이미지로 변경 1. 화이트 실루엣으로 변경하기 -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); HTML 삽입 미리보기할 수 없는 소스 2. 블랙 실루엣으로 변경하기 -webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0); HTML 삽입 미리보기할 수 없는 소스 2022. 1. 22.
[css] n번째부터 m번째까지 선택하기 :nth-child(n+n):nth-child(-n+m) div:nth-child(1), div:nth-child(2), div:nth-child(3) { CSS 삽입 } 위 코드는 유지보수하기 곤란하다. 간단히 작성하자. div:nth-child(n+1):nth-child(-n+3) { CSS 삽입 } 예시: 13부터 33까지 선택 div:nth-child(n+13):nth-child(-n+33) { CSS 삽입 } 2022. 1. 22.
React Hook - { useEffect } Q. 화면이 등장하여, 2초가 지나면 alert 문구, "The maximum number of guests is 2 guests."를 삭제해보자. 단 업데이트될 때 재등장하지 않으며, 2초가 되기전 화면을 나갔다가 다시 돌아와도 2초가 유지되어야 한다. 앞서 useEffect를 배우고, 활용하여 작성해 보자. 1. uesEffect을 import 한다. import React, { useState, useEffect } from "react"; // useEffect 추가 2. uesEffect를 변수에 담지 말고, 바로 실행시킨다. useEffect( ()=> { 실행될 코드~~~ } ) 위 코드에서 useEffect의 "실행될 코드"가 실행되는 순간은, 1 컴포넌트가 그려질 때와 2 컴포넌트가 업데.. 2021. 11. 6.
React Router 리액트 라우터 활용편 + { useHistory } 뒤로가기 뒤로가기 버튼을 구현해보자(react-router-dom v5 이상, react v16.3 이상 사용 가능) 1. useHistory기능을 사용하기 위해 import 해온다. import { useParams, useHistory } from 'react-router-dom'; // useHistory 추가 2. useHistory를 변수가 담아준다. let history = useHistory(); 3. goBack() 함수를 실행한다. { history.goBack() }}>Back to main import React from "react"; import { useParams, useHistory } from 'react-router-dom'; function Detail(props){ let { .. 2021. 11. 6.
React Router 리액트 라우터 활용편 - 상세페이지 제작 Answer 1. App.js import { Route } from 'react-router-dom'; 2. Item.js import { Link } from 'react-router-dom'; { props.item.country }, { props.item.city } { props.item.price } won 3. Detail.js import { useParams } from 'react-router-dom'; let { id } = useParams(); let matchedItem = props.items.find(function(item){ return item.id == id; }); props.item[item위치] ➜ matchItem import { useState } from 'react'.. 2021. 11. 6.
React Router 리액트 라우터 활용편 - 상세페이지 제작 Quiz Q. 아래 코드를 변경하여, 각 컴포넌트 아이템(여행 상품)을 클릭하였을 때, 데이터 Id값을 path값으로 지닌 detail 페이지로 넘어가 보자. (예: /Detail/1~3) export default [ { id: 1, country : "Africa", city : "Sahara", price : "4,500,000" }, { id: 2, country : "Italy", city : "Venice", price : "2,000,000" }, { id: 3, country : "Turkey", city : "Cappadocia", price : "3,560,000" } ] import { useState } from 'react'; import './App.css'; import itemList.. 2021. 11. 6.

티스토리툴바