7/15(금) ☀️ HTML/CSS 고정형

eunoo·2022년 7월 15일
0

🔥 HTML

🌟 form 관련 요소의 접근성 고려 중요 (크로스 브라우징💥)

💥 legend 태그

  • 필드셋 내부의 레전드 태그는 환경마다의 디자인 차이가 심하므로 직접 디자인 하는 것은 위험

💥 title (전역 속성)

  • 대체, 보충 설명을 위한 전역 속성, label이 없을 때엔 title 속성이 대신할 수 있다.
  • 부가적인 기능이 툴팁을 보여주는 것 (aria-label 속성도 알아볼 것)

🌟 inline-block이 기본인 태그

  • img, input, button 등 자체적으로 크기 지정이 가능한 태그들이 해당한다.

🌟 time 요소

  • datetime 필수 속성을 이용해 시간을 지정할 수 있다.
  • 어디로 이동하는지에 대한 정보가 드러날 수 있도록 적절한 텍스트를 지정하는게 중요

💥 aria-label

  • 보충 설명을 통한 접근성을 올릴 수 있는 방법
  • aria-labelledby="" 를 이용해 id 값과 연결하여 레이블 지정 가능

🌟 aria tablist 만들기


🔥 CSS

🌟 -webkit-appearance 속성

  • -webkit-appearance: none; 자체 기본 스타일을 모두 제거

🌟 말 축약

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
  • 위 세가지 속성을 세트로 사용하여 ~~~...의 넘치는 텍스트 축약 가능

🌟 border-color 속성

  • currentColor 값을 사용하여 글자색을 따라가게 할 수 있다.

🌟 gab 속성 알아보기


🔥 Git Hub

🌟 pages를 통해 배포하기

  • 배포하여 url을 통해 모바일 화면에서 페이지를 체크할 수 있다.

0개의 댓글