영어영문학을 전공했지만, 21년 11월부터 프로그래밍을 계속 접하면서 아예 지식이 없는 수준은 아니였습니다.
코딩을 하면서, 공부를 하면서 여러 매체를 통해코더가 아닌 개발자가 될 것,왜 그런 코드를 작성하였는가?라는 말을 많이 접했습니다.
그 의미를 잘 모르는 채로 여러 프로젝트를 진행해왔던 내 자신이 참..
WECODE 부트캠프를 시작한 첫날부터 나 자신을 반성하게 되었습니다.
나는개발자가 되어야 하기 때문에 이번 포스팅 주제로 초심을 다시 찾게 되었습니다!!!!!!!!
위코드 스타뜨~!!!!!
📌 HTML tags
브라우저의 골격, 레이아웃을 담당하는 HTML에는 다양한 태그가 존재합니다.
아무런 의미가 없이 브라우저의 부분부분을 나눈다는 div 태그만을 사용할 수도 있습니다.
각각의 div태그에 class와 id 선택자를 부여해서 스타일링을 하고 구조를 잡아줄 수 있죠.
지금은 웹을 구성하고, 만들 때 사용하는 HTML5라는 최신 표준 권고안을 사용하고 있습니다.
따라서 위와 같이 의미없는 div태그에 class를 남발하는 행위는 불필요해졌습니다.
이제는 의미있는 태그들이 등장하게 되었는데요.
다음 부분에서 같이 확인해보겠습니다.
📌 HTML5 Semantic Tags
의미가 있는 tag를 활용하자
header / nav / section / article / main / aside / footer ...
위의 단어들을 보았을 때 다음과 같은 느낌을 받을 수 있겠습니다.
머리
네브.. 네비?
섹션.. 구역이구나
아티클? 기사?인가
이건 알지. 메인이구만
이건 좀,, 덜 중요? 옆에 있는 놈?
발
tag의 의미를 잘 모르는 사람이 보기에도 대충 어떤 의미인지 감이 올 것입니다.
이외에도 다양한 Semantic Tag들이 존재합니다.
웹페이지를 만들 때 div로만 구성을 해도 상관이 없습니다.
그렇다면 우리는 왜 Semantic Tag를 사용해야 될까요?
📌 Why Semantic Tags?
사람이 쉽게 읽을 수 있습니다.
코드의 가독성,, 유지보수,,
여기저기서 참 많이 들어봤을 법한 단어들이지만 잘 와닿지 않는 경우들이 있을텐데요.
만약 아래의 코드를 다른 사람 (또는 협업 개발자)이 본다고 가정해봅시다.
<div class="header"> 제목입니다. </div>
<div class="nav--bar"> 페이지로 이동하는 nav-bar입니다. </div>
<div class="main--section"> 메인 페이지입니다. </div>
<div class="footer"> 페이지의 정보가 담겨 있는 마지막 부분입니다. </div>지금이야 div요소가 네줄밖에 되지 않아 코드를 읽고 해석하는데 큰 무리는 없어보입니다.
하지만 실제 프로젝트를 진행하게 되면 수많은 코드를 만나게 될 것입니다.
수백개의 div태그를 읽고,, 그것을 직접 구분해야하는 것은 똑똑한 컴퓨터를 노예로 부릴 줄 아는 개발자에겐 어울리지 않아 보이네요🙄
수백/수천개의 div에 class를 부여하지 않았다면 아마도 내용으로 구분해야되지 않을까요?
이런 문제점을 보완하기 위해
아래의 코드로 수정해볼 수 있을 것 같습니다.
<header> 제목입니다. </header>
<nav> 페이지로 이동하는 nav-bar입니다. </nav>
<main>
<section>
메인 페이지입니다.
</section>
</main>
<footer> 페이지의 정보가 담겨있는 마지막 부분입니다. </footer>이전 코드보다 훨씬 더 읽기 편하죠? (편하다고 하세요)
코드 자체를 읽으면서 페이지의 구성과 코드의 뜻을 알 수 있을 것 같습니다.👍
다른 개발자와 협업을 하고 있다면 더욱 읽기 쉬운 코드가 되겠네요~!!
웹 브라우저도 쉽게 읽을 수 있습니다.
결국 컴퓨터가 사람이 작성한 코드를 읽어야 합니다.
Semantic Tag로 작성해주면 코드가 전달해주는 의미와 구조가 명확하기 때문에 해석하기 쉬워질 것입니다.
SEO (Search Engine Optimization)
Semantic Tag는 SEO에 영향을 미친다고 합니다.
SEO는 Search Engine Optimization의 약자로 검색 엔진 최적화를 의미합니다.
어렵네요 말이,, 쉬운 말로 풀어써봅시다.
여러분이 만든 웹페이지의 방문자 수를 늘리고 싶으시죠?
그럼 div말고 semantic tag를 사용하세요~!!
라고 할 수 있겠습니다.
구글SEO기본가이드에 의하면 SEO에 영향을 미치는 다양한 요소가 있습니다.
물론 그 중에서도 Semantic HTML Markup이 크롤링과 이미지 처리에 영향을 준다고 언급된 부분도 찾아볼 수 있네요.
📌 <img /> 🤷 background-image { url=""; }
자! 그럼, 이번 포스팅의 최종 주제입니다.
결론
<img src="파일경로" alt="사진이 없을 때 나오는 문장" />태그를 사용하자
img
1) alt 속성의 문자열 값을 통해 검색 및 이미지가 없을 때 문자열 반환 가능
2) img 자체의 의미부여
3) 태그의 속성을 통한 스타일링 가능
4)srcsetsize를 통한미디어쿼리구현 가능
background-image
1) 디자인적 요소로 사용할 때
이번 포스팅에서 Semantic tag를 사용해야되는 이유를 언급해드렸습니다.
의미를 갖고 있는 각각의 태그는 사람과 컴퓨터가 읽기 쉬우며,
내 결과물을 누군가에게 검색할 때에도 도움이 된다는 사실을 알게 되었습니다.
아래 코드를 통해 좀 더 세부적으로 알아보겠습니다.
<div class="profile-image"> </div>위 div 태그의 background-image 속성으로 사진을 넣어보겠습니다.
.profile-image {
background-image: url("../src/profile-image.png");
}다음과 같은 코드를 작성할 수 있겠죠.
역시 이 코드 한줄만 있다면 클래스 선택자를 통해 프로필 사진이 들어가나보다라고 이해할 수 있습니다.
하지만 수백, 수천개라면?,,
그 중에서도 css 코드가 누락되어 사진 파일이 렌더링되지 않는다면?,,
컴퓨터에서 아 div에 이미지 있었구나?.. 몰랐어라고 응답한다면?,,
미디어 쿼리를 구현하기 위해 저 css코드 하나하나 다 바꿔줘야되는 거라면?,,,
이런 문제가 발생할 수 있기에
아래와 같은 코드로 바꾸어 줄 수 있습니다.
<img src="../src/profile-image.png" alt="프로필사진" width="300px" height="300px">img태그를 해석해봅시다.
1) 사람: 아 사진이 들어가는 부분이네요?
2) 컴퓨터: alt 이거 검색하면 src 이거 보여주면 되지?
🛠️반응형 이미지를 구현하는srcset과 size에 대한 내용은 좀 더 공부를 하고 포스팅을 하겠습니다.🛠️
📌 마치면서
img태그와 background-image를 언제 어떨 때 사용하는지 잘 몰랐었는데
이번 공부를 통해 다시 한 번 복습을 할 수 있었다.
의미를 가진 태그 Semantic Tag는 사람과 컴퓨터가 읽기 쉬우며 검색 엔진 성능 향상에도 도움이 된다.
img 태그는 alt 속성의 문자열을 검색했을 때 src의 이미지를 렌더링해준다.
웹페이지 성능을 높여줄 수 있다.
(자기소개 페이지 만든 거 성능 측정해보니깐 SEO 점수가 82점이다... 다시 해보자)
이미지를 디자인적 요소로 사용하거나, 컨텐츠와 관련 없이 이미지를 불러오지 않아도 큰 문제가 발생하지 않다면 background-image를 사용해도 좋을 것이다.
📌 참고자료
https://poiemaweb.com/html5-semantic-web
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=en#howdoigetongoogle
