[TIL 25] 시맨틱 Semantic

_dodo_hee·2021년 3월 15일
0

HTML

목록 보기
4/4
post-thumbnail

시멘틱 웹 Semantic Web

시맨틱 (Semantic) '의미론적'이라는 뜻을 가지고 있으며
시맨틱태그는 문서의 구조와 의미를 명확하게 설명한다.

사람을 대신하면서 정보를 읽고, 이해하기 쉬운 의미를 가진 지능형 웹이며,
정보를 분석하고, 그 정보의 관계 속에서 의미론적인 자료들을 추출해서
웹상에 보여줄수 있는 웹이다.

왜 사용하는걸까? 🧐

사용자는 웹페이지를 볼때 아 이건 제목이고 이건 본문이네 라면서 구별이 가능하지만,
컴퓨터는 분별하기 어려워서 이걸 해결하고자 사용하는 게 시맨틱 태그이다.
HTML5 부터 업데이트 되었다고 한다.

Semantic Tag

가장 많이 사용되는 시맨틱 태그는

  • header : 헤더, 로고넣는자리, 탐색 폼
  • footer : 푸터, 하단에 배치, 저작권 관련 내용
  • nav : 네비게이션, 메뉴
  • section : 섹션, 일반적인 영역
  • article : 매거진, 신문 기사, 블로그 등
  • h1 ~ h6 : 제목 구현
  • address : 연락처 정보
  • img : 이

이렇게 태그들마다 뜻? 들이 들어있어서 시맨틱태그를 사용하면
컴퓨터가 내용을 이해하기 쉽게 만들어준다.😄
더 다양한 태그들이 있지만 내가 주로 사용하고, 대부분 주로 쓰이는 시맨틱 태그로만 정리했다.

면접질문 🏢

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

html img

html <img>를 사용하는 경우는

  1. 컨텐츠와 관련되있을때, 컨텐츠 이해를 위해
  2. 마크업이 필요한 사람들이 웹을 볼때
  3. 이미지가 업로드 되지 않아도 이미지 인 걸 표현하고 싶을때

img 태그에는 간단하게 src로 이미지사진의 파일주소값을 넣어주면 된다.

예시 ✍️

<img src="./img/dohee.jpg" alt="도희사진">

여기서 ./alt 뭘까?🧐
./ " 파일이 같은 위치내에 있어!"
../ "파일이 다른 위치에 있어서 나가서 찾을게!"
alt는 파일이 업로드 되지 않을때나 마크업 할때 컴퓨터가 읽을 수 있는 이미지에 대한 설명이다.

css img

css로 이미지를 넣을땐 정말 디자인적 요소로 이미지를 넣고 싶을때만 넣는 것이 좋다.

css background-image:url()로 사용하는 경우는

  1. 순전히 디자인용도로만 이미지를 쓸때,
  2. 이미지가 컨텐츠가 아닐때,
  3. 반복되는 이미지를 써야할때,

웹상에 이미지라는 것이라고 나타내기 위함이면 html<img>를 넣는게 더 좋은 코드 작성법이다.

예시 ✍️

div {background-image:url("./img/dohee.jpg");}

간략하게 줄이면, img태그는 컨텐츠와,마크업용도로 사용되며, background-image는 단순 디자인용도로 사용하는 차이가 있다.

profile
무럭무럭 자라나는 도도 개발성장일기

0개의 댓글