wecod pre-course 첫번째 체크 포인트!
질문> 사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
추가 질문> 위의 질문에 대한 대답과 연결시켜 Semantic Web과 Semantic Tag작성해주세요.웹 페이지에 그림, 사진 등 이미지를 넣는 방법 두가지를 최대한 어려운 부분은 덜어놓고 설명해보고자 한다.
먼저 <img> tag의 경우 html 문서 안에 직접 작성 되며 주소(url)을 <img> tag 안에 직접 넣어서 출력하며 이미지 크기대로 불러온다.
이어서 <div>에 background-image 속성을 추가해서 출력하는 방법은 <div>라는 네모난 박스 안에 배경으로 출력하는 방법이다.
한컴오피스를 써본적이 있다면 첫번째 <img>는 표 안에 그림을 직접 붙여넣는 방법이라면, 두번째 <div> background-image는 표 속성에서 배경을 지정해서 삽입하는 방법이랄까??
내가 느끼기에 두 방법의 가장 큰 차이점은 <div>방법은 style로 가로, 세로를 지정해 주고 이미지 사이즈를 정해주지 않으면 원래 이미지를 제대로 불러오기 어렵다는 것이다.
이어서 Semantic Web과 또 Semantic Tag는 무엇일까?
먼저 정의를 살펴보고 가자
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
<위키백과 인용>
쉽게 말해서 사람은 이게 그림인지, 사진인지, 글씨인지, 설명인지 어느정도 알 수 있지만 컴퓨터는 제대로 판단이 힘든데 Semantic tag를 사용해서 컴퓨터가 이게 그림인지, 글씨인지, 개념을 해석할 수 있는 소스를 제공하는 의미랄까?
위키백과 예시를 인용하자면
예전에는
<div id="header">내용</div>
이런식으로 박스(div)에 header 입니다. 라고 사람들만 이해하게 박스에 표기를 했다면
<header>내용</header>
이렇게 직관적으로 header는 여기 이 내용입니다. 라고 표기할 수 있다는 것이다.
이로인해 컴퓨터도 '아 헤더는 여기 이 내용이구나'라고 알 수 있어서 데이터가 좀 더 구체화가 될 수 있는 내용이다.
다시 추가 질문으로 생각해볼때 <div>로 이미지를 사입하는 것 보다 <img> tag를 사용하는 것이 Semantic Web에 가깝고 컴퓨터가 이해할 수 있게 도와주는 방법이라고 생각한다.
