What I Learned Today
오전에는 프레이징 요소, 인용문과 줄바꿈, 텍스트 레벨 요소에 대해서 배웠다.
- 프레이징 요소에서 em, i, strong, b 태그는 텍스트의 강세를 나타낸다.
- em과 i 태그는 보여지는것은 기울임꼴이지만 em은 컨텐츠를 강조하는 의미가 있지만 i는 단지 기울임꼴로 보이도록 한다.
- strong과 b 태그는 굵은 글꼴을 보여주지만 strong은 컨텐츠 강조의 의미가 있고 b는 굵은 글꼴로 보이도록만 한다.
- 인용문은 blockquote와 q 태그를 사용한다.
- blockquote 태그는 보통 문단 전체를 인용할 때 사용하고 q 태그는 짧은 인용문이나 문장 준간에 섞어서 사용한다.
- cite 태그와 속성은 인용의 출처를 지정할 수 있어서 문서의 신뢰성을 높이거나 SEO에 도움이 된다.
- 줄을 바꾸기 위해서는 br 태그를 사용한다.
- 텍스트 레벨 요소에는 다양한 태그가 있다.
- sub과 sup 태그는 각각 위첨자와 아래첨자를 사용할 수 있다.
- 그리고 abbr 태그는 약어나 약칭을 나타낼 때 사용하는데 title 속성을 사용하면 내용을 이해할 수 있는 추가정보를 제공할 수 있다.
- title 속성을 사용하면 텍스트 아래에 점선이 생기고 마우스를 올리면 툴팁이 나온다.
- time 태그는 날짜와 시간을 보여줄 때 사용하며 datetime 속성을 사용하면 정확한 의미를 부여할 수 있다.
- mark 태그는 하이라이트 된 텍스트를 나타내는데 형광팬을 칠한 것처럼 나온다.
- s 태그는 텍스트에 취소선을 나타내고 small 태그는 텍스트의 크기를 작게 보여준다.
오후에는 테이블 관련 요소, address 요소, 임베디드 요소에 대해 배웠다.
- 테이블은 table 태그를 사용한다.
- tr 이라는 테이블 행 요소를 넣고 그 안에 th와 td 요소를 넣으면 기본 테이블이 만들어진다.
- 여기서 th는 테이블의 제목, td는 테이블의 내용요소다.
- 중요한건 th 요소에 scope 속성을 사용하여 열 또는는 행 제목임을 스크린리더가 읽을 수 있도록 하는게 포인트다.
- address 태그는 연락처 정보를 표현하는 데 사용하며 일반적으로 이메일, 전화번호, 주소 등을 포함한다.
- 접근성 측면에서 스크린리더가 읽기 좋게 만들고 SEO는 이 요소를 통해 관련성을 높일 수 있다.
- picture 태그는 여러 이미지를 그룹화하고 조건에 따라 이미지를 선택할 수 있도록하는 컨테이너 요소다.
- img 태그와 함께 사용되며 source 태그를 포함하여 다양한 이미지를 정의할 수 있다.
- media 속성과 srcset 속성을 사용하면 반응형 이미지도 사용할 수 있다.
- video 태그는 페이지에 비디오를 삽입하고 재생할 수 있도록 도와준다. 그리고 함께 사용할 수 있는 다양한 속성도 있다.
- track 태그는 video 태그와 함께 사용되며 자막, 설명, 챕터, 메타데이터 등을 제공하는 데 사용된다.
- inframe 태그는 다른 HTML 문서나 외부 콘텐츠를 현제 웹 페이지에 사입할 때 사용한다.
- object 태그는 다양한 유형의 외부 콘텐츠를 삽입하는 데 사용하지만 inframe 태그보다 더 다양한 파일 형식을 지원한다.
- map 태그는 이미지 맵의 컨테이너 역할을 하고 area 태그는 이미지 맵 내에서 클릭 가능한 영역을 만든다.
- area 태그의 속성에는 영역의 모양을 정의하는 shape, 좌표를 정의하는 coords, 이동할 url을 지정하는 href영역에 대한 대체 텍스트를 제공하는 alt 그리고 링크를 열 때의 대상 창을 지정하는 target 등이 있다.
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
마크업 이녀석 생각보다 어렵다... 아니 많이 어렵다..근데 재밌다!
마음같아서는 모두 div 안에 때려박고싶지만 웹 접근성이 좋은 페이지를 만들기 위해서라면 배워야한다.
공식 문서를 찾아보면 이것보다 더 많은 태그와 속성들이 있다.
오늘 배운것들이 익숙해지면 더 찾아봐야겠다고 생각했다.
그리고 웹을 만들때 아무 생각 없이 그냥 만들었는데 웹 조약을 잘 지키며 만들어야겠다고 생각했다.
블로그를 쓰다가 알았는데 태그와 요소는 다른 말이다...
반응형
