<HTML>'시멘틱 웹' 그리고 '시멘틱 태그' Semantic Web and Semantic Tag(feat. 이미지 삽입)

Lown Kim·2021년 7월 6일
0
post-thumbnail




Semantic Web

시멘틱 웹이란 데이터에 의미(Semantic)가 부여된 월드와이드웹(WWW), 한마디로 '의미론적인 웹'이라는 뜻이다.
컴퓨터로 하여금 웹 페이지들의 코드들을 그저 짜여진 것으로 여기는것이아니라 어떠한 의미를 가진 페이지라는것을 알 수 있게 하는것이다. 그렇게 컴퓨터가 직접 사용자 검색에 응답해 추론을 할 수 있도록 할 수 있고, 그것을 활용해 편리한 시스템으로서 이용할 수 있다.

예를 들어

여름날 귀갓길의 무더위에 지친 내가 미리 컴퓨터에 요청을 보내면
컴퓨터가 나의 위치 GPS를 먼저 파악 한 후
나의 평소 걸음 빠르기를 토대로 집까지 도착하는데에 걸리는 시간까지 계산해 놓는다.
그렇게 계산한 시간에 맞추어 내가 귀가하자마자 열을 식힐 수 있도록
나의 여름날 휴식 환경에 적합한 온/습도를 스스로 설정하고 에어컨을 가동시키기 시작한다. 

이렇게 컴퓨터가 요청에 대한 의미를 이해하고 스스로 추론이 가능한 시멘틱 웹이 우리 사회에 머지않아 영향을 미치거나 혹은 이미 영향을 미치고 있는 것은 분명한 사실이다.
시멘틱 웹은 웹의 창시자 팀 버너스리가 1998년에 제안했고, 현재 표준화작업이 진행중이다.



Semantic Tag

시멘틱 태그(시멘틱 HTML 요소)는 사람과 기계가 읽을 수 있는 방식으로 의미를 명확히 설명하는 요소이다. <article>, <details>, <figcaption>, <figure>, <footer>, <header>, <img> 등과 같이 여러 종류가 있다. 시멘틱 태그를 사용하면 시멘틱 태그를 사용하지 않았을 때보다 코드가 눈에 잘 띄기때문에 읽고 이해하기가 훨씬 쉽고, 컴퓨터와 인간으로 하여금 접근성이 좋아진다.

<시멘틱 태그를 사용 한 코드>

<header>메롱</header>
<section>
	<article>
    	<img src="어쩌구">
    </article>
</section>
<footer>회사주소 서울시 여러분 담배꽁초 헤헹</footer>

<시멘틱 태그를 사용하지 않은 코드>

<div id="header">메롱</div>
<div class="section">
	<div class="article">
   	</div>
</div>
<div id="footer">회사주소 서울시 여러분 담배꽁초 헤헹</div>

오 옷-!

예시를 보니 어떤 차이를 말하는것인지 확 와닿는다!
저 옹졸한 div태그의 끝 없는 향연..ㄱ-;; 안습이다



웹페이지에 이미지를 추가하는 방법은 두 가지가 있다.

첫번째는 html 파일에 <img>태그를 사용하는것이고,
두번째는 css 파일에서 태그나 아이디 또는 클래스에 대하여 background-image라는 속성을 부여하는것이다.

<img>태그를 사용한 이미지 삽입은...

  • 프린트하면 출력된다!
  • 이미지에 의미가 있는 경우 alt태그를 사용해 이미지를 설명할 수 있다!
  • 에러가 나면 alt태그의 내용이 나타난다!
  • 그래서 <img>태그를 사용한 이미지 삽입은
    이미지가 실질적인 콘텐츠로 아주 중요한 역할을 하는 경우에 사용한다.

background-image속성을 이용한 이미지 삽입은...

  • 프린트해도 출력되지 않는다!
  • 에러가 나면 아무것도 출력되지 않는다!
  • 로드 속도가 빠르다!
  • 그리고 이미지 수정 등의 관리가 쉽기때문에, background-image속성은 오직 디자인적 요소로만 작용 하거나 일정한 부분만 선택해 보여줄 경우에 사용할 수 있다.

HTML파일의 <img>태그는 위쪽 시멘틱 태그 종류에 포함되어 있던 대로 아주 의미론적인 태그이기때문에 검색엔진이 유의미한 데이터라고 판단하여 검색 결과 페이지 상단에 노출될 수 있다.(뜨헉) 이것을 검색엔진 최적화(SEO, Search Engine Optimization)라고 한다.

0개의 댓글