본문 바로가기

Dev27

시맨틱 태그를 쓰면 좋은 점 sematic은 의미의, 의미론적인 이라는 의미를 가지고 있는 단어입니다. 시맨틱 태그(semantic tag)란 단어에서 그 의미를 유추할 수 있듯이, 의미가 담겨있는 태그입니다. 기능은 태그와 동일하며, 정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다. 그렇다면 이런 시맨틱 태그를 왜 써야 할까요? 시맨틱 태그의 종류 : 하나의 완성된, 독립적인 내용을 나타내는 영역 : 문서의 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스) : 토글과 같은 기능으로 정보를 제공하는 disclosure 위젯을 만들 때 사용 : 이미지에 대한 캡션 : 이미지 및 이미지 설명을 담고 있는 영역 : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 : 영역 위쪽에서 로고나 제목, 메.. 2024. 1. 5.
position의 속성 및 특징 (실제 사이트 예시) CSS 코드를 작성할 때 자주 사용하는 속성들 중 `position`이라는 속성이 있습니다. position은 문서 상에 요소를 배치하는 방법을 설정할 때 사용하며, 매우 다양한 속성값을 가지고 있습니다. static static은 position 속성의 기본 값으로, 요소를 일반적인 문서의 흐름에 따라 배치합니다. 이 때 일반적인 문서의 흐름이란, 우리가 문서를 읽고 작성할 때의 순서인 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이는 것을 의미합니다. position이 static인 상태에서는 아무리 offset 값을 줘도 변화가 일어나지 않고, z-index 값 또한 적용되지 않습니다. relative position이 relative인 상태에서는 static과 자기 자신을 기준으로 top, right, .. 2024. 1. 5.
웹 접근성 높이기 w/ 기존 프로젝트 리팩터링 (Lighthouse) 웹 접근성을 고려하며 개발해 본 경험 채용 공고들을 보면 필수 자격 또는 우대 사항에 위와 같은 내용이 적혀있는 것을 종종 발견할 수 있었습니다. 도대체 웹 접근성이 뭐고, 이를 고려해서 개발하려면 어떻게 코드를 작성해야 할까요? 웹 접근성 한국웹접근성인증평가원에서는 웹 접근성(정보통신접근성)을 아래와 같이 설명하고 있습니다. ⌜지능정보화기본법⌟에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다. 웹 브라우징에 쓰이는 보조과학기술 • 스크린 리더 소프트웨어 • 화면 확대 도구 • 음성 인식 • 키보드 오버레이 이 중 스크린 리더 기능을 문제 없이 사용할 수 있게 돕는 부분을 프론트엔드 개발자들이 .. 2024. 1. 2.
CSS는 왜 이름이 CSS일까? 기술 면접 공부를 하던 중, 어떤 개발자 분이 남기신 글이 인상 깊었습니다. CSS를 활용하는 법에 대해 알고 있는 것도 중요하지만, CSS가 왜 CSS인지도 알고 있는 개발자였으면 좋겠다는 글이었습니다. 프론트엔드 개발을 하면서 필수적으로 사용하는 기술이 CSS이고, CSS를 정말 많이 다루고 있지만 정작 CSS의 이름이 왜 CSS인지에 대해서는 한 번도 생각해 본 적이 없었기에 찾아서 공부해보았습니다. CSS는 뭘까? CSS는 웹 페이지를 꾸미려고 작성하는 코드이며, 프로그래밍 언어나 마크업 언어가 아닌 Style sheet 언어입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 것인데, 예를 들면 HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍.. 2024. 1. 2.

티스토리툴바