HTML, CSS3 aria 속성 정리 개인저장용 aria-labelledby: 요소의 레이블을 지정합니다. 관련된 레이블 요소의 id 값을 참조합니다. aria-label: 요소의 명시적인 레이블을 제공합니다. 텍스트로 된 레이블을 직접 지정합니다. aria-describedby: 요소와 관련된 추가 설명을 제공합니다. 설명 요소의 id 값을 참조합니다. aria-required: 요소가 필수 입력 필드임을 나타냅니다. aria-disabled: 요소가 비활성화되었음을 나타냅니다. aria-expanded: 접힘/펼침 상태를 나타냅니다. 확장 가능한 요소에 사용됩니다. aria-hidden: 요소가 시각적으로 보이지 않음을 나타냅니다. aria-selected: 선택된 요소를 나타냅니다. 선택 가능한 요소에 사용됩니다. aria-live: .. 2023. 6. 21. css flex ellipsis 해결법 해결책은 min-width: 0;플렉스 자식에 있습니다. 또는 min-width실제 가치. 이것이 없으면 다른 텍스트 요소를 포함하는 flex 자식은 해당 텍스트 요소의 "묵시적인 너비"를 넘어서 좁아지지 않습니다. 이 문제가 처음 발생했을 때 AJ Foster의 Pen을 통해 해결책을 찾았습니다 . 그는 다음과 같이 씁니다. 드래프트 사양 에 따르면 플렉스 컨테이너의 크기를 줄일 때 위의 텍스트가 완전히 축소되지 않아야합니다. .subtitle의 너비는 100 %이므로 flexbox가 만드는 min-width : auto 계산은 컨테이너가 우리가 원하는 것보다 커야한다고 말합니다. 이 동작은 Chrome, Opera 및 Firefox에서 일관된 것으로 나타났습니다. 사파리는 최소 너비가 없어도 축소 /.. 2021. 5. 10. 하위 브라우저에서 시멘틱 태그 사용 방법 현재는 IE를 버리고 있는 추세지만 간혹 하위 브라우저까지 대응해야되는 경우가 있다. 아래와 같은 방법으로 간편하게 사용할 수 있다. 방법1. html5shiv 사용하기 https://github.com/aFarkas/html5shiv 방법2. 직접 element 추가하기 2021. 3. 22. 이전 1 다음