시작 전에... 첫 velog 포스트이기 때문에 몇 자 주절주절...

1. 며칠 전 위코드 41기 등록 신청 후 사전 스터디 시작 전까지 혼자 유튜브를 통해 이것저것 개발 공부를 시작했다. 그러다 위코드의 규정이 9월부터 변경됐고 사전 스터디 유료화 자료를 미리 받아볼 수 있게 되어 본격적으로 개발 공부를 시작하게 되었다.

2. 사전 스터디 자료에 있는 assignment를 풀어보며 머릿속에 흩어져 있던 HTML과 CSS 개념들을 조금 더 확실히 체득하게 되었다.

3. 첫 velog 작성이다. 개발 공부를 할까 말까 고민하던 차에 알게 된 플랫폼이었고 여러 개발자분들의 글을 읽으며 "나도 할 수 있을까, 할 수 있겠지, 해보자"로 마음이 움직였었다. 아직은 다른 개발자분들에 비해 새싹같은 나의 지식을 디지털의 바다에 무단투기하는 기분이지만 나의 이 비루한 포스트들 또한 개발을 시작하려는 사람들에게 도움이 될 수 있도록, 내 실력 향상을 위해서 열심히 정리해 보아야겠다.

Assignment

사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
✅ 위의 질문에 대답할 수 있나요? 실제 면접에서 자주 다루는 질문입니다. 이를 설명하기 위해서는 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.
✅ Semantic Web과 Semantic Tag에 대한 학습은 각자 구글링을 통해 학습하시고, 해당 주제로 블로그에 글을 작성해 보세요. 위의 면접 질문에 대한 답변과 연결시켜 작성해보시면 좋겠습니다.

웹페이지에 이미지를 넣는 방식

1. HTML에서 <img>태그 사용

<img src = "이미지 경로" alt="이미지 정보(코멘트)">

이는 일반적인 <img> 태그의 작성법이다.

alt 속성이 이미지의 정보를 담고 있어 이미지 로딩이 실패한 경우 broken image와 함께 alt에 적어놓은 코멘트가 사용자에게 보인다. 이를 통해 이미지를 왜 삽입해 놓았는지에 대한 개발자의 의도를 알 수 있다.

2. CSS에서 background-image 속성을 추가

{ background-image: url("이미지 링크"); }​

이는 일반적인 background-image 속성의 작성법이다.
<img>태그와 달리 alt 속성이 없기 때문에 background-image를 활용한 이미지가 에러가 나게 되면 어떤 정보를 담고 있었는지 알 수 없다.

3. 각각 어떠한 경우에 사용하면 좋을지

<img> 태그의 사용 방법에서 알 수 있듯이 <img>태그는 컨텐츠 내에서 이미지가 중요한 요소일 때, 에러가 나더라도 이미지의 의도를 전달해야할 때 주로 사용하면 좋다.

반면, backgrond-image는 스타일링을 목적으로 하여 이미지가 없어도 문서를 이해하는데에 큰 영향이 없을 때 사용하면 좋을 것이다.

4. 이 외에도 알게 된 것

<img>태그:

• 컨텐츠 내에서 이미지가 중요한 요소인 경우
• 이미지가 검색 엔진에서 노출되기를 원하는 경우: 태그 자체가 '이미지'라는 의미를 갖고 있기 때문에 alt 속성의 문자열을 검색 엔진에서 색인을 생성하여 검색시 노출이 된다. 반면, background-image는 속성이기 때문에 '이미지'라는 의미를 갖지 못해 자동으로 색인화하지 않아 검색시 노출이 되지 않는다.
• 웹 문서를 출력해야하는 경우:<img> 태그를 사용해야한다. background-image는 출력시 포함이 되지 않는다.

<img>태그와 같이 태그 자체만으로 의미를 파악할 수 있는 태그를 Semantic Tag라고 한다. 이에 관한 내용은 밑에서 정리할 것이다.

background-image:

• 디자인을 위해 이미지가 사용된 경우
• 이미지 위에 텍스트가 들어가는 경우
• 페이지 출력 시 이미지가 필요하지 않는 경우
• 아이콘처럼 반복되는 이미지일 경우

Semantic Web

Semantic: 의미의, 의미론적인

과거에는 div태그를 통해 구역을 나누었다. div 태그 자체는 많은 것을 감쌀 수 있지만 개발자가 한눈에 구조를 파악하기 어렵고 검색 엔진 또한 사이트를 정확하게 파악할 수 없어 검색 결과의 정확도 또한 떨어진다.

<div id="header"> 내용 </div>

HTML5에서는 위 태그를

<header> 내용 </header>

로 쉽게 더 의미론적으로 나타낼수 있게 되었다.

폭발적인 인터넷의 보급과 웹에 축적되는 정보가 방대해짐에 따라 오히려 정보의 검색과 활용이 어려워지게 되는 문제가 대두되었다. 우리가 알고 있는 일반적인 웹은 사람이 마우스나 키보드를 이용하여 원하는 정보를 찾아 눈으로 보고 이해하는 것이 전부이기 때문이다.

반면, 단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 웹 문서를 구조화하여 의미있는 내용 탐색을 용이하게 하고, 컴퓨터가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 Semantic Web이 등장하게 되었다.

즉, Semantic Web은 컴퓨터가 정보 자원의 뜻을 이해하고 분석하며 논리적 추론까지 할 수 있고, 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현하여 기계들끼리 서로 의사 소통을 할 수 있는, 또한 인간과 컴퓨터 모두가 잘 이해할 수 있는 차세대 지능형 웹이다.

Semantic Tag

Semantic Tag 사용의 장점

• 웹 브라우저와 개발자 모두에게 의미를 명확하게 설명할 수 있게 한다. 의미가 없는 태그의 대표적인 예로는 <div>,<span>등이 있다. 이 태그들의 사용은 태그 이름만 보고는 어떠한 내용인지 유추할 수 없다.반면, <form>, <table>, <article>등 Semantic tag의 사용은 그 부분이 웹 문서 내에서 어떤 역할을 하는지 쉽게 알 수 있다.

• Semantic Tag의 사용은 코드의 가독성을 높이며 아니라 문서의 핵심요소를 빠르게 파악할 수 있게 한다.

• 검색 엔진 최적화(SEO)의 검색 성능이 향상된다.

마지막으로,

다시 과제로 돌아가서,
<img>태그와 background-image 두 방식 모두 이미지를 웹 화면으로 구현할 수 있는 방법이다. 하지만 <img>는 의미가 내포되어 있는 Semantic Tag이고, background-image는 의미가 내포되어 있지 않아 두 방법의 사용 용도가 다르다.

이미지가 컨텐츠 내에 꼭 필요한 부분이며 검색 엔진에 노출이 되기를 원할 때에는 <img>태그의 사용을, 단순히 디자인적 요소일 때에는 background-image를 사용하는 것이 좋다.