Nyong's Blog
0%

201106_TIL(HTML role 속성)

Posted on Edited on In

오늘 한 것

HTML/CSS

role 속성

1
2
3
4
5
6
7
8
9
10
11
<!-- 영역의 주요 header일 경우 -->
<div role="”banner”"></div>

<!-- main의 역할을 할 경우 -->
<div role="”main”"></div>

<!-- 영역의 footer일 경우(랜드마크 역할)-->
<div role="”contentinfo”"></div>

<!-- a 태그를 버튼으로 사용할 경우 -->
<a role="button"></a>

role="dialog"를 사용하면 마크업이 연속적이지 않아도 바로 접근 가능. (스크린 리더 등에서 딤드된 팝업에서 사용될 수 있다.)

  • 위와 같이 role="#" 속성을 사용할 수 있다.
  • role속성의 속성값은 정말 많다. 적재적소에 사용해보자!
  • role속성을 이용하여 더욱 시멘틱한 마크업 효과를 줄 수 있다.
    참고 W3C RoleAttribute

접근성 table의 속성

headers 와 id 속성

1
2
3
4
5
6
7
8
9
<table>
  <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <td headers="name">Firstname</td>
    <td headers="name">Lastname</td>
  </tr>
</table>

  • th의 headers 속성과 고유 id를 부여하게 되면 같은 id 값을 갖은 요소들 값을 같이 출력한다.

  • 위의 예의 경우 Name의 id 값과 같은 headers 값을 가진 셀인 Firstname 과 Lastname을 출력한다.

  • 다시 말하면 id 값과 headers의 값을 비교하여 id 값으로 연결 관계를 만들어준다.

scope 속성 사용

1
2
3
4
5
6
7
8
<tr>
  <th scope="col">이름</th>
  <td>John</td>
</tr>
<tr>
  <th scope="col">성별</th>
  <td>남자</td>
</tr>

  • 위의 경우 scope="col" 속성과 속성값으로 이름: John , 성별: 남자 순서로 읽어준다.

  • row의 경우 scope="row"를 사용하면 된다.

  • 위와 같이 table 또한 의미론적으로 강화할 수 있는 요소가 있으니 잘 써보는 것이 좋겠다.

positon과 transform을 이용한 가운데 정렬

1
2
3
<button type="submit" class="button-search" aria-label="검색">
  <span class="icon-search"></span>
</button>
1
2
3
4
5
.news__press-form .button-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

검색버튼

  • 위와 같이 positon:absolute에 top: 50%을 주면 y축 중앙에 위치한다.
  • 하지만 배경이미지의 시작점이 중앙인 것이지 배경이미지의 중앙과 좌표의 중앙을 맞추는 것이 아니기 때문에 조금 어긋나 보일 수 있다.
  • transform: translateY(-50%)를 이용하여 배경 이미지의 y축을 중간으로 맞추면 전체 y축 중앙에 위치하며 버튼의 크기가 변해도 항상 중간을 유지한다.
  • 정중앙을 원한다면 x좌표를 같은 방식으로 추가해주면된다.

기타

  • <details>를 사용하면 접었다 폈다가 가능하지만 브라우저 호환성이 너무 안 좋다.
    `<details>`

  • 개발과 배포는 항상 다른 폴더로 관리하는 것이 좋다.(Build / production로 나눠야한다.)

오늘 느낀 것

  • 시멘틱 마크업…중요….
  • 다음 주 부터 클론 코딩 프로젝트…
  • 허리 아파…

Nyong’s GitHub