가제 세대차이 프로젝트 와이어프레임
자바스크립트 스터디에서 사이드 프로젝트를 진행하기로 했다. 기본 틀은 게시판인데 세대간을 이어주는 게시판을 바탕으로 아이디어를 짜고, 와이어 프레임 작성을 얼추 끝냈다. 
와이어 프레임을 작성하면서 하나 알게 된 사실이 있다.
검색엔진 최적화를 위해 H1태그를 페이지에 꼭 하나씩 포함시키는 것!
h1태그의 역할
h1 태그는 h태그 중 하나이고, h태그는 1부터 6까지 그 크기가 달라진다. h1 > ... >h6 순으로 크기가 달라지고, h1태그는 가장 큰 제목, 즉 페이지의 주제를 나타내는 역할을 한다.
검색엔진이 주제 및 키워드를 쉽게 파악할 수 있도록 알기 쉬운 구조로 만들어줘야 하는데, h1을 사용하면 페이지의 주제를 파악하는 것이 용이하다.
💡작성 시 유의점 : h1태그를 숨길 때에는 웹 접근성을 고려해서 숨겨야 한다.
h1태그를 숨기는 방법
1. display: none;
display를 none으로 주게되면 영역에서 아예 사라지는데, 이는 화면에서 사라질 뿐만 아니라 검색엔진도 접근이 불가능해진다. 또 스크린리더 사용자는 해당 요소의 텍스트를 들을 수 없다. 스팸으로도 인식될 수 있기 때문에 좋은 방법이 아니다.
2. opacity: 0
불투명도를 0으로 만들어 투명하게 만드는 방법인데, 이 방법도 스크린리더가 읽지 못한다. 비슷한 방법으로 요소의 크기를 0으로 하는 방법도 있는데, 마찬가지로 스크린 리더가 읽지 못한다.
3. text-indent : -9999px
화면에서 안보이게 할 때 많이 쓰는 방법중에 하나인데, form이나 link에 넣게되면 정확한 위치를 알 수 없어 혼란을 야기할 수 있다.
4. clip-path: polygon(0 0, 0 0, 0 0);
.sr-only {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0,0,0,0);
}스크린리더에만 읽히고, 화면에서는 제외할 때 screen reader only라는 클래스네임을 부여하고, 그 클래스를 가진 요소에만 clip을 적용하는 방법이다.
clip은 보여지는 값을 정하는 속성인데, 범위를 0으로 하면 곧 아무것도 안보이게 한다는 말이다.
접근성을 고려해서 요소를 숨기는 유용한 방법이니 참고해서 사용하면 될 것 같다.
출처: https://velog.io/@ursr0706
출처: https://rgy0409.tistory.com/3079 [친절한효자손 취미생활]
