Ⅰ. Semantic Web
1. Semantic Web 정의
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 『위키백과』
Ⅱ. Semantic Tag
1. Semantic Tag 정의
자신의 의미를 브라우저와 개발자에게 명확히 설명하는 태그이다.
2. HTML 요소
1) Semantic 요소
- content의 의미를 명확하게 설명하는 요소
<form> <table> <img>
2) Non-semantic 요소
- content에 대한 설명을 하지 않는 요소
<div> <span>
3. HTML 구조
1) <html>
- 파일의 성격을 정의내림
2) <head>
<title> <style>등의 시맨틱 태그가 들어감
3) <body>
- 웹 브라우저에 표시됨
(1) <header>
<head>와는 다름- 머릿말, 제목을 표현
(2) <nav>
- 문서를 연결하는 링크를 담고 있는 네비게이션
(3) <section>
- 본문 콘텐츠
<section>안에<section>가능
(4) <article>
<section>안에서 실질적인 내용을 담음
(5) <aside>
- 본문 이외의 내용을 담는 사이드바
(6) <footer>
- 화면에서 제일 아래에 위치
- 소개, 약관, 연락처 등의 내용을 담음
Ⅲ. <img> 와 background-image
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
1. <IMG>
1) 특징
- html
<img src="이미지주소">- alt 속성을 통해 이미지가 시각적으로 표시되지 않을 때 텍스트를 대체할 수 있음
2) <IMG>를 사용할 때
- content와 관련 있는 이미지
- 검색엔진에 노출이 필요
- 이미지와 관련된 텍스트가 필요
- inline이 필요
- 이미지를 포함하여 페이지를 인쇄
2. background-image
1) 특징
- css
background-image: none | url | initial | inherit- 애니메이션 X
2) background-image를 사용할 때
- 페이지를 디자인하기 위해 이미지를 사용
- content의 일부분이 아닌 이미지
- 작은 이미지의 경우, 다운로드 속도를 높이기 위해
- 이미지를 포함하지 않고 페이지를 인쇄
즐거움을 찾는 개발자🐯