2일차 - 퍼블리싱 스터디 기록

은정 멘토님이 진행하시는 퍼블리싱 스터디에 참여하게 되었다.

배우면서 헷갈리는 것과 피드백받은 내용 위주로 기록하려고 한다!

2일 차에는 네이버 홈페이지, 회원가입, 가입정보 입력 페이지 마크업 연습
코드 리뷰 위주로 스터디가 진행되었다.

배운 내용을 잘 정리해서 올리고 싶지만 우선 기록이라도 하는 것에 목표를 두고 있다!

 

nav 태그

• 한 사이트에 편하게 이동할 수 있게 만들어줌
• 사이트 내 탐색하는 버튼으로 nav를 사용
• 외부 링크로 이동할 때 묶는 방법으로 사용 X
  ex) 쥬니어네이버, 해피빈은 같은 회사지만 다른 서비스, 외부 링크
• main 태그 안에 nav 태그가 들어가지 않음
• 시각적으로만 바라봐선 안됨

 

label 태그

• 사용하지 않을 경우 접근성이 확 떨어짐
  1) 시각적으로 텍스트 클릭이 안됨
  2) 소리로 듣는 사람들은 무슨 버튼인지 설명 못 들음
  (옷이 있는데 상표가 없는 느낌)
• 비워둘 거면 아예 쓰지 말자

 

main 태그

MDN 문서

• IE에서 아예 지원 안됨. 시맨틱 태그 인식을 못해서 인라인으로 인식해버림
  (전에는 display block으로 맞춰줌)
• 웹 접근성 때문에 시맨틱을 사용하는데 IE에서 main을 div로 바라보면 아무 의미 없음
• 웹 접근성 높이는 방법으로 role 값 지정해줌

  <main role="main"></main>
  
  <!--  role 값을 이용해서 button 기능을 하도록 인식 -->
  <a role="button"></a>

 

검색창 마크업 연습

피드백받기 전 연습한 것

<form action="get">
    <fieldset>
        <legend>검색</legend>
        <select name="search" id="search-option">
            <option value="default">통합검색</option>
            <option value="blog">블로그</option>
            <option value="cafe">카페</option>
        </select>
        <input type="search" id="search" placeholder="검색어를 입력해 주세요.">
        <button type="submit">검색</button>
    </fieldset>
</form>

• form 태그 안에 field 태그가 위치하는 것 헷갈렸는데 제대로 알게 됨 label 태그 안에 들어갈 내용이 없다고 생각해서 생략했는데 따로 방법이 있는지 찾아보자

 

dl 태그

• dt를 여러 개 나눈 경우 전체를 dl로 감싸도 전혀 상관없음

 

address

• 원래 목적 : 이 사이트 저작권자 정보
• 이 사이트 통틀어서 footer에 하나만 있어야 함
• 주소를 나타내는 건 맞지만 우편물 주소로 쓰는 경우는 용도에 맞지 않다. 그런 경우는 <p> 태그를 사용함
• 항목들을 address로 묶고 <ul>이나 <dl>를 사용함
  ( ul이 접근성 더 높다)
• address가 없는 경우 접근성이 떨어지는 사이트
• 전화번호, 이메일, 택스 번호 등 연락할 수 있는 정보가 있어야 한다.

 

📍 다음 과제에 적용할 점

- 시각적으로 먼저 보기보다 문서 명목상으로 바라보기

- 웹 방향성을 고민 잘해서 태그에 휘둘리지 말고 내 기준을 세우기