HTML, CSS, SASS
-
role 속성은 어떻게 사용해야할까?HTML, CSS, SASS 2023. 2. 22. 09:27
role, 어디서 많이 본 것 같은데? 이게 뭔데 Attribute 값으로 많이 들어가 있는거야? role 속성은 alt 태그와 같이, 심각한 문제를 가지고 있는 페이지로 분류를 할 정도의 힘을 가지고 있지는 않습니다만, 이 또한 시각장애인들이 이용하는 스크린 리더기나 검색엔진의 크롤링 및 색인 과정을 도와주는 부수적인 역할을 수행하는 속성입니다. 쉽게 말해 role은 태그의 역할을 알려주는 속성이다. role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다. tab tablist banner button group 등등 참 많다. 참고: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques..
-
Sass의 import, extend, mixinHTML, CSS, SASS 2021. 2. 17. 10:04
Import sass도 css처럼 import를 사용해서 여러 sass파일들을 import 할 수 있다. 큰 프로젝트를 할 때 스타일들을 여러 파일들로 나누고, 다른 파일에서 사용할 스타일을 불러와서 사용하면 된다. css import와 다른 점은 css는 import된 여러 css 파일의 로딩을 http에 요청해야한다면, sass는 여러개의 scss파일을 import 해도 최종적으로 하나의 css로 컴파일해주기 때문에 여러번 요청을 보낼 필요가 없다. // 작성 방법 : @import "파일명.scss" 또는 @import "파일명"; @import "reset" 참고로 scss 파일을 import 할 경우, scss 확장자를 써주지 않아도 된다. extend sass 에서 특정 선택자를 상속 할 때,..
-
font-size: 62.5% 를 사용하는 이유?HTML, CSS, SASS 2021. 1. 19. 16:35
왜 font-size를 62.5%로 하였을까? html { font-size: 62.5%; } font-size를 62.25%로 지정하면 기본 폰트 크기가 16px(브라우저의 기본 폰트 크기) * 62.5% = 10px 로 지정이 된다. 10px 로 지정하는 이유는 10진수 계산이 편해서다, 우리는 em, rem을 사용해야 하기 때문. 근데 왜 기본 폰트 크기를 바로 10px로 안하고 62.25%로 하는 것 이냐? 문제는 바로 브라우저에서 제공하는 사용자 접근성 옵션(accessibility options)에 있다. 브라우저의 기본 폰트를 바꾸면 그에 따른 폰트 크기로 변경이 되어야하는데 고정 10px 로 적용되어 있을 경우에는 접근성 옵션이 적용되지 않는다.