반응형 개발/HTML15 브라우저 뷰 영역 밖의 checkbox에 포커싱이 맞춰지며 스크롤 이동하는 이슈 보호되어 있는 글 입니다. 2024. 4. 22. img srcset과 size srcset에서 w나 x등의 디스크립터는 정확히 말하면 이미지의 실제 규격과 관련된 것이다. 개발자가 반응형 break-point로 사용하기 위해 어찌저찌 할 수 있는 것이 아니다. 즉, srcset의 디스크립터를 view port와 연관지어 생각하면 안된다. srcset의 목적은 브라우저에게 이미지의 정보를 알려주고 '브라우저 니가 알아서 선택해' 라고 선택권을 주는 것이다. 개발자가 break-point를 명시하여 반응형으로 렌더링하려면 css media query나 img태그의 size속성을 이용하면 된다. 그러면 정해진 break-point내에서 브라우저가 srcset속성을 참고하여 최적의 이미지파일을 선택하여 렌더링한다. srcset에서 최적의 이미지를 선택하는 기준은 브라우저의 캐시,네트워크 .. 2023. 10. 14. aria-describedby aria-describedby 웹 접근성을 개선하기 위해 사용되는 WAI-ARIA 속성이다. aria-describedby 속성은 문자열로 구성된 고유한 id 값을 가져야 한다. 해당 Id 값은 추가 정보를 제공하는 id 속성과 일치해야 한다. 일반적으로 aria-describedby 속성을 사용하여 스크린 리더가 해당 요소에 대한 설명을 읽을 수 있도록 한다. 예시 비밀번호: 비밀번호는 최소 8자 이상이어야 합니다. 대문자, 소문자, 숫자 및 특수문자를 포함해야 합니다. 위의 예시에서 input 태그의 aria-describedby 속성과 div태그의 id 속성은 password-info로 연결되어 있다. 이로 인해 스크린 리더는 input 태그의 aria-describedby와 password-inf.. 2023. 6. 7. HTML이 가지는 의미 : 시맨틱태그 시맨틱태그 semantic : 의미의, 의미론적인 시맨틱 태그는 의미를 부여한 html 태그이다. HTML 요소들은 의도된 목적이 있다. 예를들면 , 는 상단과 하단이다. 검색엔진은 HTML내의 태그를 분석하여 페이지의 구조와 내용을 파악하기 때문에, HTML을 작성할때는 각 태그들의 의도된 목적에 맞게 작성하는 것이 좋다. 예를들면 검색엔진은 태그가 사용된 콘텐츠를 재배포할 수 있는(퍼가요) 콘텐츠로 인식하고 태그로 묶은 콘텐츠는 재배포를 금지하는 콘텐츠로 인식한다. HTML태그의 특징을 통해 스타일을 작성하면 안된다. 예를들면 글씨크기를 크게하고 싶어서 h1태그를 사용하면 안되는 것이다. h1태그는 페이지를 나타내는 대표문장이고 검색엔진은 h1태그를 통해 페이지를 파악한다. 그래서 h1태그는 각 페이.. 2023. 1. 20. 이전 1 2 3 4 다음 반응형
