🔴 Semantic Web(시맨틱 웹)
의미론적인 웹
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
🔴 Semantic Tag(시맨틱 태그)
의미의, 의미가 있는 의미있는 태그
컵은 물을 마시기위한 도구로 쓰인다. 주변의 물건과 싸인들이 저마다의 의미를 가지고 있는것처럼 html tag도 여러가지 의미를 가지고 있다.
시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
글에 제목을 출력할때
<span class="title">Hello Wolrd</span>
style.css
.title{
font-size: 50px;
}<h1>Hello World</h1>위에 방법도 가능하긴 하지만 아래의 경우 더욱 쉽고 간단하게 제목을 표현해낼 수 있다.
div tag만 이용해서 만들수는 있지만, html에서 의미가 있는 semantic tags를 적절히 사용하는 것이 중요하다.
🔶 Semantic tag를 이용하는 이유
1.SEO(=검색 엔진 최적화)
검색을 최적화하기위해서 우리가 적절한 제목과 시멘틱 태그를 잘 이용한다면 이 웹사이트의 중요한 제목과 부제목이 이거구나 사람들이 검색시 제목과 부제목을 표현해줘야겠다 검색시 이 웹사이트를 추천해줄것이다라고 알 수 있다.
2.웹접근성(=Accessibility)
시각적인 면보다 음성으로 시각을 알려주거나 또는 키보드만을 이용해서 웹사이트를 이용하는 경우 적절한 시멘틱태그가 이루어져있다면 스크린리더, 키보드만을 이용해도 잘 동작 할 수 이써야 한다.
3.개발자들을 위해서
한눈에 웹사이트가 어떻게 짜여져 있는지 알 수 있다.
유지보수성도 높다.
제목로고 <header></header> 메뉴들 <nav></nav> 웹사이트 마지막에 부가적 정보들 <footer></footer> 웹사이트에서 중요한 컨텐츠를 가지고 있는 곳 <main></main> main안에서도 컨텐츠와 직접적인 상관이 없는 부가적 내용부분(광고,링크등) <aside></aside> main안에서도 div만 사용하기보다는 <article></article> <section><section> 사용하면 좀 더 구조적으로 짤 수 있다.
Q."사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
🟣 img vs background-image tag
🔹 <img/>
웹페이지에서 하나의 중요한 것을 표현될때 이미지가 깨진다고 하더라도 alt를 사용해서 무엇인지 설명해준다.
검색엔진에도 더 잘 노출된다.
🔹background-image
문서의 내용과는 별개로 스타일링 목적 배경이미지라면 css background-img로 표기하는게 좋다.
🟣 article vs section
🔹 article
블로그 포스트에서 포스트하나
신문 기사에서 그 기사 하나를 묶어줄때 사용한다.
자체만으로 그 페이지를 독립적으로 보여줬을때 전혀 문제가 없을때 사용가능하다.
안에 내용과 상관없이 독립적으로 고유한 정보를 나타낼때 사용가능.
🔹 section
article의 내용중 상관있는 것끼리 묶을때 section을 이용할 수 있다.
article안이나 main안이나 아무곳에서나 하나로 묶어줄때 사용할 수 있다.
<section>
<article>
</article>
</section>🟣 i vs em tag
두태그를 이용해서 사용하면
🔹 <i></i>
시각적으로만 이탤릭체
책의 제목이나 인용구등 이탤릭체로 남기고 싶을 경우 사용한다.
🔹 <em></em>
강조하는 이탤릭체
내가 강조하는 경우 사용한다.🟣 be vs strong tag
bold체로 나타난다.
🔹<b></b>
시각적으로만 볼드체
🔹<strong></strong>
정말 강조하는 내용의 볼드체
🟣 List tag(ol,ul,dl)
🔹<ol></ol>
순서가 중요한 목록을 만들때
숫자로 표기
🔹<ul><li></li></ul>
순서가 없는 목록으로 나타낼때
앞에 점으로 표기
🔹<dl></dl>
어떠한 단어의 설명이 묶여 있을때 그 목록을 나타낼때 사용
정의,설명 목록
<dl>
<dt>html</dt>
<dd>문서를 만들때 사용</dd>
</dl>🟣 button vs a
css를 이용하면 둘다 버튼처럼 보이기떄문에 어떤 태그를 쓰는지 헷갈릴수 있따.
🔹<button></button>
리뷰, 추천, 로그인, 가입 등 사용자의 특정행동이 발생하는 경우
🔹<a></a>
다른페이지로 또는 어디론가 이동할 때 (링크)🟣 table vs css
🔹<table>
<td>
</td>
</table>
행과열/데이터
문서안에서 자체적으로 의미있는것이 필요할 경우
🔹css의 flex, grid를 선호<참고:드림코딩 youtube>
