🌈 replit 문제를 풀다가 과제가 주어졌다
- "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
- Semantic Web과 Semantic Tag에 대한 주제로 블로그를 작성해주세요.
📌 Semantic Web: 의미론적인 웹
컴퓨터가 이해할 수 있는 형태로 제작된 웹
semantics: 의미론적인
semantics는 'syntax'와 관련이 있다.
✓ syntax: 어떻게 말하느냐, how you say something
✓ semantics: 말의 의미, meaning behind what you said
예를 들어, "i love technology"라는 문장을 보자.
I love technology!
여기서 syntax는 단어, 한 글자, 느낌표 등이 될 수 있다.
semantics는 '나는 테크놀로지를 사랑한다'라는 의미를 가르킨다.
위 문장을 아래와 같이 바꾼다면?
I ❤️ technology!
syntax는 바뀌었지만 semantics는 바뀌지 않았다. 두 문장 모두 '나는 테크놀로지를 사랑한다'를 의미하기 때문이다.
syntax와 semantics는 결국 커뮤니케이션을 의미한다.
사람은 커뮤니케이션을 할 때, 목소리를 사용한다.
🌏 THE INTERNET 🌏
인터넷은 컴퓨터끼리 커뮤니케이션을 통해 '정보 공유'를 할 수 있게 만들었다. 앵무새가 인간의 '말'을 어떤 의미인지 모르고 따라하듯이, 인터넷은 컴퓨터가 서로 정보는 공유하지만 인간의 정보의 의미를 모른채 전달하게 만들었다.
🕸 THE WEB 🕸
웹이 생기자 인간은 정보를 빠르고 쉽게 검색할 수 있게 됐다. 웹은 거대한 자료의 저장소이고 그 자료를 불러오는 시스템이다. 웹사이트의 주소를 웹브라우저에 입력하면, 웹브라우저는 웹사이트에게 request를 보낸다. 그 request는 해당 주소에 위치한 document를 달라고 요청한다. 그럼 웹사이트는 그 document를 가져오고 웹브라우저에게 보낸다. 이 document는 HTML이라는 언어로 쓰였다. HTML 언어는 컴퓨터가 이해할 수 있는 syntax를 정의한다. 컴퓨터에게 document를 인간에게 어떻게 보여주라고 말해준다.
🤯 PROBLEM 🤯
그래서 도대체 문제가 뭔가? 문제는 컴퓨터가 웹페이지의 '의미'를 모른채 정보를 보여준다는 것이다. 위의 내용과 같이 'I love technology!'에서 'I라는 대문자 알파벳이 있고 맨 뒤에는 느낌표가 있어'라는 정보 처리는 가능하지만 저 문장의 의미를 모른채 정보를 전달한다. 컴퓨터에게 '의미론적인' 언어를 가르쳐주는 것이 필요했다. 'passively' 도움을 주는 것에서 우리가 원하는 것이 무엇인지 정확하게 파악하는 'actively' 도움을 주는 것이 가능하게 만드는 것이다.
Semantic Web은 웹에 존재하는 파일, 음악, 이벤트, 영화, 단체 등 그 무엇이든간에 그것을 컴퓨터에게 제공하는 것 뿐만 아니라 이 모든 것이 어떻게 연관되어 있는지를 가르쳐준다.
결국 사람 사이에서의 언어적 이해를 컴퓨터 언어로 표현하고 이것을 컴퓨터가 사용할 수 있게 하는 것이다. 웹의 데이터에 '의미'와 '관련성'을 가지는 데이터베이스를 만드는 것.
📌 Semantic Tag:
Semantic web을 고안해 semantic tags가 만들어졌다.
semantic web 개념이 나오기 전에는
<div id="paragraph"><div>semantic web이 나온 후,
<p></p>컴퓨터는 위 태그를 보고 "paragraph"를 의미하는 것으로 이해
📌 img 태그와 div 태그에 background-image 속성을 추가하는 것의 차이점
img 태그는 의미가 있는 semantic tag이므로 컴퓨터가 이해할 수 있다. 에러가 발생해 이미지가 화면상에 출력되지 않아도 alt 속성을 통해 어떠한 이미지인지 파악할 수 있다. 하지만 background-image는 semantic tag가 아닌 속성 값으로 컴퓨터가 이 태그의 의미를 파악할 수 없고 에러 시, 어떠한 이미지인지 파악이 불가능하다.
img 태그에 사용되는 src=""는 검색엔진에 더 쉽게 노출 되는 것을 도와주기 때문에 검색 상단(SEO)에 더 쉽게 노출되고 이미지 출력에 에러가 발생해도 표시해 주고 싶을 때에는 img 태그를 사용하고 단순한 미적요소에 해당되는 디자인 이미지 파일은 background-img를 사용하면 된다.
이미지 출처 & 참고 사이트:
https://www.youtube.com/watch?v=OGg8A2zfWKg
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content
https://chanho-yoon.github.io/web/web-semanticWeb-semanticTag/
https://velog.io/@sooky/Semantic-Web과-Semantic-Tag
https://giphy.com/explore/you-mean-nothing-to-me
