semantic web

시맨틱 웹(Semantic Web)은 World-wide-web을 창안한 팀 버너스리가 제안한 차세대 웹 기술로, 웹 상에 존재하는 정보를 사람 뿐만 아니라 기계가 의미(Semantic)를 파악하고 사용자의 요구에 적합한 결과를 서비스 가능하도록 하는 것이다. 현재의 웹은 사용자가 목적에 맞게 정보를 클릭하면서 정보를 찾아내는 게 일반적인 방식이지만, 시맨틱 웹은 임무를 부여받은 자동화된 프로그램이 사람을 대신해 웹상의 정보를 추출하고 이를 가공해 새로운 정보를 만들어낼 수 있다.

semantic tag

semantic tag 는 사용자와 컴퓨터 모두가 이해하기 쉬운 태그.
div, span 은 non-semantic tag 이고
header, footer, nav 등은 semantic tag 이다.

참고

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

img 태그는 semantic 태그이고 div 태그에 background-image 를 넣는 방법은 semantic 한 방법이 아니다. img 태그를 주로 사용하고 이미지 비율을 살려서 이미지를 삽입하고 싶을 때 div 로 감싸줘서 처리하면 된다.

1. img 태그 사용

<img src="이미지 주소나 url" alt="이미지가 안보일 때 대신 표시할 이미지 설명">

2. div 태그에 background-image 속성 추가하여 사용

<div class="bg-img">배경이미지</div>

.bg-img {
    background-img: url("url 주소");
    background-color: yellow;
    height: 300px;
    width: 300px;
    background-size: 100%; 
}

div 는 내부 content 만큼 너비와 높이가 정해지기 때문에
따로 height 와 width 를 설정해준다.
background-size도 100% 로 설정해줘서 div 크기에 이미지를 맞춰준다.