# semanticweb

Semantic Web, Semantic Tags
Semantic Web이란? 사용자가 입력한 검색어가 포함된 문장 및 단락의 의미를 분석하여 검색의 결과물을 보여 주는 웹이다. > ### Semantic Tags 이란? 표현 중심이 아닌 의미 있는 구조의 문서 작성을 위한 요소입니다. HTML5에 도입된 시맨틱 태그를 이용하여 개발자와 브라우저에게 의미있는 태그를 제공합니다. 검색 엔진, 문서 해석시 등의 프로그램에 의한 문서 처리와 해석도 가능함. > ### 시맨틱 태그를 사용하는 이유? SEO(Search Engine Optimization) - 검색엔진 최적화 검색 엔진이 검색을 수행할 때에는 HTML 내에 있는 태그를 분석합니다. 이 때 그 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워집니다. Accessibility - 웹 접근성 웹 페이지를 시각적으로 이용하는 것이 아닌 스크린 리더같은 웹 보조 기구를 이용하여 웹 사이트를 이용하는 경우 적절한 시맨틱 태그를 통해 어느 부

[HTML] 시맨틱 태그(Semantic Tag)를 사용해야 하는 이유
시멘틱 웹이 생겨난 배경 우리는 우리가 모르는 정보가 있을 때 자연스럽게 인터넷에 모르는 것들을 검색해서 해답을 찾는다. 하지만 방대한 데이터 속에서 필요한 정보를 찾기란 쉽지 않다. 검색엔진은 키워드 중심으로 정보를 탐색하기 때문에 원하는정보를 얻기 위해서는 사용자가 직접 개입해야하는 부분은 불가피하다. 이러한 문제를 해결하기 위해서 나온 웹기술이 바로 시맨틱 웹이다. 시맨틱 웹(Semantic Web) 웹페이지에 메타데이터(metadata)를 부여하여, 해당 웹페이지가 어떤 페이지 인지 시맨틱 태그만으로도 알려줄 수 있다. 시맨틱 태그(Semantic Tag) HTML5에서 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소를 말한다. 기존의 태그의 형태와 동일하지만 검색엔진 로봇이 웹페이지를 크롤링할 때 이 요소를 보고 키워드 정보를 파악하게 된다. HTML 요소 크게 2가지로 구분 non-semantic 요소 : div, span 등
[1주차-1] Semantic Web과 Semantic Tag
span의 경우 컨텐츠만큼만 영역이 적용되어 텍스트 얼라인을 주더라도 변화가 일어나지 않는다. text-indent : 들여쓰기 : 스페이스 두번 Semantic Web 정의 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이어를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상. why? 인터넷 사용자들은 원하는 정보를 얻기 위해 구글이나 네이버 같은 검색사이트를 이용함. 검색엔진은 로봇(Robot)이라는 프로그램을 이용하여 매일 전세계의 웹사이트 정보를 수집하는데 이를 크롤링이라고 하며 또한 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어두는데 이를 인덱싱이라고 한다. 인덱스를 생성할 때 사용하는 정보는 로봇이 수집한 정보인 웹사이트의 HTML 코드이다. 이 때 검색엔진은 HTML코드만으로

[HTML/CSS] Semantic Web - <img>와 {background-image}의 차이
1. Semantic이란? : 의미의, 의미론적인 웹이 발전하면서 수많은 정보가 축적됨에 따라 컴퓨터가 스스로 정보를 해석, 가공할 수 없어 모든 정보를 사용자가 직접 개입해서 처리해야 되는 문제점이 생겼다. 이를 해결하기 위해, 기계가 읽고 처리할 수 있는 Semantic Web이 탄생하였다. ✅ Semantic Tag : 의미를 담고 있는 tag. 단순히 구역을 나누기 위한 div 등과 달리, 해당 부분의 내용이 무엇인지 태그명 만으로 알 수 있도록 만든 것. ✅ Semantic Web : 의미를 담고 있는 Semantic Tag로 이루어진 Web 2. Semantic Tag의 적용 사례 💡<img>와 {b
Semantic Web과 Semantic Tag
Semantic Web? >"의미론적인 웹"으로 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다._ -wiki백과- >컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹 -나무위키- >아래 설명된 Semantic Tag를 이용하여 만든 Web -내가 정의한 Semantic Web- Semantic Tag? '의미가 있는 태그' HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 Semantic Tag라고 한다. 텍스트 단락(paragraph)를 줄인 p태그나 앵커(anchor)를 줄인 a 태그 등 이름만으로도 어떤 역할을 하는지 쉽게 알 수 있다. 시맨틱 태그를 사용하는 이유 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있다. 문서 구조가 정확히 나눠지므로
Semantic Web, Semantic tag
Semantic Web 이란? 의미론적인 웹 시맨틱웹(Semantic Web)은 말그대로 웹사이트가 단순한 코드들의 구성이 아닌, 웹사이트 자체가 의미를 가진다는 뜻이다. 예를 들어 우리가 신문이나 인터넷기사들을 접할때, 우리는 어떤부분이 기사의 제목인지 굳이 누군가 설명해주지 않아도 한눈에 알아볼 수 있다. 또 기사에 실린 이미지나 전체적인 내용이 어떤부분인지도 쉽게 알 수있다. 그 이유는 우리는 뉴스기사가 어떠한 구조로 작성되고, 또 우리한테 어떻게 전달되는지 학습되어 있기 때문이다. 이처럼 사람의 머리 속의 언어에 대한 이해를 컴퓨터 언어로 표현하고, 이것을 컴퓨터가 사용할 수 있게 만든 웹을 시맨틱웹(Semantic Web)이라고 한다. 시맨틱 웹의 이상향은, 인터넷에 방대한양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확하게 얻을 수 있는것이다. Semantic tag 이전에 설명한 시맨틱

[html] Semantic Tag 와 Semantic Web
Semantic Tag html 태그는 '담고있는 내용에 대한 정보를 표현 하는가'를 기준으로 'Non-semantic'과 'Semantic'으로 구분됨 * Non-semantic tag : 내용에 대한 정보를 표현하지 않음. 예를 들면 , 등 Semantic tag : 내용에 대한 정보를 명확히 표현함. 예를 들면 , , 등 Semantic Web 검색엔진은 웹사이트의 정보를 수집하고(크롤링), 사용자가 검색할만한 키워드를 미리 예상하여 인덱스를 구성(인덱싱) 검색엔진이 인덱스를 구성 할 때, 사용되는 정보는 결국 웹사이트의 html 코드임 위에서 설명한 **'S

Semantic Web / Semantic Tag
1. Semantic Web Semantic Web이란 무엇인가? 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. > 현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다. 즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통을 할 수 있는 지능형 웹이다. 원리는 사람들이 이해할 수 있도록 자연어 위주로 되어 있는 현재의 웹 문서와 달리, 정보 자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꾸는 것이다. 이렇게 되면 컴퓨터가 정보 자원의 뜻을 해석 하고, 기계들끼리 서로 정보를 주고받으면서 자체적으로 필요한 일을 처리하는 것이 가능해진다. 2004년 현재 시맨틱 웹과 관련된 연구는 RDF(Resource Description Framework)

[HTML, CSS] Semantic Web, Semantic Tag
semantic 프로그래밍을 공부하다 보면 semantic한 코드를 작성해야 한다는 내용의 글을 꽤나 자주 볼 수 있다. 그런데 'semantic한 코드'라는 게 대체 무엇일까? semantic의 사전적인 뜻은 '의미의, 의미론적인'이다. 프로그래밍에서 사용하는 semantic의 뜻도 사전적인 의미와 같다. 코드 조각의 의미를 뜻한다. 다시 말해, 사람이 작성한 코드를 컴퓨터가 어떻게 이해하면 되는지에 관한 의미를 부여하는 것이다. semantic Web 위의 코드 두 줄은 화면상에서 똑같이 보인다. 아래의 이미지는 예시로 작성한 코드가 화면에 보이는 모습을 캡쳐한 것이다. 첫번째 HELLO는 p태그를 이용한 뒤 css 스타일을 넣어 글자의 크기와 두께를 키운 것이고, 두번째
Semantic Web & Semantic Tag
Semantic Web은 '의미론적 웹'이라는 뜻 전통적인 웹은 인간에게만 의미가 있는 데이터를 담고 있었다. 컴퓨터는 WEB에 표현되는 정보가 무엇인지 전혀 가늠할 수가 없었고, 컴퓨터가 자체적으로 WEB의 정보를 효과적으로 다룰 수 없었다. 그러나 Sementic Web의 대두 이후에는 컴퓨터가 자체적으로 WEB의 정보가 가진 '의미'를 판단할 수 있게 되었다. Semantic Tag 상술한 Semantic Web을 구현하는 구체적인 방식이 바로 Semantic Tag이다. HTML의 Tag중에는 'Semantic Tag'(의미를 갖는 태그)와 'Non Semantic Tag'(크게 의미를 가지지 않는 태그)가 있다. Semantic Tag 는 대표적으로 form, table, img 등이 있으며 Non-semantic Tag에는 div, span 등이 있다. Semantic Tag를 통해, 보다 의미론적인 문서 정보전달이 가능해졌고, 효과적인 크롤링

[TIL. 17] HTML,CSS,Semantic Tag,Web
1. HTML과 CSS의 역할 1-1. HTML란? 웹페이지를 만들기 위한 언어이다. 웹페이지의 구조를 잡을 수 있다. HTML은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다. 브라우저는 HTML파일을 토대로 어떻게 사용자에서 보여줄지 파악할 수 있다. => HTML은 웹페이지의 전반적인 구조를 잡고 그 구조를 토대로 사용자에게 어떻게 보여줄지 판단하기 위해 사용된다. 1-3. CSS란? HTML의 테그들에 디자인을 입혀주어서 HTML을 더욱 예쁘고 보기좋게 꾸며 주는 역할을 한다. 
[HTML/CSS] Semantic Web과 Semantic Tag
# 사이트에 이미지를 넣는 2가지 방법🐶🐱 > 1. ``태그 사용 > 2. `` 태그에 CSS 속성 추가 HTML Hello World! Hello wecode! html Hello World Wecode! html 제목 내용<

TIL 16 day semantic web vs semantic element
semantic Web 의미론적 웹 의미론적 웹(시멘틱 웹, semantic web)이란 WWW(World Wide Web)의 확장으로 W3C(World Wide Web Consortium)에 의해 설정된다. 의미론적 웹의 목적은 기계인 컴퓨터가 인터넷 데이터를 읽을 수 있게 하는 것이다. 데이터의 의미론적인 인코딩을 하기 위해서 사용되는 기술은 RDF(Resource Description Framework)와 OWL(Web Ontology Language)가 있다. 이 기술들은 형식적으로 메타데이터를 나타낸다. 예를 들어 온톨로지는 개념과 각 독립체 사이의 관계 및 사물의 범주를 기술 할 수 있다.이러한 내재된 의미들은 데이터에대한 추론과 이질적인 데이터 출처(heterogeneous data sources)의 운용에 중요한 이점을 제공한다. 의미론적 웹은 XML에 기반하고 있다. 의미론적 웹과 현재 웹의 차이 기존의 HTML은 컴퓨터가 의미정보를 해석 할 수

TIL 37 | Semantic Web과 Semantic Tag
Semantin Web 시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해줍니다. 예전에는 로 나타냈던 태그를 로 나타냄으로써 header 라는 태그를 사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 명확하게 이해할 수 있다. 로봇은 id가 header라고 적혀 있다고 해서 그 부분이 웹 페이지의 헤더에 해당하는지 알 수 없다. Semantic Tag ![](https://images.velog.io/imag