🌐 웹 접근성이란?웹사이트에서 제공하는 정보를 모든 사람(장애인, 고령자)이 동등하게 접할 수 있도록 보장해주는 것입니다.웹 접근성은 꼭 필요하지만 대기업 페이지를 제외하고 쇼핑몰, 작은 사이트 등을 볼 경우 웬만하면 웹 접근성을 지키지 않은 사이트들이 많습니다.이 페이지에서는 웹 접근성을 지키는 방법에 대해 주로 설명하겠습니다.웹 접근성 설명에 관한 자세한 내용은 안나옵니다...📌 웹 접근성 지키는 방법제가 생각하기에 주로 사용된다고 생각되는 것들을 소개하겠습니다.input, selectinput, select를 사용할 때, label이랑 한 세트처럼 써야 하지만, 보통은 그냥 input만 쓰는 경우가 있습니다.스크린 리더기로 읽을 경우, 어떤 역할의 input인지 알 수 없습니다.이를 해결하려면,..

🤔 Addon-controls 란?공식문서를 해석해보면, 따로 코드화 작성 없이 동적으로 상호 작용할 수 있는 그래픽 UI를 제공한다고 정의되어 있습니다.현재 최신 storybook을 설치하면 예제에는 있지만 사용하려면 다운을 받아야 합니다.해당 글은 react + typescript 기준으로 작성됩니다.🔨 설치하기npm i -D @storybook/addon-controls설치가 끝나면 .storybook/main.js에 addon을 추가해줍니다.//main.jsmodule.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/ad..

💉 react에 storybook 적용하기react + typescript + storybook 프로젝트를 만들어보려고 합니다.React 설치먼저, 타입 스크립트가 적용된 리액트 프로젝트를 생성해보겠습니다.npx create-react-app 프로젝트명 --typescript생성된 프로젝트의 src 폴더 에서 안 쓰는 파일들을 지워줍니다.(필수로 지워야 하는 것은 아닙니다.)// 삭제 후 목록src├── App.tsx├── index.tsx├── react-app-env.d.ts├── reportWebVitals.ts└── setupTests.tsstorybook 적용콘솔 창에 아래 명령어를 쳐줍니다.npx -p @storybook/cli sb init --type react_scripts위 명령어를 ..

문법문자보간선택자나 속성은 일반 변수로 처리가 불가능합니다.이를 처리하려면, #{var_name}을 사용하면 코드의 어디든지 변수 값을 넣을 수 있습니다.// SCSS$font-family: "Roboto";@import url("/fonts/#{$font-family}");.header { font-family: #{$font-family};}=== Compile ===// CSS@import url("/fonts/Roboto");.header { font-family: Roboto;} 위 코드는 .header 클래스에 Roboto 폰트를 적용하는 코드입니다. font-family 속성은 일반 변수로 처리할 수 없기 때문에, #{var_name}을 사용하여 변수 값을 넣어줍니다. 가변 인수가변 인수..

🌐 크로스 브라우징이란?크로스 브라우징이란?어떤 환경에서 접근하여도 동등하게 작동되는 것을 말합니다. 📢 크로스 브라우징을 해야 하는 이유크로스 브라우징을 해야 하는 이유가 요즘 대부분의 사람들이 크롬이나 웨일을 쓴다고 생각합니다.브라우저 점유율 확인 사이트에서 한국 브라우저 점유율 확인해 본 결과 압도적으로 크롬 브라우저 사용자가 많다는 것을 알 수 있습니다. 하지만 압도적으로 많다고 하여 16%의 IE유저와 그 이하 브라우저 사용자가 해당 브라우저로 접속했을 때 소외감을 느껴서는 안 됩니다. 🔨 크로스 브라우징을 하는 방법크로스 브라우징을 하는 방법으로 가장 좋은 방법으로는 각 브라우저를 직접 들어가는 방법입니다.체크 리스트크롬웨일IEFirefoxEdgeOperaSafari특이사항윈도우에서 작업..

🤔 SCSS의 핵심...이라고 생각하는 것3 중첩은 개인적인 기준입니다.저는 SCSS의 핵심은 중첩이라고 생각합니다. 보통 3 중첩 기준으로, MAX 4중첩으로 작성합니다.3중첩을3 중첩을 기준으로 하는 이유는 3 중첩을 지키지 않고 작성하다 보면 코드 길이가 엄청 늘어나고, 컴파일된 CSS에도 엄청나게 많이 중첩된 클래스를 볼 수 있습니다.4 중첩 이상 필요할 경우 아래와 같이 작성합니다.#wrap { .A .B { color: red; }}📄 SCSS 문법이번 글에서는 SCSS를 작성할 때, 기본적으로 많이 사용되는 문법을 위주로 써보겠습니다.UTF-8 설정코드 내에서 한글을 사용하려면 설정해야 합니다.@charset "UTF-8";상위 선택자&을 사용하면 부모 선택자를 참조(치환)할 수..