7. Instagram User Profile (feat. dl의 자식 dt와 dd. 그걸 묶는 div)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처: edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

📸 Screenshot 

---

 

 

 

📝 메모

---

1.

머릿속에 계속 떠다니는 생각:

'의미 덩어리로 어떻게 그룹핑할 것인가..............'

 

 

 

2.

정보가 A는 a고, B는 b고, C는 c다.

라는 식으로 key-value 형태.

=> dl, dt, dd 태그 떠올리기 !

 

 

 

3.

dl(Definition list)의 자식 태그는 dt, dd가 있는데

dt,dd를 하나로 묶고 싶을 때, <div>태그로 묶어주면 된다.

(다른 태그는 안됨)

 

 

4.

UI 상으로는 왼쪽에 이미지, 오른쪽에 사용자 정보가 있으니까

처음 마크업 할 때는 이미지 먼저, 사용자 정보를 나중에 했는데.

사실 의미를 따져보면

사용자 정보가 먼저 나오고 그 다음에 이미지가 따라나오는 게 좋을테니

마크업 순서를 바꿔준다.

(UI는 CSS로 처리)

 

 

5.

마크업 할 때는 스타일 보다는 의미를 먼저 생각하기.

그리고 스크린 리더를 이용하는 분들이

웹페이지 내용을 들었을 때, 어떻게 해야 논리적으로 웹페이지가 이해가 잘 될지 생각하면서

마크업을 하자!