-

기본 원칙1. 이미지 크기 유연하게 설정이미지는 크기(px)로 고정하지 않고, 부모 요소 크기에 따라 유동적으로 변하도록 설정해야 함대표적으로 max-width: 100%; height: auto; 조합을 사용하여이미지가 부모 컨테이너 너비를 넘지 않고, 비율(가로/세로 비율)을 유지하며 크기가 조절됨2. 비율 유지이미지는 가로 세로 비율을 깨지 않도록 해야 함height: auto로 가로 크기에 맞춰 세로를 자동 조절하거나width: auto로 세로 기준 가로를 자동 조절임의로 고정 크기(width: 100px; height: 100px;)를 주면 이미지가 찌그러질 수 있음3. 적절한 이미지 해상도 제공디바이스 해상도가 다르기 때문에 동일 이미지라도 해상도별 적절한 이미지를 준비모바일 화면, 일반 데스..

이미지 사이즈와 용량 최적화1. 적절한 해상도 선택화면 크기 및 해상도에 따라 다른 크기의 이미지를 제공큰 이미지를 무조건 로드하면 성능 저하 → 용량이 크고 로딩 속도 느림2. 압축과 최적화상황에 따른 압축방식 사용이미지 최적화 도구(예: TinyPNG, ImageOptim) 활용구분 손실 압축 (Lossy) 무손실 압축 (Lossless)품질일부 손실, 품질 저하 가능품질 변화 없음, 완전 동일 복원 가능용량 감소크고 강력한 압축 가능상대적으로 적음재압축품질 악화 가능반복 압축해도 품질 유지주용도사진, 복잡한 이미지아이콘, 로고, 텍스트, 선명한 그래픽대표 포맷JPG, WebP (lossy), HEICPNG, GIF, SVG, WebP (lossless), TIFF3. 포맷 선택웹에서 쓰기 좋은 포..

브레이크포인트(beakpoint) 화면 크기에 따라 레이아웃이나 스타일을 전환하는 기준점을 의미 브레이크포인트 설정 기준 1. 디자인 기반실제 UI/디자인 시안을 기준으로 설계디자인 시안이 모바일/태블릿/PC/대형 PC로 나눠져 있을 경우 각 시점의 크기를 브레이크포인트로 사용2. 콘텐츠 기반콘텐츠가 줄 바꿈 되거나 깨지는 지점을 기준으로 브레이크포인트 설정좀 더 유연하고 사용자 중심의 접근 방식장점: 디바이스 의존도↓ / 유연성↑단점: 반복되는 테스트와 수정 필요3. 디바이스 기준 + 콘텐츠 기준 혼합가장 많이 쓰이는 실무 전략우선 기기 기준으로 rough 한 breakpoints 설정하고,특정 컴포넌트에서 깨지거나 이상해지는 부분만 콘텐츠 기준으로 미세 조정기기별 브레이크포인트 기기해상도 기준 (wi..

미디어 쿼리(media query)CSS3에서 도입된 기능으로, 브라우저의 환경(뷰포트 크기, 디바이스 해상도, 방향 등)에 따라 조건에 따라 스타일을 적용주로 화면 크기에 따라 레이아웃을 바꾸는 데 사용기본 문법/* [문법] */@media media-type and (media-feature) { /* 조건을 만족할 때 적용될 스타일 */}media-type (미디어 유형)미디어 유형설명all모든 장치에 적용 (기본값)screen화면 기반 장치 (모니터, 스마트폰 등)print인쇄 또는 인쇄 미리보기 시 적용speech스크린리더용 장치media-feature (미디어 특성)미디어 특성설명width, height뷰포트의 너비 / 높이min-width, max-width최소 / 최대 너비 조건orie..

반응형 디자인 (Responsive)브라우저나 기기의 화면 크기에 따라 유동적으로 콘텐츠와 레이아웃이 변화하는 웹 디자인 방식.특징하나의 CSS 파일에서 media query를 사용해 다양한 해상도에 대응flex, grid, %, vw, rem 등 유동 단위 사용화면 크기가 조금씩 바뀌어도 자연스럽게 레이아웃이 적응장점유지보수 쉽고, 장기적인 프로젝트에 적합다양한 해상도와 디바이스에 자동 대응새로운 디바이스가 생겨도 레이아웃이 깨지지 않음단점설계가 복잡하고 디자이너와의 협업이 중요초기 개발 시간이 오래 걸릴 수 있음적합한 상황블로그, 쇼핑몰, 기업 홈페이지 등 모든 디바이스에서 접근 가능한 서비스다양한 디바이스 (PC/모바일/태블릿/폴더블 등)에서 동일한 콘텐츠 제공콘텐츠가 중심이 되는 웹사이트 (예: ..

반응형 헤더 작업 시 유의사항 1. 반응형 레이아웃 설계 📌 브레이크포인트 정의중요 이유: 브레이크포인트가 일관되지 않으면 예기치 않은 레이아웃 깨짐이 발생.팁: SCSS 사용하는 경우 @mixin media($device) 식으로 공통 처리하면 유지보수 용이📌 디자인 일관성 유지각 해상도에서 메뉴 순서, 로고 위치, 버튼 형태가 다르면 사용자 혼란. → 예: PC에선 오른쪽에 있는 메뉴가 모바일에서 맨 아래로 가면 UX가 불편해짐2.내비게이션 메뉴 처리 📌 메뉴 개수에 따른 처리메뉴가 많으면 PC에서는 가로로 충분하지만, 모바일에서는 한 줄에 다 안 들어감.→ 가로 스크롤, 아코디언, "더보기" 처리 등으로 설계 필요.📌 서브 메뉴가 있는 경우PC: hover로 보여주는 드롭다운모바일: 클릭/터..

tabindextabindex는 키보드의 Tab 키를 눌렀을 때 요소가 포커스를 받을 수 있도록 설정하거나, 포커스 순서를 제어하는 속성tabindex의 3가지 값 유형유형설명tabindex="0"- 포커스를 받을 수 없는 요소에 포커스가 가능하도록 만들고 싶을 때 사용. - button, input, a 등은 기본적으로 포커스를 받을 수 있는 요소지만, div, span 등도 값을 주면 포커스 가능.tabindex="-1"- 요소를 탭 키로는 포커스할 수 없지만, JavaScript로는 포커스 가능.- 주로 스크립트나 접근성 목적으로 사용됨.tabindex="1" 이상의 양수- 웹 문서에서 Tab키로 이동 시 가장 먼저 포커스를 받음- 탭 키 순서를 명시적으로 우선 지정. - 숫자가 작을수록 먼저 포커..

HTML 기본 정보 태그DOCTYPEHTML 문서가 어떤 형식과 버저으로 작성되었는 지를 명시해당 선언을 빠뜨리면 쿽스 모드(quirks mode)로 읽게 되고, 이는 지금은 사용하지 않는 옛날 브라우저 형태로 HTML을 읽는것을 의미 lang을 선언하여 검색엔진, 스크린 리더에게 언어를 알려줌 해당 문서의 메타 데이터, 컴퓨터가 읽어 낸 문서 정보가 담겨 있음페이지 정보, 파비콘, 메타정보, css, javascipt 코드 및 링크 포함웹 페이지의 제목브라우저 탭, 즐겨찾기, 검색 결과에 표시되는 제목문서의 상세 정보 포함charset웹 페이지 문자 인코딩 방식 지정반드시 형식을 명시해야 글자가 깨지는 형상이 발생하지 않음viewport화면에 보여지는 웹사이트 영역 제어ㅈㅅ모바일의 경우 시각적 뷰포트(..

dl, dt, dddt : 정의할 용어dd : 용어의 설명 또는 의미 해석dt와 dd는 1:1, 1:0, 1:n, n:1, n:n 으로 사용 가능 용어1 용어1 - 설명 용어2 용어3 용어3 - 설명 용어3 - 설명

ol type과 start 활용ol type과 start를 사용하여 시작유형과 순서를 정할 수 있음ol type 유형 : 1, A, a, Ⅰ, ⅰstart : 시작할 순서를 숫자로 표기 test test test 로마자 변환 로마자 변환 로마자 변환 로마자 변환 로마자 변환 로마자 변환