• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Front-end116

728x90
[Bootstrap]부트스트랩 설명과 설치 방법 부트스트랩(Bootstrap)은 웹 개발을 위한 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 개발된 Bootstrap은 HTML, CSS, JavaScript로 작성된 도구 모음을 제공하여, 반응형(Responsive) 웹 디자인을 쉽게 구현할 수 있게 해줍니다. 주요 특징은 다음과 같습니다: 주요 특징반응형 디자인 (Responsive Design)다양한 화면 크기와 디바이스에 맞춰 자동으로 조정되는 반응형 웹 디자인을 지원합니다. 이를 통해 데스크톱, 태블릿, 모바일 디바이스에서 일관된 사용자 경험을 제공합니다.사전 설계된 컴포넌트버튼, 네비게이션 바, 폼, 카드, 모달 등 다양한 사전 설계된 UI 컴포넌트를 제공합니다. 이를 통해 빠르고 일관된 디자인을 구현할 수 있습..
[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..
[SCSS]프로젝트 SCSS 폴더 및 파일 구조 참고용 모바일에 최적화된 SCSS 구조를 설정하기 위해서는 프로젝트의 폴더 구조와 파일들을 체계적으로 관리하는 것이 중요합니다. 아래는 모바일 중심의 프로젝트에 적합한 SCSS 구조 예시입니다. 이 구조는 SCSS 파일들을 모듈화하여 유지보수가 쉽고, 확장 가능한 형태로 관리하는 것을 목표로 합니다.  프로젝트 폴더 구조 (vue.js 기준)project-root/├── src/│ ├── assets/│ │ ├── styles/│ │ │ ├── abstracts/│ │ │ │ ├── _variables.scss│ │ │ │ ├── _mixins.scss│ │ │ │ ├── _functions.scss│ │ │ ├── base/│ │ ..
[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. 폰트 크기 믹스인폰트 크기를 쉽게 설정하기 위한 믹스인을..
[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. 사용자 이름..
[Typescript]타입스크립트의 특징 TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합으로 설계되었습니다. TypeScript는 대규모 애플리케이션 개발을 위한 정적 타입을 제공하며, JavaScript로 컴파일됩니다. 주요 특징은 다음과 같습니다.   1. 정적 타입 검사타입 시스템: TypeScript는 컴파일 타임에 타입 오류를 감지하여 코드의 안정성과 가독성을 향상시킵니다. 정적 타입 검사를 통해 개발 초기에 많은 버그를 발견할 수 있습니다.타입 추론: 개발자가 명시적으로 타입을 지정하지 않아도, TypeScript는 자동으로 타입을 추론합니다.2. ES6/ESNext 기능 지원TypeScript는 최신 ECMAScript 기능(ES6 이상)을 지원하며, 이를 구형 Jav..
[웹접근성]모달창(레이어팝업) 포커스(focus) 회귀하려면? 모바일 스크린 리더 환경에서 활성화된 레이어(모달 창) 닫기 버튼을 실행할 때, 초점을 해당 레이어를 불러온 콘텐츠로 돌리는 방법을 설명하겠습니다. 이를 위해 JavaScript와 ARIA 속성을 사용하여 웹 접근성을 보장할 수 있습니다. 단계별 구현 방법HTML 구조 설정:모달을 열기 위한 버튼모달 레이어모달 닫기 버튼JavaScript로 포커스 관리:모달을 열 때 모달 내의 첫 번째 포커스 가능한 요소에 포커스를 설정모달을 닫을 때 포커스를 모달을 연 버튼으로 복귀HTML 예시모달 열기 모달 타이틀 닫기 모달 내용이 여기에 표시됩니다. CSS 예시.modal { display: none; /* 기본적으로 모달은 보이지 않음 */ positi..
[웹접근성]웹접근성 속성과 예제 웹 접근성을 높이기 위해 HTML과 WAI-ARIA에서 제공하는 다양한 속성을 사용할 수 있습니다. 이 속성들은 장애가 있는 사용자들이 웹 콘텐츠를 더 쉽게 접근하고 상호작용할 수 있도록 돕습니다. 주요 웹 접근성 속성들은 다음과 같습니다.   HTML 접근성 속성alt (대체 텍스트)사용 요소: 설명: 이미지를 설명하는 텍스트를 제공하여 시각 장애인 사용자들이 이미지를 이해할 수 있도록 돕습니다.예시: title (제목)사용 요소: 대부분의 HTML 요소설명: 요소에 대한 추가 정보를 툴팁 형식으로 제공합니다.예시: 💾label (레이블)사용 요소: 설명: 입력 요소에 레이블을 제공하여 입력 필드의 용도를 설명합니다.예시: 이름:role (역할)사용 요소: 대부분의 HTML 요소설명: 요소의 역할을 ..
[웹접근성]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": 요소가 활성화되어 있고, 상호작용이 가능..
[웹접근성]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가지 주요 원칙(인지할 수 있음, 운용할 수 ..
[웹접근성]웹접근성(a11y) 이란? 웹 접근성(Web Accessibility)은 장애가 있는 사람들을 포함한 모든 사용자가 웹사이트와 웹 애플리케이션을 이용할 수 있도록 보장하는 것입니다. 이는 시각, 청각, 신체, 인지, 언어, 학습 등 다양한 장애를 가진 사람들이 웹 콘텐츠에 접근하고 상호작용할 수 있도록 하는 것을 목표로 합니다.  "a11y"는 "accessibility"의 첫 글자 'a'와 마지막 글자 'y' 사이에 있는 11개의 문자를 나타내는 줄임말입니다. 이는 웹 접근성(웹 콘텐츠 접근성)을 지칭하는 약어로서, 모든 사용자가 웹 사이트나 애플리케이션을 이해하고 사용할 수 있도록 하는 개념을 포함합니다. https://www.wa.or.kr/m1/sub1.asp WA : 한국웹접근성인증평가원" data-og-descripti..
[SCSS]@mixin 설명과 예시 @mixin은 Sass에서 사용되는 지시자로, 재사용 가능한 스타일 패턴을 정의하는 데 사용됩니다. @mixin은 일종의 함수로 생각할 수 있습니다. 함수는 코드를 한 번 작성하고 나중에 여러 곳에서 호출하여 재사용할 수 있게 해줍니다. 마찬가지로 @mixin은 스타일 블록을 정의하고 여러 규칙에서 재사용할 수 있도록 합니다.  예제1.예를 들어, 다음과 같이 tab-bar 믹스인을 정의할 수 있습니다.@mixin tab-bar($color, $height) { background-color: $color; height: $height; // 추가적인 탭 바 스타일 설정} tab-bar 믹스인은 탭 바(tab bar) 컴포넌트의 스타일을 생성하는데 사용될 수 있습니다. 이 믹스인은 $color와 $..
[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;
[CSS]모든 가상 선택자 CSS 가상 선택자에는 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)가 포함됩니다. 모든 가상 선택자의 목록과 간단한 설명을 아래에 제공합니다.가상 클래스 (Pseudo-classes)동적 가상 클래스:hover: 마우스 커서가 요소 위에 있을 때:active: 요소가 활성화되었을 때 (보통 클릭된 상태):focus: 요소가 포커스를 받을 때 (키보드나 마우스에 의해):visited: 사용자가 방문한 링크:link: 방문하지 않은 링크:checked: 체크된 체크박스나 라디오 버튼:disabled: 비활성화된 요소:enabled: 활성화된 요소:focus-visible: 키보드 탐색에 의해 포커스된 요소:focus-within: 포커스를 포함한 하위 요소를 가진 요소..
[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 ..
[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(); } ..
[Javascript]코딩테스트 프로그래머스 "중복된 숫자 개수" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 중복된 숫자 개수문제 설명정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요. 제한사항1 ≤ array의 길이 ≤ 1000 ≤ array의 원소 ≤ 1,0000 ≤ n ≤ 1,000 입출력 예 입출력 예 설명입출력 예 #1- [1, 1, 2, 3, 4, 5] 에는 1이 2개 있습니다. 입출력 예 #2- [0, 2, 3, 4] 에는 1이 0개 있습니다.  문제 풀이방법1. filter()function solution(array, n){ const filtereArray = array.filter(num => num === n); return filtereAr..
[Javascript]단축 평가 논리 연산자를 사용하여 조건문 처리하기(if를&&로) 조건문 처리할때 if문대신 &&단축 평가를 사용하는 방법입니다. 문제 설명n에 변수가 존재하고, true이면 실행하기 문제 풀이1. 값이 없을때 if문 예시// 값이 없을때 if문 예시let n;if(n){ console.log('true');} 2. 값이 없을때 && 논리 연산자 예시// 값이 없을때 && 예시let n;n && console.log('true'); 1번과 2번 결과물은 동일하게 값이 없으므로 출력되지 않습니다.  3. 값이 있을경우 'true' 출력// 값이 있을때 if문 예시let n = 1;if(n){ console.log('true');}// 값이 있을때 && 예시let n = 1;n && console.log('true'); 풀이 설명- 'n' 변수가 존재하고 'true'이면,..
[Javascript]코딩테스트 프로그래머스 "각도기" 풀이 코딩테스트 연습 > 코딩테스트 입문 > 각도기문제 설명각에서 0도 초과 90도 미만은 예각, 90도는 직각, 90도 초과 180도 미만은 둔각 180도는 평각으로 분류합니다. 각 angle이 매개변수로 주어질 때 예각일 때 1, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하도록 solution 함수를 완성해주세요.  제한사항 입출력 예 입출력 예 설명입출력 예 #1- angle이 70이므로 예각입니다. 따라서 1을 return합니다. 입출력 예 #2- angle이 91이므로 둔각입니다. 따라서 3을 return합니다. 입출력 예 #2- angle이 180이므로 평각입니다. 따라서 4를 return합니다.  문제 풀이function solution(angle) { if(angle > ..
[Javascript]코딩테스트 프로그래머스 "배열의 평균값" 풀이 코딩테스트 연습 >코딩테스트 입문 >배열의 평균값문제 설명정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 제한사항 입출력 예 입출력 예 설명입출력 예 #1- numbers의 원소들의 평균 값은 5.5입니다. 입출력 예 #2- numbers의 원소들의 평균 값은 94.0입니다.  문제 풀이function solution(numbers) { const sum = numbers.reduce((acc, curr) => acc + curr, 0); return sum / numbers.length;}console.log(solution([1,2,3,4,5,6,7,8,9,10])); // 결과값 5.5 풀이 설명해당..
반응형