본문 바로가기

Front-end85

[웹접근성]html 기본태그에도 역할 속성 (role)을 사용해야할까? role 속성을 명시적으로 추가해야 하는 경우를 살펴보겠습니다. 기본적으로 HTML 요소들은 자신의 태그에 따라 적절한 역할(role)을 가지고 있기 때문에 대부분의 경우에는 별도로 role 속성을 지정할 필요가 없습니다. 하지만 몇 가지 상황에서는 추가적인 role 속성을 사용하여 요소의 역할을 명확히 할 수 있습니다. 결론을 먼저 말하자면, 기본적인 태그에 똑같이 role 을 지정할 필요는 없습니다.1. button 요소사용 예시: 확인추가 고려 사항: 요소는 기본적으로 버튼 역할을 가지므로 일반적으로 별도의 role="button"을 지정할 필요는 없습니다. 단, 특정 상황에서 role 속성을 사용하여 추가적인 의미를 전달할 필요가 있을 수 있습니다 (예: 사용자 정의 버튼 디자인).2. inpu.. 2024. 6. 20.
[웹접근성]웹 접근성을 높이기 위한 주요 HTML 속성과 ARIA 속성 주요 HTML 속성alt: 이미지의 대체 텍스트를 제공합니다.title: 요소에 대한 추가 정보나 설명을 제공합니다 (툴팁으로 표시될 수 있음).href: 링크의 목적지 URL을 지정합니다.src: 이미지, 오디오, 비디오 등의 자원의 경로를 지정합니다.id: 요소의 고유 식별자를 제공합니다.class: 요소를 스타일링하기 위한 클래스 이름을 지정합니다.style: 요소에 인라인 스타일을 지정합니다.tabindex: 요소의 탭 순서를 명시적으로 지정합니다.type: input 요소의 타입을 지정합니다 (예: text, checkbox, radio 등).name: input 요소의 이름을 지정합니다.ARIA 속성ARIA (Accessible Rich Internet Applications)는 웹 콘텐츠와 .. 2024. 6. 20.
[웹접근성]슬라이더, 프로그레스바에 'aria-valuenow' 속성을 사용하자 aria-valuenow는 ARIA(Accessible Rich Internet Applications) 속성 중 하나로, 접근성 향상을 위해 사용됩니다. 이 속성은 주로 슬라이더, 프로그레스바, 스핀버튼 같은 위젯에서 현재 값을 나타내는 데 사용됩니다. 이는 시각 장애가 있는 사용자들이 화면 읽기 소프트웨어(screen reader)를 통해 위젯의 현재 상태를 이해할 수 있도록 돕습니다. 사용 예제슬라이더 (Slider):프로그레스바 (Progress Bar): 60%관련 ARIA 속성aria-valuemin: 위젯에서 가질 수 있는 최소값을 나타냅니다.aria-valuemax: 위젯에서 가질 수 있는 최대값을 나타냅니다.aria-valuetext: 시각적으로는 값이 아닌 텍스트로 상태를 설명할 .. 2024. 6. 20.
[CSS]display:flex; 일때 자식 요소들에 'order'로 좌우측 위치 변경하기 display:flex; 로 감싼 레이아웃에서 좌측(컨텐츠영역), 우측(사이드영역)이 존재할때 CSS만으로 위치를 바꾸는 방법입니다.float 를 사용했을때는 float:left 혹은 float:right 만 변경하면 가능했지만, display:flex; 로 할경우는 다음과 같이 작성해줘야합니다. 레이아웃 예시HTML 사이드메뉴 내용 레이아웃은 위와 같다고 가정했을때입니다. CSS.container { display: flex;}.contents { width: calc(100% - 30%);}.aside { position: sticky; top: 0; right: 0; align-self: flex-start; .. 2024. 6. 20.
[CSS]부모요소가 display:flex; 일때 사이드 메뉴에 position:sticky; 를 적용해보자 부모요소가 display:flex; 일때 사이드 메뉴가 sticky 로 동작하게 하는 방법입니다.구조는 다음과 같습니다.HTML 컨텐츠 내용 사이드 메뉴(이부분이 position: sticky; 가 동작할 영역) 스크롤 하면 aside 영역이 sticky 가 될 부분입니다. CSS.container{ display:flex;}.contents{ width:calc(100% - 30%); /* aside 영역 만큼 빼줌 */}.aside{ align-self: flex-start; /* 이부분 추가 */ position: sticky; top: 45px; right: 0; width: 30%;} flex 컨테이너 내에서 자식 요소들은 기본.. 2024. 6. 20.
[CSS]반응형 사이트 calc() 함수와 예제 및 계산 방법에 대해 알아보기 calc()는 CSS에서 동적인 계산을 가능하게 하는 함수입니다. 이를 통해 길이, 백분율, 수치 등을 혼합하여 스타일을 동적으로 설정할 수 있습니다. calc() 함수는 CSS에서 다양한 상황에 유용하게 사용됩니다.calc() 함수의 사용법calc() 함수의 기본 구문은 다음과 같습니다:property: calc(expression);여기서 expression은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 등의 산술 연산을 포함할 수 있습니다. 사용 예제1. 너비 계산부모 요소의 너비에서 특정 픽셀 값을 뺀 너비를 설정하고 싶을 때 사용합니다..container { width: 100%;}.content { width: calc(100% - 20px);}이 예제에서 .content 요소.. 2024. 6. 20.
[SCSS]SCSS 기본 문법과 예시 calc 포함 SCSS(Sass)는 CSS를 더 쉽게 작성하고 관리할 수 있도록 돕는 CSS 전처리기입니다. SCSS는 Sass의 구문 중 하나로, CSS와 매우 유사한 구문을 사용합니다. SCSS의 기본 문법을 몇 가지 예시로 설명하겠습니다.1. 변수 (Variables)변수를 사용하여 재사용 가능한 값을 정의할 수 있습니다.$primary-color: #3498db;$font-stack: Helvetica, sans-serif;body { font-family: $font-stack; color: $primary-color;}2. 중첩 (Nesting)중첩을 사용하여 CSS 선택자를 계층적으로 작성할 수 있습니다.nav { ul { margin: 0; padding: 0; list-style:.. 2024. 6. 20.
[CSS]input 입력 필드가 자동완성될 때의 스타일을 정의 입력 필드 자동완성이 안나오게 하는 방법과 해당 요소에 스타일 정의하는 방법과 설명입니다. 자동완성 기능을 해제하는 방법 autocomplete='off' 를 넣게 되면, 자동완성 기능이 해제되며, 삭제하면 기본 활성화 됩니다.  자동완성 기능 스타일 정의input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 1000s ease-in-out 0s; -webkit-box-shadow: 0 0 0 30px inset transparent; -webkit-text-fill-color: #00.. 2024. 6. 20.
[Accessibility]웹접근성 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2" 강화된 항목 한국형 웹 콘텐츠 접근성 지침인 KWCAG (Korean Web Content Accessibility Guidelines)는 시간이 지남에 따라 업데이트되어 개정판이 발표되었습니다. 여기서 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2"의 차이를 요약하면 다음과 같습니다: 최신 웹 표준 및 기술 대응: KWCAG 2.1은 초기 버전으로, 주로 HTML, CSS, JavaScript 등의 기술을 기반으로 합니다. 반면 KWCAG 2.2는 보다 최신의 웹 표준 및 기술에 대응하도록 업데이트되어 있습니다. 예를 들어, 미디어 콘텐츠의 접근성, 동적 콘텐츠의 관리, 사용자 경험의 향상 등에 대한 추가적인 지침이 포함되어 있습니다.기술적 요구사항의 확대: KWCAG 2.2는 .. 2024. 6. 17.
[Bootstrap]부트스트랩 설명과 설치 방법 부트스트랩(Bootstrap)은 웹 개발을 위한 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 개발된 Bootstrap은 HTML, CSS, JavaScript로 작성된 도구 모음을 제공하여, 반응형(Responsive) 웹 디자인을 쉽게 구현할 수 있게 해줍니다. 주요 특징은 다음과 같습니다: 주요 특징반응형 디자인 (Responsive Design)다양한 화면 크기와 디바이스에 맞춰 자동으로 조정되는 반응형 웹 디자인을 지원합니다. 이를 통해 데스크톱, 태블릿, 모바일 디바이스에서 일관된 사용자 경험을 제공합니다.사전 설계된 컴포넌트버튼, 네비게이션 바, 폼, 카드, 모달 등 다양한 사전 설계된 UI 컴포넌트를 제공합니다. 이를 통해 빠르고 일관된 디자인을 구현할 수 있습.. 2024. 6. 17.
[Vue.js]'npm run serve' 실행 명령어를 다른 명령어로 변경하려면? vue 실행 혹은 빌드할때 명령어를 변경하는 방법입니다. 예를 들어 npm run serve 명령어를 npm run dev로 변경하려면 package.json 파일의 scripts 섹션을 수정하면 됩니다.이 섹션에는 NPM 명령어를 정의하는 스크립트가 포함되어 있습니다. 다음 단계를 따르면 됩니다: 프로젝트 루트 디렉토리에서 package.json 파일 열기:프로젝트 루트 디렉토리에 있는 package.json 파일을 열어야 합니다.scripts 섹션 수정:scripts 섹션에서 serve 스크립트를 dev 스크립트로 변경합니다. 예를 들어, 다음과 같이 수정합니다.{ "name": "your-project-name", "version": "0.1.0", "private": true, "scrip.. 2024. 6. 17.
[SCSS]프로젝트 SCSS 폴더 및 파일 구조 참고용 모바일에 최적화된 SCSS 구조를 설정하기 위해서는 프로젝트의 폴더 구조와 파일들을 체계적으로 관리하는 것이 중요합니다. 아래는 모바일 중심의 프로젝트에 적합한 SCSS 구조 예시입니다. 이 구조는 SCSS 파일들을 모듈화하여 유지보수가 쉽고, 확장 가능한 형태로 관리하는 것을 목표로 합니다.  프로젝트 폴더 구조 (vue.js 기준)project-root/├── src/│ ├── assets/│ │ ├── styles/│ │ │ ├── abstracts/│ │ │ │ ├── _variables.scss│ │ │ │ ├── _mixins.scss│ │ │ │ ├── _functions.scss│ │ │ ├── base/│ │ .. 2024. 6. 15.
[SCSS]mixin을 활용한 모바일 폰트 사이즈 설정(62.5%) CSS(Sass)에서 모바일 초기 셋팅을 위해 62.5%를 기준으로 폰트 크기와 관련된 믹스인과 함수를 설정할 수 있습니다. 이렇게 하면 rem 단위를 더 직관적으로 사용할 수 있게 됩니다. 예를 들어, 1rem이 10px로 설정되어 계산이 간편해집니다. 여기서는 기본 설정과 함께 유용한 믹스인 및 함수를 정의해 보겠습니다.  1. 기본 설정먼저, html 태그의 폰트 크기를 62.5%로 설정합니다. 이렇게 하면 기본 폰트 크기가 16px에서 10px로 변경됩니다.html { font-size: 62.5%; // 1rem = 10px}body { font-size: 1.6rem; // 16px margin: 0; padding: 0;} 2. 폰트 크기 믹스인폰트 크기를 쉽게 설정하기 위한 믹스인을.. 2024. 6. 15.
[Git]Git사용자 이름 설정하기 Git 커밋할때 엉뚱한 이름으로 커밋이 되거나, 프로젝트의 버전 관리 히스토리에 커밋을 만든 사용자를 식별하는 데 도움이 되기때문에 설정을 하셔야합니다. Git 사용자 이름 설정하기전역 설정전역 설정은 모든 Git 저장소에 적용됩니다. 1. 사용자 이름 설정git config --global user.name "Your Name" 이름이 "홍길동" 이라면 "Your Name"에 홍길동을 넣으시면 됩니다.  2. 이메일 주소 설정git config --global user.email "your.email@example.com" 이메일 주소 역시 사용하시는 이메일 주소를 넣습니다. 로컬 설정로컬 설정은 특정 Git 저장소에만 적용됩니다. 저장소의 루트 디렉토리에서 다음 명령어를 실행합니다. 1. 사용자 이름.. 2024. 6. 15.
[Typescript]타입스크립트의 특징 TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합으로 설계되었습니다. TypeScript는 대규모 애플리케이션 개발을 위한 정적 타입을 제공하며, JavaScript로 컴파일됩니다. 주요 특징은 다음과 같습니다.   1. 정적 타입 검사타입 시스템: TypeScript는 컴파일 타임에 타입 오류를 감지하여 코드의 안정성과 가독성을 향상시킵니다. 정적 타입 검사를 통해 개발 초기에 많은 버그를 발견할 수 있습니다.타입 추론: 개발자가 명시적으로 타입을 지정하지 않아도, TypeScript는 자동으로 타입을 추론합니다.2. ES6/ESNext 기능 지원TypeScript는 최신 ECMAScript 기능(ES6 이상)을 지원하며, 이를 구형 Jav.. 2024. 6. 13.
[웹접근성]모달창(레이어팝업) 포커스(focus) 회귀하려면? 모바일 스크린 리더 환경에서 활성화된 레이어(모달 창) 닫기 버튼을 실행할 때, 초점을 해당 레이어를 불러온 콘텐츠로 돌리는 방법을 설명하겠습니다. 이를 위해 JavaScript와 ARIA 속성을 사용하여 웹 접근성을 보장할 수 있습니다. 단계별 구현 방법HTML 구조 설정:모달을 열기 위한 버튼모달 레이어모달 닫기 버튼JavaScript로 포커스 관리:모달을 열 때 모달 내의 첫 번째 포커스 가능한 요소에 포커스를 설정모달을 닫을 때 포커스를 모달을 연 버튼으로 복귀HTML 예시모달 열기 모달 타이틀 닫기 모달 내용이 여기에 표시됩니다. CSS 예시.modal { display: none; /* 기본적으로 모달은 보이지 않음 */ positi.. 2024. 6. 13.
[웹접근성]웹접근성 속성과 예제 웹 접근성을 높이기 위해 HTML과 WAI-ARIA에서 제공하는 다양한 속성을 사용할 수 있습니다. 이 속성들은 장애가 있는 사용자들이 웹 콘텐츠를 더 쉽게 접근하고 상호작용할 수 있도록 돕습니다. 주요 웹 접근성 속성들은 다음과 같습니다.   HTML 접근성 속성alt (대체 텍스트)사용 요소: 설명: 이미지를 설명하는 텍스트를 제공하여 시각 장애인 사용자들이 이미지를 이해할 수 있도록 돕습니다.예시: title (제목)사용 요소: 대부분의 HTML 요소설명: 요소에 대한 추가 정보를 툴팁 형식으로 제공합니다.예시: 💾label (레이블)사용 요소: 설명: 입력 요소에 레이블을 제공하여 입력 필드의 용도를 설명합니다.예시: 이름:role (역할)사용 요소: 대부분의 HTML 요소설명: 요소의 역할을 .. 2024. 6. 13.
[웹접근성]aria-disabled 속성 aria-disabled 속성은 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 명세에서 제공하는 속성 중 하나로, 사용자 인터페이스 요소가 현재 비활성화되었음을 나타냅니다. 이는 주로 HTML 요소가 현재 사용 불가능한 상태일 때 시각적 효과뿐만 아니라 스크린 리더를 통해서도 이를 사용자에게 전달하기 위해 사용됩니다. aria-disabled 속성의 사용aria-disabled 속성은 true 또는 false 값을 가질 수 있습니다.aria-disabled="true": 요소가 비활성화되어 있고, 상호작용이 불가능함을 나타냅니다.aria-disabled="false": 요소가 활성화되어 있고, 상호작용이 가능.. 2024. 6. 13.
[웹접근성]WCAG와 KWCAG의 가장 큰 차이 WCAG(Web Content Accessibility Guidelines)와 KWCAG(Korean Web Content Accessibility Guidelines)는 모두 웹 콘텐츠의 접근성을 보장하기 위한 가이드라인이지만, 적용 범위와 세부 사항에서 차이가 있습니다. KWCAG는 WCAG를 기반으로 한국의 상황에 맞게 조정된 버전입니다. WCAG (Web Content Accessibility Guidelines)국제 표준: WCAG는 W3C(World Wide Web Consortium)에서 개발한 국제 표준입니다.버전: 최신 버전은 WCAG 2.1이며, 과거에 WCAG 1.0과 WCAG 2.0이 있었습니다. WCAG 2.2는 개발 중입니다.구성: 4가지 주요 원칙(인지할 수 있음, 운용할 수 .. 2024. 6. 13.
[웹접근성]웹접근성(a11y) 이란? 웹 접근성(Web Accessibility)은 장애가 있는 사람들을 포함한 모든 사용자가 웹사이트와 웹 애플리케이션을 이용할 수 있도록 보장하는 것입니다. 이는 시각, 청각, 신체, 인지, 언어, 학습 등 다양한 장애를 가진 사람들이 웹 콘텐츠에 접근하고 상호작용할 수 있도록 하는 것을 목표로 합니다.  "a11y"는 "accessibility"의 첫 글자 'a'와 마지막 글자 'y' 사이에 있는 11개의 문자를 나타내는 줄임말입니다. 이는 웹 접근성(웹 콘텐츠 접근성)을 지칭하는 약어로서, 모든 사용자가 웹 사이트나 애플리케이션을 이해하고 사용할 수 있도록 하는 개념을 포함합니다. https://www.wa.or.kr/m1/sub1.asp WA : 한국웹접근성인증평가원" data-og-descripti.. 2024. 6. 13.
[SCSS]@mixin 설명과 예시 @mixin은 Sass에서 사용되는 지시자로, 재사용 가능한 스타일 패턴을 정의하는 데 사용됩니다. @mixin은 일종의 함수로 생각할 수 있습니다. 함수는 코드를 한 번 작성하고 나중에 여러 곳에서 호출하여 재사용할 수 있게 해줍니다. 마찬가지로 @mixin은 스타일 블록을 정의하고 여러 규칙에서 재사용할 수 있도록 합니다.  예제1.예를 들어, 다음과 같이 tab-bar 믹스인을 정의할 수 있습니다.@mixin tab-bar($color, $height) { background-color: $color; height: $height; // 추가적인 탭 바 스타일 설정} tab-bar 믹스인은 탭 바(tab bar) 컴포넌트의 스타일을 생성하는데 사용될 수 있습니다. 이 믹스인은 $color와 $.. 2024. 6. 10.
[CSS]CSS 유용한 속성 pointer-event, user-select CSS에서 유용하게 사용되는 속성 두가지를 살펴보겠습니다. pointer-eventspointer-events는 CSS 속성으로, 요소가 마우스 이벤트(클릭, 터치 등)를 받을 수 있는지 여부를 제어합니다. 이 속성은 주로 요소가 사용자 상호작용을 받아들이거나 무시하도록 설정할 때 사용됩니다. user-select: noneuser-select: none;은 사용자 경험을 향상시키기 위해 사용자가 특정 텍스트를 선택하지 못하도록 하는 유용한 CSS 속성입니다. 이를 통해 텍스트 선택이 불필요하거나 방지해야 하는 상황에서 유용하게 사용할 수 있습니다. 예시.[disabled],[disabled='true']pointer-events:none;user-select:none; 2024. 6. 10.
[CSS]모든 가상 선택자 CSS 가상 선택자에는 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)가 포함됩니다. 모든 가상 선택자의 목록과 간단한 설명을 아래에 제공합니다.가상 클래스 (Pseudo-classes)동적 가상 클래스:hover: 마우스 커서가 요소 위에 있을 때:active: 요소가 활성화되었을 때 (보통 클릭된 상태):focus: 요소가 포커스를 받을 때 (키보드나 마우스에 의해):visited: 사용자가 방문한 링크:link: 방문하지 않은 링크:checked: 체크된 체크박스나 라디오 버튼:disabled: 비활성화된 요소:enabled: 활성화된 요소:focus-visible: 키보드 탐색에 의해 포커스된 요소:focus-within: 포커스를 포함한 하위 요소를 가진 요소.. 2024. 6. 7.
[Javascript]코딩테스트 프로그래머스 "양꼬치" 풀이 코딩테스트 연습 > 코딩테스트 > 입문 양꼬치문제 설명머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요. 제한사항0 n / 10 ≤ k 서비스로 받은 음료수는 모두 마십니다. 입출력 예 입출력 예 설명입출력 예 #1- 10인분을 시켜 서비스로 음료수를 하나 받아 총 10 * 12000 + 3 * 2000 - 1 * 2000 = 124,000원입니다. 입출력 예 #2- 64인분을 시켜 서비스로 음료수를 6개 받아 총 64 * 12000 + 6 * 2000 - 6 .. 2024. 5. 7.
[Javascript]텍스트필드 input 박스 포커스 했을때 class 추가/제거하기 javascript class를 이용해 객체를 생성 후 input 박스 포커스했을때와 아웃했을때 css를 추가/삭제하는 방법입니다. HTML 예시) 3개의 input 박스  CSS.focus{border:1px solid red} 포커스했을때 빨간색 라인추가하기 Javascriptclass TextField { constructor(textField){ this.elements = document.querySelectorAll('.' + textField); this.addFocusClass = this.addFocusClass.bind(this); this.removeFocusClass = this.removeFocusClass.bind(this); this.init(); } .. 2024. 5. 2.