시멘틱 웹 Semantic Web
시맨틱 (Semantic) '의미론적'이라는 뜻을 가지고 있으며
시맨틱태그는 문서의 구조와 의미를 명확하게 설명한다.
사람을 대신하면서 정보를 읽고, 이해하기 쉬운 의미를 가진 지능형 웹이며,
정보를 분석하고, 그 정보의 관계 속에서 의미론적인 자료들을 추출해서
웹상에 보여줄수 있는 웹이다.
왜 사용하는걸까? 🧐
사용자는 웹페이지를 볼때 아 이건 제목이고 이건 본문이네 라면서 구별이 가능하지만,
컴퓨터는 분별하기 어려워서 이걸 해결하고자 사용하는 게 시맨틱 태그이다.
HTML5 부터 업데이트 되었다고 한다.
Semantic Tag
가장 많이 사용되는 시맨틱 태그는
- header : 헤더, 로고넣는자리, 탐색 폼
- footer : 푸터, 하단에 배치, 저작권 관련 내용
- nav : 네비게이션, 메뉴
- section : 섹션, 일반적인 영역
- article : 매거진, 신문 기사, 블로그 등
- h1 ~ h6 : 제목 구현
- address : 연락처 정보
- img : 이
이렇게 태그들마다 뜻? 들이 들어있어서 시맨틱태그를 사용하면
컴퓨터가 내용을 이해하기 쉽게 만들어준다.😄
더 다양한 태그들이 있지만 내가 주로 사용하고, 대부분 주로 쓰이는 시맨틱 태그로만 정리했다.
면접질문 🏢
👩💼 : "사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
html<img> 와 css background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
html img
html <img>를 사용하는 경우는
- 컨텐츠와 관련되있을때, 컨텐츠 이해를 위해
- 마크업이 필요한 사람들이 웹을 볼때
- 이미지가 업로드 되지 않아도 이미지 인 걸 표현하고 싶을때
img 태그에는 간단하게 src로 이미지사진의 파일주소값을 넣어주면 된다.
예시 ✍️
<img src="./img/dohee.jpg" alt="도희사진">여기서 ./와 alt 뭘까?🧐
./ " 파일이 같은 위치내에 있어!"
../ "파일이 다른 위치에 있어서 나가서 찾을게!"
alt는 파일이 업로드 되지 않을때나 마크업 할때 컴퓨터가 읽을 수 있는 이미지에 대한 설명이다.
css img
css로 이미지를 넣을땐 정말 디자인적 요소로 이미지를 넣고 싶을때만 넣는 것이 좋다.
css background-image:url()로 사용하는 경우는
- 순전히 디자인용도로만 이미지를 쓸때,
- 이미지가 컨텐츠가 아닐때,
- 반복되는 이미지를 써야할때,
웹상에 이미지라는 것이라고 나타내기 위함이면 html<img>를 넣는게 더 좋은 코드 작성법이다.
예시 ✍️
div {background-image:url("./img/dohee.jpg");}간략하게 줄이면, img태그는 컨텐츠와,마크업용도로 사용되며, background-image는 단순 디자인용도로 사용하는 차이가 있다.
