[HTML실습] 02 - Markup basics

 

HTML-basic

 

 

항상 생각하며 markeup해야하는 점:

 

1. 기능적으로 어떤 역할을 하는까?  - > 마크업
2. 정보콘텐츠로써 어떤 역할을 하는가? -> a링크를 걸어줘야된나?

 

3. 문서를 작성하는 개발자 관점의 차이마다 조금씩 달라질 수 있다.

---

1) dd,dl,dt / 07-instagram 폴더

문득 dd,dt,dl은 언제 쓰는 걸까라는 생각이들었다. 

dl보다ol(순서 있는 목록), ul(순서 없는 목록)이 더 익숙하게 느껴지는데, 그럼 왜 dl이 있는것이고, 언제쓰는 걸까? 

이는 웹 접근성을 생각해서 존재 , 목적에 따라 태그를 신중히 적용해야한다.

 

그렇다면 dl은 언제 써야 할까?

항상 예를들어 dl태그 MDN-dl를 보면 너무나 잘 풀어주고, 이상적으로 작성이 잘 되어있지만, 잘 와닿지는 않는다. 

 

다음 형태에 가장 적합: 
(A) is (B)형태 / ~는 ~이다.

(A)는 Name. 즉, 상위 또는 추상적 개념 

(B)는 Value. 즉, 하위 또는 구체적 내용

 

 

 그리고 의미있게 dt태그를 보면 Posts 즉, P를 대문자로 해주고, css로 소문자 처리를해줬다.

그말은 즉슨HTML 마크업할때는 의미를 전달하는 것을 다시 한 번 강조한다.

 

 

2) dd,dl,dt / 08-receipt 폴더

3) 09-github-dropdown-menu 폴더

09는 직접 code를 보기를 추천한다. 

다만 여기서 문득 href="#" 에 대해서였다. 왜 #을써줄까?

 

보통 css파일에서 # + id 와 같이 사용하여 같은 문서내의 해당 element로 이동한다.
하지만 그냥 href="#"로 해주게되면 의미없는 링크를 주어 페이징이 안되도록해준다.

 

하지만 저렇게 해주면 클릭시 화면 최상단으로 이동하게 되므로

 href=”javascript : ;”위와 같은 방법을 추천하는 곳도 있다.

 

4) 10-input-group 폴더

code로 확인하기

 

5) 11-feed 폴더 

난이도 : ⭐⭐⭐⭐⭐

항상 완성본을 생각하거나, 디자인시안을 보고작업할시도 마찬가지로 완성본을 보고 마크업해나간다.

왜냐하면 사라졌다 생겼다하는 이벤트도 어찌됐던 버튼을 누르면 나타나야할 요소이니까 , 어쨌든 마크업을 해야되기 때문이다. 

 

어렵지만해보자! 

1. 최소한의 기능단위로 덩어리를 나눈다.

2. 한 요소에 heading은 꼭 하나씩 들어가주는게 좋을 것 같다(주관적)

의미있는 태그들의 나열은 위와같으며, 이제 나머지는 css요소 처리를 해주면 된다!

 

 

 

+) 추가로 - Sectioning Elements  / 구조적인 웹 문서 설계 

MI개발꽃 Github

GitHub - luckyjek/TIL_: Today I learned / 오늘의 학습 기록소

 

---

참고자료 :

김버그 - HTML