7/19(화) ☀️ HTML/CSS 고정형

eunoo·2022년 7월 19일
0

🔥 HTML

🌟 aria-label

  • button 태그 내부 텍스트를 aria-label 속성으로 옮겨주고 비워 디자인의 어려움 해결

🌟 a 태그 id값으로 이동

  • href 속성에 #id 값을 주면 id를 가진 곳으로 이동 가능

🌟 q, blockquote 태그

  • q - 짧은 인용문에 사용 cite 속성을 통해 출처 작성
  • 저작권 이슈가 발생하지 않도록 기입하는 것이 좋다.

🔥 CSS

🌟 margin : auto;

  • auto 속성을 이용해 빈 공간의 넓이를 자동으로 읽어낼 수 있다.

🌟 단축 속성

  • 단축 속성으로 인한 이슈 발생 가능성이 있을 수 있다. (개별 속성으로 해결)
  • background, transition

🌟 배경 이미지의 효율적인 활용 ( 스프라이트 패턴 )

  • 하나의 이미지 파일 안에 여러가지 이미지들을 한번에 넣어 네트워크 요청을 줄여 효율 향상

🌟 SVG 스프라이트의 사용법 찾아보기

  • 백터 이미지로 해상도 이슈 해결 용이

🌟 ol 태그의 li 스타일 제거

  • list-style : none 으로 제거할 경우 스크린 리더가 읽어주지 않는다.
  • overflow : hidden 화면상엔 있음, 가상요소를 만들 경우 또 읽게 된다.

🌟 counter-increment

  • counter-increment : name 속성으로 li 리스트 넘버를 기억한다.
  • counter(name) 함수를 사용해 리스트 넘버를 활용할 수 있다.

🌟 position : absolute의 부모

  • position 외에 부모로 만들 수 있는 방법 찾기

🌟 inline 요소는 transform 불가

0개의 댓글