Frontend/HTML (19) 썸네일형 리스트형 b와 strong, i와 em의 차이는 무엇인가요? 표면적으로는 동일하지만 스크린 리더 등에서 차이 발생 strong, em 사용 권장 SVG란? SVG란? SVG는 Scalable Vector Graphics의 약자입니다. "SVG는 2차원 그래픽 애플리케이션과 이미지, 관련 그래픽 스크립트 인터페이스 집합을 기술하기 위한 마크업 언어입니다." 기본적으로 웹에서 확장 가능한 그래픽을 만들기 위한 구조화 된 XML 이미지 형식 SVG를 사용하는 이유 SVG를 사용하여 접근성을 높이는 것이 보다 쉬울 뿐만 아니라, 기존 이미지 포멧(예: PNG, JPEG) 보다 파일 크기가 작기 때문에 웹 성능이 크게 향상 될 수 있습니다. 게다가 스크린 크기를 확대해도 선명함을 유지하기에 로고, 아이콘, 인포 그래픽 요소 등에 사용하기 적합합니다. https://a11y.gitbook.io/graphics-aria/svg-graphics/html+svg 뷰포트 뷰포트 사용자에게 보여지는 웹 페이지 영역 화면에 보이는 영역을 제어하는 기술 뷰포트를 활용하여 스마트 기기의 보이는 영역을 실제 화면 크기로 변경 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록 하기 위해 뷰포트 기술 이용 태그를 사용하여 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기 조절 가능 태그의 name 속성에 "viewport" 지정 width=device-width : 페이지(뷰포트)의 너비를 기기의 스크린 너비로 설정 (렌더링 영역 = 기기의 뷰포트 크기) initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 함 (0~10 사이의 값 가짐) (기본값 1, 1 미만은 축소) minimum-scale : 줄일 수 있는 최소 크.. 미디어 쿼리 미디어 쿼리 화면의 크기나 환경을 감지하여 웹사이트를 변경하는 기술 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술 (미디어의 종류, 미디어 화면의 크기) 반응형 웹을 제작할 때 반드시 필요 기술 컴퓨터 기기의 환경 또는 종류를 감지해야 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있기 때문 @media [미디어 유형] [and] (조건문) { 실행문 } 조건문 : 조건문이 사실일 경우 뒤에 오는 실행문을 수행 실행문 : 일반적으로 CSS 코드로 작성 @media all and (min-width:960px) { body { background:yellow; } } 미디어 유형 생략 가능 all, print, screen, tv, projection, handheld 등 생략 시 all 스마트 기기는.. wrap / wrapper 사용 이유 태그에 wrap 또는 wrapper 사용하는 이유 웹 문서 내용 전체의 크기나 배경색을 한번에 조절 가능 브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치 가능 반응형 웹에서 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것을 방지 자식 박스들을 가변 크기로 만들 때 기준 크기로 사용 가능 전체적으로 width 를 지정하거나 min-width를 지정할 때 활용 가변 그리드 (가변 영역 / 폰트 / 마진 / 패딩 / 멀티미디어) 가변 그리드 픽셀 대신 퍼센트로 제작하는 기술 고정 그리드는 크기가 고정되어 있어, 해상도에 따라 보여지는 화면이 줄어들더라도 요소의 크기는 그대로 -> 일부 요소가 화면에 가려 스크롤을 해야만 보이는 경우 있음 태블릿/모바일 사용자를 고려하여 스크롤 하지 않고도 한 화면에 내용이 모두 들어오도록 할 필요 있음 px 를 % 로 변경하여 고정된 값을 가변 값으로 바꿔주어야 함 px 를 % 로 바꾼다고 완벽한 반응형 웹이 만들어지는 것 아님 화면 비율에 따라 가변적으로 반응하기는 하지만 환경에 따라 구조가 변경되지 않기 때문 -> 구조를 변경해줄 뷰포트/미디어 쿼리 함께 사용 뷰포트 : 화면 제어 미디어 쿼리 : 화면의 크기나 환경을 감지하여 구조를 바꿔줌 가변 영역 웹 브라우저 크기가 변경되어도 가로 비율.. 반응형 웹 반응형 웹 PC, TV, 내비게이션, 스마트 기기 등 다양한 기기의 화면이나 환경에 맞게 자유자재로 변하도록 만들어진 웹 반응형 웹의 장점 유지보수 간편 마케팅에 유리 비용면에서 효과적 검색 엔진 최적화 미래지향적(현재) 기술 유지보수 간편 모바일 버전과 데스크 탑 버전 두개의 웹사이트를 만들게 되면, 웹 사이트 수정/갱신 시 모바일 버전과 데스크탑 버전을 개별적으로 수정해야 함-> 업무량 증가 & 작업 내용 복잡 빈응형 웹은 모바일 버전/태블릿 버전/데스크탑 버전 등 모든 디자인을 하나의 HTML과 CSS 파일에서 작업하기 때문에 유지보수 용이 마케팅에 유리 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경해서 보여줄 수 있기 때문에 확실하게 내용 전달 가능 비용면에서도 효과적 두 가지 버전의 웹 .. 시맨틱 구조 구현 예제 HTML 로그인 이벤트 장바구니 고객센터 회원가입 메뉴 서브 메뉴 슬라이드 쇼 메인 내용 회사 정보 CSS @charset "UTF-8"; #wrap { margin:0 auto; width:1000px; background-color:white; color:white; } header { background-color:rgb(200, 216, 223); text-align:right; padding-right:20px; height:40px; line-height:40px; } #mainMenuBox { margin-top:10px; margin-bottom:10px; height:35px; line-height:35px; background-color:rgb(166, 191, 204); text-al.. label 태그의 for 속성 input 태그를 설명할 때 사용 for 속성에 input 태그의 id 속성 입력 ex) label 태그 클릭 시 input 태그에 포커스가 감 ex) 라디오버튼/체크박스의 label 태그 클릭 시 해당 항목이 체크됨 이름 동의 이전 1 2 3 다음
