들어가기 전에
웹이 발전하고 데이터가 방대해지면서 인터넷 마케팅이 급속도로 발달하게 되었습니다.
인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화가 있습니다.
검색 엔진 최적화는 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업입니다.
해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요합니다.
핵심키워드
학습하기
시멘틱 마크업 이란?
시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다.
시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.
애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다.
시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다.
시멘틱 마크업 하기
그럼 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까요?
간단합니다. 정해진 약속을 잘 지키면 됩니다.
구체적으로 설명하자면 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고
문서를 표현할 때는 구조화를 잘 해주는 것입니다.
정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됩니다.
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않습니다.
<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닙니다.
<strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것입니다.
따라서 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업입니다.
이외에 <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미를 지닙니다.
<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나
삭제가 되었다는 의미를 지닙니다.
참고자료
https://developer.mozilla.org
https://www.w3schools.com
http://nuli.navercorp.com
comment
완료
아래 댓글 링크로 널리 세미나 PT 잘 봤습니다
1.7
2023년 12월 15일 금요일
위에 있는 널리 세미나 링크
https://nuli.navercorp.com/seminar/s03th
230201
2023.01.27
2023.01.16
바겐세일 찰떡비유네용 ㅎ.ㅎ
시멘틱 마크업 : 의미론적인 HTML,
기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것
화면에 나타나는 것이 같아보이는 요소도 브라우저가 이해하는 것은 다를 수 있다.
<b> : 단순히 글자를 굵게 cf) <strong> 강조하여 자동으로 굵게 나타남.
<i> : 단순히 글자를 기울이게 cf)<em> 글자의 특정부분 강조
<u>와 <s> : 단순히 글자에 선 그어 cf)<ins>와 <del> 내용 새롭게 추가되거나 삭제
시멘틱 : 의미론적인
시멘틱 마크업 : 기계(컴퓨터, 브라우저)가 잘 이해할 수 있는 코드
프로그래밍 언어 : 사람-기계 간 잘 이해할 수 있게 약속된 언어
마크업할 때 : 의미에 맞는 요소를 사용
문서의 구조화
<b> - <strong>
<i> - <em>
<u> - <ins>
<s> - <del>
수강 완료
시멘틱 마크업
시멘틱 : 의미론적인
→ 기계(컴퓨터→브라우저)가 잘 이해할 수 있도록 하는 것
의미에 맞는 요소 사용하기
문서 표현시 구조화 잘하기
인간과 기계 모두가 잘 이해할 수 있는 코드 짜기
<b> vs <strong>
<b>굵은</b> vs <strong>중요한</strong>
외부적으로는 둘 다 우리 눈에는 굵게 표시된다.
내부적으로는 <b> 태그는 아무 의미없이 굵게 표현되었지만,
<strong> 태그는 중요한 의미를 갖는 내용이 들어갔다고 인식된다.
그렇기 때문에 중요한 의미를 담을 경우 <b> 태그 대신 <strong> 태그를 사용하는 것이 시멘틱한 마크업을 했다고 볼 수 있다.
<i> vs <em>
<i>기울어진</i> vs <em>강조하는</em>
외부적으로 둘 다 우리 눈에는 기울여서 표현된다.
내부적으로는 <i> 태그는 단순히 기울어진 글자를 표현하는 것이고,
<em> 태그는 특정 부분을 강조하는 의미를 가지고 있다.
<u> vs <ins>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
외부적으로 둘 다 우리 눈에는 밑줄로 표현된다.
내부적으로는 <u> 태그는 단순 밑줄이지만,
<ins> 태그는 어떤 요소가 새롭게 추가되었을 때 사용한다.
<s> vs <del>
<s>중간선이 있는</s> vs <del>삭제된</del>
외부적으로 둘 다 우리 눈에는 취소선으로 표현된다.
내부적으로는 <s> 태그는 단순 중간선이지만,
<del> 태그는 어떤 요소가 삭제되었을 때 사용한다.
대표적으로 쇼핑몰에서 가격 할인 시 기존 가격에 취소선을 표시하는데,
<s> 태그로 표현할 경우 브라우저는 2개의 가격이 연달아 나왔다는 것으로 인식하지만, <del> 태그로 표현할 경우 기존 가격이 취소되고 새로운 가격이 나왔다는 의미까지 정확히 이해하게 되는 것이다.
semantic markup (시멘틱 마크업) : 의미론적으로 문서를 작성하다.
의미 전달이 잘 되는 코드는 웹 접근성을 높힌다.
요소가 같은 모습으로 보여도 태그에 따라 의미가 달라진다.
<b>: 단순 텍스트를 굵게 표현
<strong>: 중요하다는 의미 + 굵게 표현
중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용 -> 적절하고 시멘틱한 마크업
이외에 <i>는 기울어진 글자, <em>은 강조하는 의미.
<u>와 <s>는 단순히 글자에 선,
<ins>와 <del>은 내용이 새롭게 추가되거나 삭제가 되었다는 의미