Dev/Web9 시맨틱 태그를 쓰면 좋은 점 sematic은 의미의, 의미론적인 이라는 의미를 가지고 있는 단어입니다. 시맨틱 태그(semantic tag)란 단어에서 그 의미를 유추할 수 있듯이, 의미가 담겨있는 태그입니다. 기능은 태그와 동일하며, 정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다. 그렇다면 이런 시맨틱 태그를 왜 써야 할까요? 시맨틱 태그의 종류 : 하나의 완성된, 독립적인 내용을 나타내는 영역 : 문서의 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스) : 토글과 같은 기능으로 정보를 제공하는 disclosure 위젯을 만들 때 사용 : 이미지에 대한 캡션 : 이미지 및 이미지 설명을 담고 있는 영역 : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 : 영역 위쪽에서 로고나 제목, 메.. 2024. 1. 5. 웹 접근성 높이기 w/ 기존 프로젝트 리팩터링 (Lighthouse) 웹 접근성을 고려하며 개발해 본 경험 채용 공고들을 보면 필수 자격 또는 우대 사항에 위와 같은 내용이 적혀있는 것을 종종 발견할 수 있었습니다. 도대체 웹 접근성이 뭐고, 이를 고려해서 개발하려면 어떻게 코드를 작성해야 할까요? 웹 접근성 한국웹접근성인증평가원에서는 웹 접근성(정보통신접근성)을 아래와 같이 설명하고 있습니다. ⌜지능정보화기본법⌟에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다. 웹 브라우징에 쓰이는 보조과학기술 • 스크린 리더 소프트웨어 • 화면 확대 도구 • 음성 인식 • 키보드 오버레이 이 중 스크린 리더 기능을 문제 없이 사용할 수 있게 돕는 부분을 프론트엔드 개발자들이 .. 2024. 1. 2. Google 소셜 로그인 과정 (OAuth) ⚾️ 직관일기 : 직관 기록하고 직관 승률 계산하는 서비스 개발 일지 직관일기 ⚾️ 나의 직관 승률은? happybaseball-diary.web.app 기획 아이디어 올해 야구에 빠져서 정말 직관을 많이 다녔다. 팀의 승률만큼이나 재밌는 건 내가 직관 승요인지의 여부이다. 직관 기록만 inner-stella.tistory.com 직관일기 라는 서비스 구현 과정에서 로그인 기능이 필요했기 때문에 Google Firebase에서 제공하는 Authentication 기능을 사용하기로 했다. 여러 가지 로그인 제공업체를 제공하고 있다. 기본은 이메일/비밀번호인데, 비밀번호 입력 시 암호화 등을 잘 할 자신이 없었고 이를 구현하기에는 다소 시간이 걸릴 것이라고 생각되어 소셜 로그인을 사용하기로 했다. 추후 이 .. 2023. 10. 22. 카카오톡으로 링크 공유시 오픈 그래프 이미지 안 나올 때 (공유 디버거 사용하기) ※ 오픈그래프 설정하는 법 [HTML] 링크 공유 시 미리보기 썸네일 설정하기 (meta 태그) 프로젝트를 하던 중, SNS로 링크 공유 시 미리보기 화면을 꾸미고 싶다는 기획자의 의견을 받아 이를 반영하게 되었다. 넣을 수 있는 것들은 크게 4가지가 있다. 1. 썸네일 이미지 2. 썸네일 제목 3. inner-stella.tistory.com 오픈그래프를 설정하면서 테스트하는 과정에서 카카오톡으로 링크를 보내다보면, 변경 사항이 제대로 반영되지 않는 경우가 있다. 이는 카카오톡에 이미 해당 링크에 대해 캐싱되기 때문인데, 이를 해결하기 위해서는 카카오톡 개발자 도구 사이트에서 해당 링크에 대한 캐시를 초기화해주면 된다. https://developers.kakao.com/tool/debugger/sha.. 2023. 9. 21. 이전 1 2 3 다음
