fffo

1. SCSS(SASS)란? css의 전처리기. css를 보다 효율적으로 작성할 수 있게 문법이 개선된 방법으로, 작성 후 css로의 변환이 필요함 1.1. css로 변환 nodejs의 sass패키지 이용 npm install -g sass sass [target] [source] 예시 : sass -w style.css scss/style.scss -w 옵션을 통해 소스파일의 변화를 감지해서 실시간 변환 가능 gulp 등의 taskrunner를 통해 자동화 가능 2. 문법 기본적인 문법은 css와 동일하고 추가적인 문법 존재 2.1. nesting 부모자식 관계에 따라 nesting이 가능 nest 안에서 &로 nesting하고 있는 셀렉터를 치환 가능 &로 치환되는 셀렉터는 문자만 치환되기 때문에 뒤..

https://github.com/rightkingleftking/tutorials/tree/main/HTML%2CCSS%EC%9A%94%EC%95%BD GitHub - rightkingleftking/tutorials Contribute to rightkingleftking/tutorials development by creating an account on GitHub. github.com 깃허브로 이동

정확한 태그 사용은 접근성 향상에 큰 도움을 줍니다. article과 section태그의 정확한 사용법을 알아보겠습니다. article article 태크는 하나의 독립적인 컨텐츠를 다룰 때 사용합니다. 독립적 컨텐츠는 뉴스 사이트에서 하나의 기사에 해당되고 쇼핑몰에서 하나의 상품, 동영상 스트리밍 사이트에서는 하나의 영상이 해당될 수 있습니다. section section은 하나의 컨텐츠 내부에서 구획을 짓기 위한 요소입니다. 예를 들어 하나의 기사에서 간단 요약 부분이 나오고 다음 문단부터 본문이 나오는 경우를 보겠습니다. 간단 요약 문단을 section 태그 안에 넣고 accessible name으로 '간단 요약'을 표기한다면 스크린 리더 사용자는 해당 section에 들어가게 되면 간단 요약 영역..

웹 접근성에 대해 이해하기 위해 구체적인 요소를 대상으로 웹 접근성 분석을 해봤다. 이번에 다룰 요소는 데이터 테이블이다. 접근성이 좋지 않은 표를 고쳐보는 방식으로 접근했는데, 평소에 옷을 사는 사이트에 마침 괜찮은 예시가 있었다. 웹 접근성이 좋지 않은 데이터 테이블 예시 가장 큰 문제점은 표를 하나의 이미지로 대체했다는 점이다. 심지어 대체 텍스트도 없는 이미지이다. 표의 규모가 작기 때문에 표 내부의 문제점은 그리 크진 않지만, 적어도 표의 머리 행과 열은 잘 구분될 수 있게끔 경계 강조나 색 대비를 넣어 주는 편이 더 나을 것 같다. 또한 표의 내용면에서도 문제점을 발견할 수 있었는데, 맨 마지막 행을 보면 머리 열이 비어있어 해당 행의 숫자가 무엇을 표현하는 지 추측을 할 수밖에 없다. 물론 ..