HTML을 시멘틱하게 작성한다는 것 (feat. img 태그)

김버그의 HTML & CSS 강의를 결제하고

강의 극초반에는 내용에 비해 비싸다고 생각했는데

26% 들은 지금 시점에서 드는 생각은 잘 선택했다는 것!!!

 

HTML, CSS 기본이야 어디서든 무료로 배울 수 있지만

본 강의는 +어떻게 제대로 사용하는지 알려줘서 도움이 된다 :)

 

👇 내가 듣고 있는 강의는 요고! 👇

https://edu.goorm.io/

---

이미지를 사용할 때도 그 의미를 파악하는 것이 좋다.

단순하게 이미지를 넣으려면 <img /> 태그를 쓰면 되지 않나? 라고 생각할 수 있지만

정말 의미가 있는 이미지가 아니라면

태그를 사용하기 보단 CSS에서 이미지를 넣어주는 것이 더 의미에 부합하다는 것!

 

가령 아래와 같은 카드 뉴스 형태를 제작해야 한다고 할때 어떤 방식으로 코드를 짤 것인가?

 

가장 먼저 생각나는 코드는 단순하게 <img /> 태그를 쓰는 것인데,

그렇다면 alt="" 안에 무슨 내용이 들어가야할까?

Digital Marketing...?

<img 
 src="https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202203/113320-552/top-%E1%84%83%E1%85%B5%E1%84%8C%E1%85%B5%E1%84%90%E1%85%A5%E1%86%AF%E1%84%86%E1%85%A1%E1%84%8F%E1%85%A6%E1%84%90%E1%85%B5%E1%86%BC.jpg"
 alt="" />

 

하지만 이미 카드 뉴스 안에 제목인 "제로베이스 디지털 마케팅 스쿨 2기"가 있으므로

제목이 중복된다고도 생각 할 수 있다.

그런 의미로 alt="" 자리에 아무것도 넣지 않아도 된다면 굳이 <img /> 태그를 쓸 의미가 없단 것이다.

 

<div class="card-item">
	<div class="image"></div>
	<h1>제로베이스 디지털 마케팅 스쿨 2기</h1>
	<p>이론부터 실무까지 아우르는 커리큘럼! 디지털 마케팅 실무 경력 쌓아 취업까지 3개월로 끝내세요.</p>
</div>

이런 식으로 image 클래스에 background 속성으로 이미지를 깔아주는 것이 의미적으로 더 부합 할 수 있다.

 

 

의미적으로 코드를 짜기 가장 쉬운 방법은

스크린 리더기가 코드를 보고 해석했을 때 어떻게 읽어주는가를 생각하는 것이다.

 

그런 의미애서 팝업창의 닫기 버튼이 아이콘 형태라면 스크린 리더기가 어떻게 읽어줘야 할까?

엑스..? 닫기?

이럴때 aria-label attribute을 사용하면 된다.

<button class="close-btn" aria-label="팝업창을 닫습니다"></button>

<button class="close-btn" aria-label="팝업창을 닫습니다"></button>

 

 

사실 의미를 어떤식으로 해석하는가에 따라 코드는 달라질 수 있다고 생각한다.

다만 단순하게 1차원적으로 이미지를 넣는다면 <img />태그를 무조건 써야지라는 생각에서 그치는 것이 아닌

의미를 한번 더 생각해보고 마크업을 하는 것이 중요하단 점!!