알아두면 쓸모있는 HTML 태그와 속성
페이지 내부 링크 만들기
<a></a> 태그를 응용해서 페이지 내부의 요소로 이동하는 내부 링크를 만들 수 있다.
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>Contacts link 를 클릭하면 href에 명시된 id를 가진 태그 위치로 이동한다.
Dead link 만들기
link를 걸기 전에 <a>태그를 추가하고 싶을 때, href="#" 처럼 주소 자리에 해시태그를 넣어준다. Javascript를 사용해서 링크의 동작을 변경할 때도 유용하다.
Required Field 만들기
HTML태그만을 사용해서 사용자가 양식을 채우기 전에는 제출할 수 없도록 만들 수 있다. 매우 간단히, required 라는 키워드를 input 태그 안에 넣어주면 된다!
<input type:"text" required> 라디오 버튼과 label
label과 라디오 버튼을 작성할 때는 다음과 같이 input의 id 속성 값과 일치하도록 label의 for 속성을 설정하는 것이 바람직하다.
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>체크박스와 label, name
체크박스를 쓸 때는 label의 for 속성으로 input의 id 를 넣어주는 것과 함께,
관련 있는 checkbox들에는 모두 동일한 name을 부여해주어야 한다.
예를 들어 "좋아하는 동물"을 묻는 질문에 대해
- 고양이
- 강아지
- 펭귄
의 선택지가 있다면, 각각의 선택지에 id값으로는 개개의 고유한 값을 넣어주고, name 값으로는 "animal"처럼 공통된 값을 넣어 준다.
입력과 value
form을 제출할 때 입력값을 서버로 보내주려면, value에 서버에 전송하고 싶은 값을 넣어주어야 한다.
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>value속성을 생략하면 기본값인 "on"이 서버로 전송된다. 이는 별로 쓸모 없는 정보이기 때문에, value에는 서버에서 필요로 하는 정보를 넣어주어야 한다.
checked 된 input만들기
라디오버튼이나 체크박스 태그 안에 checked 옵션을 넣어 주면 디폴트로 체크되어있는 입력칸을 만들 수 있다.
<input type="radio" name="test-name" checked>접근성 높이기
모든 사람이 접근할 수 있는 웹 페이지 만들기
HTML5 요소들
HTML5 에는 검색 엔진 최적화, 접근성 향상을 위한 의미를 가진 태그들이 있다.
main, header, footer, nav, video, article, section 등이 이러한 태그에 속한다.
main 태그는 메인 콘텐츠를 감싸는 데 사용되고, 페이지당 하나만 있어야 한다.
또한 main 태그에는 화면 판독기 등의 기술이 메인 콘텐츠를 빠르게 탐색하는데 사용할 수 있는 랜드마크 기능이 포함되어 있다.
header 태그는 상위 태그에 대한 소개 정보, 탐색 링크(navigation bar 같은?) 를 감싸는 데 사용된다. header 태그 역시 랜드마크 기능을 공유한다.
footer 태그는 페이지 하단에 주로 위치하고, 저작권 정보 또는 관련 문서에 대한 링크를 감싸는 데 사용된다. 랜드마크 기능을 가지고 있다.
figure 태그와 figcaption 태그를 사용하면 이미지, 차트 등의 시각 자료와 그에 대한 설명을 한 번에 묶을 수 있다. 두 요소를 같이 래핑하면 관련 있는 콘텐츠를 의미론적으로 그룹화하고, 이미지를 설명하는 대체 텍스트를 제공할 수 있어 접근성을 향상할 수 있다.
이미지 태그에 alt 속성 추가하기
alt란 대체 텍스트를 의미한다. 이미지의 내용을 설명하는 내용이나 이미지를 대체할 수 있는 내용을 담는다. 이미지가 로드되지 않거나 사용자가 이미지를 볼 수 없는 경우 도움이 된다. 또한 검색 엔진에서 이미지를 검색 결과에 포함시키는 데에 사용되기도 한다.
그러나 이미지가 이미 그에 대한 설명과 함께 제시되어 있거나, 단순 장식용으로만 사용되는 경우라면 alt 속성을 비워두어도 된다. 이때는 alt="" 와 같이 빈 텍스트를 넣어준다.
headings 수준 맞춰 사용하기
h1, h2, h3 태그들은 콘텐츠를 구조화하는데 도움이 되는 핵심적인 태그이다.
즉 h1 > h2 > h3 > h4 > h5 이런 식으로 계층화된다.
h2 뒤에 h1 가 나오게 되면 새로운 섹션이 시작된다는 의미가 된다.
h2 뒤에 h4 여러 개가 나오면 화면 판독기 사용자에게 혼란을 줄 수도 있다.
h1 은 각 페이지의 주요 주제를 의미하기 때문에, 페이지당 하나만 있어야 한다.
💡 표현하고자 하는 의미에 맞는 heading을 사용하자!라디오버튼 그룹화하기
라디오버튼을 의미론적으로 그룹화하기 위해서 fieldset 이라는 태그를 사용할 수 있다. fieldset 내부에 legend 를 사용해서 그룹화에 대한 설명을 작성할 수도 있다.
날짜 표준화하기
태그로 날짜 또는 시간을 래핑하고, datetime 속성으로 표준화된 시간을 명시해줄 수 있다.
<p>Master<time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>Screen-reader만을 위한 요소 만들기
화면에 시각적으로 보이지는 않지만 화면 판독기가 읽을 수 있도록 하기 위해서 위치를 조정해주어야 한다.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}display: none; 이나 visibility: hidden; 으로는 화면판독기에서도 읽을 수 없게 만든다.
width: 0px; height: 0px; 으로 사이즈를 0으로 만들면 요소를 아예 삭제해버리는 것이 된다.
참고자료
