[wecode : TIL] Semantic Web, Semantic Tags

Sementic?

Semantic Elements(시멘틱 요소)
의미 있는 요소들로 구성하게 되면 해당 정보들은 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명할 수 있음.

Semantic Web(시멘틱 웹)
기계가 읽고 처리할 수 있는 웹을 개발하기 위해 탄생.
시멘틱 웹은 시맨틱 태그들을 사용하여 검색엔진에 잘 노출되는 "의미있는 웹"으로 구성될 수 있음

• RDF : 웹상의 메타데이터의 표현과 교환을 위한 프레임워크
• XML : 태그 등을 이용하여 데이터의 구조를 기술하는 언어 (ex. html)

Semantic Tag(시멘틱 태그)
😀 non-sementic tag : 자신의 컨텐츠에 대해 설명이 없음

<div>,  <span>

😀 sementic tag : 명확한 뜻을 제공하는 태그

<header> # 문서나 섹션의 머릿글 <form> 태그를 이용하여 검색창을 넣거나 <nav> 를 이용하여 사이트 메뉴를 주로 넣는데 활용함.
<footer> #문서 또는 섹션의 바닥글. 주로 저작권, 연락처 정보등의 내용 삽입
<main> # 문서의 주요 내용 지정
<section> 문서의 구역을 정의한다. 
<ul> # unordered list. dksdp <li> 태그로 아이템을 넣는다. 
  ㄴ CSS list-style-type 속성으로 마커 변강 가능함 (none,disc,circle, square)
<img> # 이미지를 넣는 태그 
  ㄴ src 속성 : 이미지의 주소를 넣음 
  ㄴ alt 속성 : 대체텍스트 (화면낭독기, 이미지경로 누락 등의 상황에 활용)

등이 있으며 매우 많기 때문에 상황에 맞게 찾아서 활용합시다.(div 남발 금지!)

wecode TIL!

🧐 사이트에 이미지를 넣는 2가지 방법
1️⃣ html에서 img 태그를 사용하는 것.
2️⃣ css background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 어떠한 경우에 사용하면 좋은지 설명해보세요.

// CSS background-image 
<div class="abc" style={{ backgroundImage: `url("${imageUrl}")` }} /> 
// HTML img tag 
<img src={imageUrl} alt="" />

1️⃣ img 태그를 사용하면 웹이 해당 내용을 "이미지로구나!" 라고 바로 인지를 할 수 있다는 것이 중요한 특징이며, 하단의 경우 사용하면 좋습니다.

• 프린트가 필요한 경우! (백그라운드 이미지는 출력에서 제외)
• 이미지에 중요한 의미가 있는 경우! (alt 속성으로 의미 설명)

2️⃣ background-image는 이미지가 특별한 의미나 구성요소로 작용하기 보다는 페이지 배경이나 설명이 필요 없는 경우에 사용하면 좋습니다.

• hover와 같이 일정 부분만 선택해서 보여주는 경우
• 이미지가 단순 배경의 역할일 때