TIL 4 | HTML & CSS (4)

1. Semantic Web & Semantic Tag

1) 시맨틱 웹(Semantic Web)이란?

1998년 Tim Berners-Lee가 제안한 차세대 웹 기술.
사람이 이해할 수 있도록 구현된 기존의 웹문서가 가진 한계를 보완하고, 컴퓨터가 스스로 의미(semantic)를 파악하고 사용자가 필요로 하는 정보를 추출할 수 있도록 한다.

2) 시맨틱 태그(Semantic Tag)

Semantic tag는 <form>, <table>,<article>과 같이 자신의 컨텐츠를 명확하게 정의하는 tag를 의미한다.

• Semantic tag의 장점
  <div>, <span>과 같이 자신의 컨텐츠에 대해 아무것도 설명해주지 않는 non-semantic tag를 이용하는 경우, class, id를 부여하여 구역을 나누고 스타일을 지정해야 한다.
  반면, semantic tag를 사용하게 되면 개발자가 의도한 요소의 의미를 명확히 드러냄으로써 코드의 가독성을 높이고 유지보수를 용이하게 한다.
  
  

• <img>태그와 <div>를 이용하여 이미지를 삽입하는 경우, 어떠한 차이가 있을까?

  - <img> 태그를 이용하는 경우
  Semantic element인 <img>태그를 이용하는 경우, 태그명에서도 알 수 있듯 image라는 요소의 의미를 명확히 드러낼 수 있다.
  Semantic tag는 검색엔진 최적화(SEO: Search Engine Optimization)에 영향을 미치는데, <div>, <span>만 사용한 문서는 중요성을 가늠하기 어렵지만, <title>, <header>, <article> 등의 semantic tag로 구성된 semantic web은 검색 결과 상위에 노출 된다.

  - <div> 태그에 CSS의 background-image 속성을 추가하여 이미지를 삽입하는 경우
  background-image 속성을 이용하는 경우, <img>태그에서 사용할 수 있는 attribute인 alt를 이용할 수 없기때문에, 지속적으로 노출을 할 필요가 없거나 중요하지 않은 이미지를 삽입할 경우에는 오히려 유용할 수 있다. 왜냐하면 에러가 날 경우 대체할 이미지가 없기 때문에 실패한 이미지나 텍스트 노출 대신 아무것도 노출되지 않는 것이 더 유리할 수도 있기 때문이다.
  
  
  

2. Weegle 검색페이지 만들기

지금까지 배웠던 개념들을 이용해 웹페이지를 만드는 과제.
이 과제를 수행하며 논리적이고 효율적으로 구조를 짜는 것에 대한 중요성을 한번 더 깨닫게 되었다.

구조를 짜면서 아직 개념이 모호하거나 공부가 필요하다고 생각했던 부분에 대해 정리하려고 한다.

CSS의 display 속성

• display: flex;
  flex는 수평구조를 만들 때 편리하게 만들 수 있도록 도와주는 display의 속성값으로 요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다 (간단한 수직구조도 가능).

  flex는 item과 그 item들을 담는 container, 2개의 개념으로 나눠지는데, 여기서 container는 부모 요소이고, item들을 정렬하기 위해 필수적이다.
  container에는 display, justify-content 등의 속성을 사용할 수 있다.

  display flex 정의
  justify-content 주 축(main-axis)의 정렬 방법 설정

  여기서는 button-wrap이 item, grid-wrap이 container가 되고, container에 display:flex;와 justify-content:center;를 주어 위치를 맞췄다.

/* HTML */
<div class="grid-wrap">
  <div class = "button-wrap">
    <button class="btn">Weegle 검색</button>
    <button class="btn">I'm feeling Lucky</button>
  </div>
</div>

/* CSS */
.grid-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0 20px 0;
}

• display: grid;
  grid는 2차원의 레이아웃을 제공하는 display 속성값으로 flex보다 복잡한 레이아웃을 만들 수 있다.

  grid 역시 flex와 마찬가지로 container와 item으로 나뉘어져 있으며, container 내에서 각 item을 배치할 수 있으며, grid-template-columns, align-items, grid-gap 등의 속성을 사용할 수 있다.

  grid-template-columns 열의 크기 정의
  align-items grid 아이템들을 수평 정렬
  grid-gap grid 내 아이템들의 행과 열 간격 정의

  아래에서 보면 두 버튼이 하나의 grid로 묶여 있음을 알 수 있다.
  

/*CSS*/
.button-wrap {
  display: grid;
  grid-template-columns: 130px 130px;
  align-items: center;
  grid-gap: 10px;
}