[HTML실습] 01 - Markup basics

>

HTML - basic

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

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

 

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

 

---

1) 기본-banner.html / banner.css

최소한의 단위로 자른후, 하나하나 의미에 맞게 markup을해준다.

그룹을 묶을 때 사용하는 태그 div를묶어준다.

 

HTML은 문서의 콘텐츠를 의미에 맞게 마크업을하는 애다.

그런데 처음HTML배울때 계속 스타일적인 요소와 헷갈려하고, 

스타일적인 요소로 HTML을 바꾸려고한다.

하지만 스타일 신경 하나도 안써도 즉, HTML을 의미있게 마크업하는것에만 신경을써도 나중에 스타일은 얼마든지 먹일수 있다.

 

 

2) 기본 - google.html/google.css

브라우저가 헷갈릴만한 문제를 쓰고있지않을까? 

html escape code

 

 

3) img - feature.html / feature.css 

(1) img태그를 썼어, 꼭 들어가야하는 속성에는 2가지가있어 src , alt 

근데 alt에 뭔가...이미지를 설명하기가 되게 애매해 혹은 정보자체가 그렇게 크게 의미가 없어.

그럼 아예 alt를 없애주는게 아니라! 

그냥 alt="" (빈스트링즉, 빈값으로)이렇게 비워둬! 

 

(2) img태그  smart하게 처리하기 

그런데 누군가는 위의 O이미지가 아무리 생각해도 정보로써 아무런 가치가없어.
저거를 굳이 img태그를 사용하면서까지 사용하고싶지않아! 하는 프론트엔드개발자도 있겠다.

근데 이것도 충분히 맞다. 

사실 제일 중요한건 텍스트 내용일경우, 이미지를 사용하고 싶지 않을경우( 문서를 작성하는 개발자관점의차이)

그럼 과감히 지워주자! 

 

따라서 결론으로 말하고 싶은거는, 내가 만약 img태그를 사용할 때

정보로써 가치가 없다! 라고 판단이 되는것은 꾸미는역할인 css로 별도의 처리를 해서 markeup을 해주는것이 좋다.

 

4) img - logo.html / logo.css

이미지가 정보콘텐츠로써 가치가 있는지 없는지 생각해보자!

logo는 하나의 브랜드 아이덴티티이며, 사이트의 전체를 대표하는 logo이므로 의미있는 정보라고 생각한다.

그래서 css처리가 아니라 img태그로 markup을 한다.

 

5) Breadcrumb, Pagination - breadcrumb.html / breadcrumb.css

링크를 타고타고~ 들어가는것을 Breadcrumb,

 

페이지간의 이동할 때 링크들의종합을 Pagination

 

...은 list안에 들어가야하며, 아래와같이 의미있는 태그를 사용해준다. 

 

✨New 개념 -WAI-ARIA (Web Accessibility Initiative)

Web Accessibility Initiative - 인터넷에 접근성을 높이는데 도움을 주는 API의 역할을 한다.

Accessible Rich Internet Applications -  인터넷을 사용하는 사람들이 좀 더 쉽게 접근할 수 있게 도와주는 장치이다.

 

즉, 적용을 해보자면 이렇게 Previous라고 하는 태그에다가 그냥 스크린 리더기를 읽었을 경우, Previous라고 읽히는데 

스크린리더기를 읽으시는 분들에게 아래와같이 더 정보성이 있는 (global attributes) aria-label속성을 사용하여 

aria-label 속성을 추가한 내용이 우리가 눈으로 봤을때는 아무런 변화가 없지만, 스크린 리더기를 읽을때 Go to previous page라고 읽히게 해준다. 

 

이렇게 markeup을 하는것이 웹프론트개발자한테는 너무나 중요한 역할이다.

왜냐하면 결국 웹 브라우저는 어떻게 사용하느냐에 대한 그 경험에 관한 것이고, 경험같은 경우에는 일반적인 사용자뿐만아니라 불편함이 있는 사람들도 고려를해서 markeup을 해야하므로 그때 aria-label을 사용해서 markeup해주면 프론트엔드 업무를 끝마친 것이라고 할 수 있다.

 

6) Product Card / 06-product-card 폴더

별표 같은 경우에는 스크린리더로 읽히지 않았으면 좋겠다.

또 브라우저한테도 딱히 중요한 정보가 아니다. 따라서 span으로해서 감싸고,

aria-hidden="true"라고 적어준다.

이 뜻은 스크린리더로 읽었을때 감출것인가? 즉, 안읽을것인가? 물었을때, true! 

즉, 다 생략해라~ 라고 알려주는 것이다. 

 

사실 이런거는 css로 하면 정말 복병이다.그래서 태그로 처리했을때 저렇게 중요하지 않다는 것을 aria-hidden이라는 속성을 통해 제공 할 수 있으므로 굉장히 효율적이다.

 

 

---

📑 HTML배움을 통한 오늘의 일기 :

TIL저장소에서 나의 README.md 파일을 봤을때 문득 코드를 보게되었는데, 정말 부끄러웠다.

매 줄 마다 <ul><li>...<li></ul> 이렇게 넣고있었다니..

그리고, 그냥 엉망진창이여서 왼->오 로 다바꿔버리니까 

라인 수도 확 쭐고, 보기에도 한 눈에 보기쉽고 구조화 되어있어서 뭔가 속이 뻥~뚤린 기분이였다 👍👏✨

 

MI개발꽃 Github

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

 

 

---

참고자료 : 

김버그의 HTML

goorm