반응형

전체 글 118

[ CS이론 ] 웹 접근성이란

웹 접근성(Web Accessibility) 웹 접근성이란?모든 사용자(장애인, 고령자 포함)가 차별 없이 웹을 사용할 수 있도록 보장하는 것.프론트엔드의 핵심 가치: 누구나 접근 가능한 웹.이를 갖춘 사이트를 "웹 접근성이 있다"라고 표현.줄임말: A11Y (a + 11글자 + y) 왜 중요한가?웹은 정보에 접근하는 창구이므로, 특정 환경(장애, 장치 제약 등)에서도 접근 가능해야 함.접근성을 지키면 → 어떤 환경에서도 웹 이용 가능.우리나라에서는 법적 의무로, 공공기관이나 대형 사이트는 오픈 전 반드시 인증 필요. 지켜야 할 조건👀 시각 장애인 → 화면낭독기(Screen Reader)로 읽을 수 있어야 함.⌨️ 마우스 사용 불가 사용자 → 키보드만으로 조작 가능해야 함.🛠️ 보조 장치 사용자..

CS이론 2025.09.25

[ CS이론 ] 웹의 기본 동작 이해하기

웹의 기본 동작 이해하기 IP 주소와 도메인, DNS 서버 사용자 입력 (도메인) → DNS 서버 변환 → 실제 서버의 IP 주소 연결1. IP 주소인터넷에 연결된 서버는 고유한 주소(IP) 를 가짐.웹 페이지를 구분하는 기준.형식IPv4: 173.194.121.32 (숫자 4개 조합)IPv6: 2001:0DB8:0000:0000:0000:0000:1428:57ab (숫자 8개 조합) 2. 도메인 (Domain)사람이 기억하기 쉽도록 IP 주소 대신 사용하는 이름.예:IP 주소 → 173.194.121.32도메인 → google.com👉 사용자가 브라우저에 도메인을 입력하면 해당 IP 주소로 연결됨. 3. DNS 서버 (Domain Name Server)도메인 ↔ IP 주소 변환기 역할.사용자..

CS이론 2025.09.25

[ Node.js ] AWS 배포

AWS 배포  1. EC2 인스턴스 생성AWS 콘솔에서 EC2 서비스로 이동합니다."인스턴스 시작"을 클릭합니다.Amazon Linux 2 AMI 또는 Ubuntu Server를 선택합니다.인스턴스 유형 선택 (t2.micro가 프리 티어로 이용 가능).필요한 보안 그룹 설정:SSH (22 포트)HTTP (80 포트)HTTPS (443 포트)애플리케이션 포트 (예: 3000, 5000)새 키 페어를 생성하고 다운로드합니다.인스턴스를 시작합니다.  1. 인스턴스 시작  AWS 배포  2.  이름, Quick Start 설정   3. 키페어 생성   4.키 페어 파일은 로컬에서 EC2 인스턴스에 접속할 때 사용 되는 키리액트 프로젝트의 root로 이동  5. VPC 없으면 기본생성     인스턴스 시작

Node.js 2025.03.13

[ 포토샵 ] 02. 이미지 보정

이미지 보정   # 이미지 크기 조절하는 법1) [메뉴바] Image -> Image Size2) Resample 체크를 누르고, 단위를 Pexels로 변경한다.3) Width를 700이나 1500등, 변경한다. (이때 가로 세로 비율이 유지되도록 옆에 사슬 같은 연결고리를 활성화한다.)4) Resolution을 96, 72, 300 등 이미지를 사용하는 적합한 환경인 해상도를 입력한다. # 동물의 털 선명하게 표현하는 법1) 호랑이 사진을 포토샵으로 불러온다.2) [메뉴바] Image -> Auto Tone / Auto Color / Auto Contrast 순으로 보정한다.3) 보정한 호랑이 레이어를 복제한다. (단축키 Ctrl + J)4) 3번에서 복제한 레이어를 선택한 후 [메뉴바] Image -..

포토샵 2025.02.27

[ React ] 카카오 로그인

카카오 로그인  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com  1. 카카오 로그인 > 문서보  2. 내 애플리케이션 > 애플리케이션 추가   3. 앱키 4. 플랫폼 > web 플랫폼 등록    5.    6. : .envVITE_KAKAO_JAVASCRIPT_KEY=????VITE_KAKAO_REST_API_KEY=????VITE_KAKAO_REDIRECT_URI=https://xxx.vercel.app/oauth/ 7. config.jsconst isLocal = window.location..

React 2025.02.27

[ React ] TMDB api , spinner

TMDB API  1. 가입https://www.themoviedb.org/?language=ko The Movie Database (TMDB)찾으시는 영화나 TV 프로그램이 없나요? 로그인 하셔서 직접 만들어주세요.www.themoviedb.org  2. More > API  또는  프로필 > 설정 > API   3.  API  >  생성 > Developer  4. 사용약관 스크롤  맨아래 동의   5.  작성   6. API 페이지 이동 ( API, 액세스토큰  사용 )  7.  More > API    8.  API Reference    9. Movie List > Now Playing > Try it > JSON 생성   10.  11.  이미지 기본 경로 https://developer.th..

React 2024.12.19

[React] react 배포

vercel 배포 vercel이란?Vercel은 프론트엔드 개발자를 위한 클라우드 플랫폼으로, 빠르고 간편하게 웹 애플리케이션을 배포할 수 있도록 도와주는 서비스입니다. Next.js의 개발사이기도 하며, Next.js를 최적화하여 지원하지만, React, Vue, Svelte, Angular 등 다양한 프레임워크를 사용할 수 있습니다. Vercel 공식 사이트 공식 사이트에서 GitHub, GitLab, Bitbucket 계정으로 가입 vs 터미널에서 설치 - 1번만 npm i -g vercel 1. npm run build 또는 yarn build 2. vercel login >> 로그인 선택 >> 이 메일로 로그인했을경우 이메일 확인 >> 이메일 > 코드 인증 이메일 인증 ..

React 2024.12.19

[ CSS3 ] Grid 설명과 예

GridCSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 레이아웃 시스템입니다.기존의 float, flexbox 등이 1차원(가로 또는 세로) 정렬에 초점을 뒀다면,CSS Grid는 가로(Row)와 세로(Column)를 동시에 다룰 수 있어 복잡한 레이아웃을 보다 쉽게 구현할 수 있습니다. 특징 설명2차원 레이아웃행과 열 모두를 기반으로 배치 가능레이아웃 정의부모 요소에서 전체 레이아웃 정의 후 자식 요소 배치간결한 문법반복, 영역 지정 등 다양한 기능 제공반응형 디자인미디어 쿼리와 함께 유연한 디자인 가능 mdm바로가기w3shools바로가기 1. Container 속성Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.속성설명displayGrid 레이..

CSS3 2024.12.13
반응형