오늘 대망의 팀 소개 페이지 발표날이 다가왔다.
이번주 월요일(04/15)부터 진행된 팀 소개 페이지!!
튜터님의 피드백을 정리하여 다음부터는 피드백 내용을 잘 지킬 수 있도록 하자 😻
피드백
👍 칭찬해
- 깔끔한 디자인
- 깔끔한 코드
- 군더더기 없는 코드. 불필요한 코드 최소화
- 각 페이지 별 필요한 라이브러리만 다운로드 (jquery, bootstrap)
- 다양한 인터랙션 구현
- 사용자 경험 고려
- 페이지 간 이동에 신경 써져 있음
👎 아쉬워
- 시맨틱 태그 사용 노력하기
- git convention (commit msg) 정하기
- 댓글(한마디) 조회 기능 - 시간 순으로 정렬되지 않음
- 댓글(한마디) 수정 기능 - 미구현
- 댓글(한마디) 삭제 기능 - 아무나 삭제 가능함
시맨틱 태그
☝️ semantic: 의미의, 의미론적인
시맨틱 태그는 의미를 담고 있는 태그이다.
<div> 태그를 사용하면 이 태그가 무슨 역할을 하는지 알 수 없지만, <header>와 같은 시맨틱 태그를 사용하면 "아 태그는 헤더구나"를 직관적으로 웹페이지 구조를 이해할 수 있을 것이다.
왜 사용할까?
- SEO 향상: 검색엔진이 콘텐츠를 더 쉽게 이해할 수 있음
- 코드 가독성
- 접근성: 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술에 대한 유용한 정보와 단서를 제공
종류
header
- 글로벌 헤더: 로고 및 네비게이션 작성
- 글이나 콘텐츠의 서두
nav
- 탐색(navigation)을 위한 링크들의 영역
- ex) 메뉴, 목차, 색인
main
- 메인이 되는 내용
- 문서 고유의 내용이어야 함 (문서 또는 문서 섹션 전체에 걸쳐 반복되는 내용 금지)
section
- 주제별 콘텐츠 그룹
article
- 독립적으로 배포 가능하거나 사용할 수 있는 콘텐츠를 묶음
- ex) 게시판 글, 뉴스 기사, 블로그 글, 댓글
<article>
<h2>UX 디자인의 중요성</h2>
<p>사용자 경험(UX) 디자인이 왜 중요한지에 대한 논의입니다. ...</p>
<time datetime="2023-10-12">2023년 10월 12일</time>
<a href="/ux-design-importance">원문 보기</a>
</article>details & summary
details: 사용자가 선택하여 열고 닫을 수 있는 콘텐츠summary: 대화형 위젯의 세부 정보를 요약하거나 제목을 정의
- ► 모양 마커 표시
<details>
<summary>요약 내용</summary>
추가 정보나 세부 내용
</details>| 마커 클릭 전 | 마커 클릭 후 |
|---|---|
 |  |
figure & figcaption
figure: 주변 콘텐츠의 이해나 흐름관 관련된 독립적인 콘텐츠figcaption: figure를 설명- ex) 이미지, 그림, 도표, 사진, 코드 목록
<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
<img src="earth.jpg" alt="우주에서 바라본 지구 사진">
<figcaption>우주에서 바라본 지구</figcaption>
</figure>aside
- 좌측 또는 우측 구역
- 주로 사이드바 혹은 문서의 내용과 관련된 추가 정보
mark
- 강조
- 브라우저에서 노란색 형광펜처럼 표시된다
footer
- 웹사이트 최하단 구역
- 주소, 전화번호, 카피라이트 등 작성
이 외에도 다양한 태그들이 있는 것 같은데, 다음 기회에 공부해 봐야겠다.
여기에 HTML 태그들이 굉장히 잘 정리된 것처럼 보인다 ^_^
참고 자료
글 잘 쓰고 싶어요