Symentic Tag

시멘틱 태그는 말 그대로 '의미'가 있는 HTML 태그를 의미한다. 웹사이트들 코드를 까보면 div 안에 div 안에 div 안에 div 안에 div 안에 div ... 가 반복되는 경우가 대다수인데, 이를 좀 더 가독성이 좋게 하고자 만든 태그다.

header, main, footer, aside 등의 태그가 존재하며, 이러한 태그를 사용하면 코드의 가독성과 웹 접근성을 높일 수 있다고 한다.

그런데 이런 시멘틱 태그는 SEO에도 도움이 될까?
결론부터 말하자면, SEO에서 큰 영향은 없다.

아래 영상은 Google Search Central에서 운영하는 유튜브의 2022년 1월 영상이다.
https://www.youtube.com/watch?v=GZ_wSeQqPZk&t=1788s

영상을 확인하면 시멘틱 태그는 코드의 가독성과 접근성은 향상시킬 수 있다. 그러나 SEO는 일부 태그를 제외하면 사실, SEO에 크게 작용하지 않을 수 있다.

Heading 태그를 비롯한 우리가 이미 익숙하게 알고있는 태그를 적절하게 사용하는 것이 SEO 향상에 더 도움이 된다.

em 태그를 이탤릭체로 사용하지 않는 것, 그리 중요하지 않지만, b 대신 strong 태그를 사용하는 행위 등이 SEO에 안좋은 영향을 끼친다.

사실 그렇게 좋은 태그라면 이미 국내외 대규모 사이트에서 사용하고 있었을거다

HMTL List Tag

리스트에는 두가지가 있다. Ordered List(ol), Unordered List(ul).
문법은 다음과 같다.

<ol>
	<li>list items</li>
    ...
<ol>

<ul>
	<li>list items</li>
    ...
<ul>

당연하지만, CSS로 변형 가능하다.

CSS 선택자/결합자(selector/combinator)

결합자가 참 많다. 사실 선택자는 기억 안나면 찾아보고, 적용 안되면 이리저리 바꿔보다 보면 된다.

# 자손결합자: sel-1 자'손' 선택
.sel-1 .sel-2

# 모든 조건 만족하는 요소 선택
# (e.g. h1 태그에 some-element 클래스)
h1.some-element

# 자식결합자: sel-1 자'식' 선택
.sel-1 > .sel-2

# 일반형제결합자: sel-1를 뒤따르면서, 같은 부모를 공유하는 두번째 요소 선택
.sel-1 .sel-2

# 인접형제결합자: sel-1를 뒤따르는, 같은 부모를 공유하는 요소 중 첫번째 요소 선택

의사 클래스 (pseudo-class)

이어서 Pseudo-class다.

# 형제 요소 중 첫번째/마지막/n번째 요소
:first-child / :last-child / :nth-child(n)

# sel가 아닌 것
:not(sel)

# 사용자 액션에 따른 인터렉션
:hover / :active / :focus 등...

inline, block 그리고 inline-block

• inline
  • width, height(default: line-height value): content에 맞춤
  • margin: top, bottom 적용 안됨
  • padding: top, bottom 공간 차지 안함
• block
  • width(default: 100%), height: 적용됨
  • margin: 적용됨
  • padding: 적용됨
• inline-block
  • width, height: 적용됨 (default inline)
  • margin: 적용됨
  • padding: 적용됨