fullstack-study

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

웹의 기본 동작 이해하기 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 주소 변환기 역할.사용자..

https://www.hll.kr/ 에이치엘엘 중앙 | HLL중앙HLL중앙은 매거진 미디어에서, 디지털 콘텐트 마케팅, 취향 커머스 사업과 엔터테인먼트까지, 트렌드의 최전방 영역에서 활발하게 사업을 진행하고 있습니다. 에이치엘엘중앙과 허스트중앙은www.hll.kr        style.css html  결과

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 없으면 기본생성     인스턴스 시작

이미지 보정   # 이미지 크기 조절하는 법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 -..

카카오 로그인  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..

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..

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 >> 로그인 선택 >> 이 메일로 로그인했을경우 이메일 확인 >> 이메일 > 코드 인증 이메일 인증 ..

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

베리어블 프로토타입  # number      # String