1. Semantic Web, Semantic Tag의 의미

Semantic이란 의미론적이라는 뜻입니다. 이 말을 풀어서 설명해 보면, 웹의 각 요소가 어떤 역할을 하고 있는지 의미가 명확히 전달된다면 그것이 바로 Semantic Web이고, HTML의 태그의 명칭을 봤을 때 해당 태그가 어떤 의미를 가지는지 명확히 전달이 된다면 그것을 Semantic Tag 이라고 합니다.

Semantic하다는 의미는 HTML에서만 쓰는 것은 아닙니다. Javascript에서 함수 이름을 정할 때, 단순히 function() 이라고 함수 이름을 정하기보다는 getLocalStorageData() 와 같이 누가 봐도 함수의 기능을 유추할 수 있다면 Semantic한 함수 이름을 지었다고 볼 수 있습니다. CSS에서도 마찬가지로, 예를 들어 선택자를 지정할 때, div ul li가 아닌 .transaction-list와 같이 HTML에서 정해진 클래스를 지정한다면 더욱 Semantic한 웹을 구성하고 있다고 볼 수 있겠죠.

한번 코드 예시를 보겠습니다.

HTML의 Semantic Tag 예시

<div class="ultimateContainer">
  <!-- video player -->
  <section class="player">
    <video controls src="/video/cake.mp4">
    </video>
  </section>
</div>

<ul class="likeDislike">
  <li class="like">
    <button><i class="fas fa-thumbs-up"></i></button>
    <span>102</span>
  </li>
  <li class="dislike">
    <button><i class="fas fa-thumbs-down"></i></button>
    <span>1</span>
  </li>
</ul>

CSS의 Semantic 클래스 이름 활용 예시

.transaction-list {
  width: 100%;
  height: 64px;

  background: #fbfbfb;

  border-radius: 10px;
  border: 1px solid var(--border-color);

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;

  position: absolute;
}

.transaction-list-info {
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.transaction-date {
  font-size: 12px;
  color: #aaa;
  font-family: 'Lato', sans-serif;

}

.transaction-text {
  font-size: 15px;
  font-weight: 200;
  color: #191919;
  letter-spacing: -0.5px;

  margin: 1px 0;
}

.transaction-amount {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.5px;
  font-weight: 300;
}

Javascript의 Semantic 함수 예시

//화폐단위 콤마 찍기
const numberWithCommas = (x) =>
  x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')

//ID 생성하기
const generateID = () => {
  return Math.floor(Math.random() * 100000000)
}

//localStorage에 업데이트하기
const updateLocalStorage = () => {
  localStorage.setItem('transactions', JSON.stringify(transactions))
}

2. 면접에서 이런 문제가 나온다면

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

<img> 태그를 사용해서 이미지를 넣는 경우:
1. 검색 엔진에서 이미지를 색인화해야 할 때(alt속성 가지고 SEO에 필요함)
2. 디자인과 관련이 없을 때
3. alt 속성과 title 속성을 적용할 수 있음(이미지 로딩 안 됐을때, 또는 시각장애인 친화적인 웹)

<div> 태그에 CSS에서 background-image 속성으로 이미지를 넣어주는 경우:
1. 검색 결과에 큰 역할이 필요 없고, 콘텐츠와 연관성이 적을 때
2. 이미지가 디자인에 사용될 때(예: 댓글 작성자 아이콘 등이 반복)
3. 이미지의 일부만 보이는 등의 효과를 주어야 할 때