Spo web maker

1. color는 글자에만 적용되는 게 아니다. 
- 이미지가 없을 때의 대체 텍스트 색상 
- 기본 보더 색상 
- 목록 엘리먼트의 불릿 기호 또는 숫자 마커의 색상 
- hr 엘리먼트의 선 색상 
등으로도 적용된다고 합니다. 

2. visibility 속성에는 collapse 값도 설정할 수 있다. 
테이블 내부 요소에 한해 visibility : collapse를 설정하면 display : none과 같이 동작한다고 합니다(즉 공간을 차지하지 않는다는 얘기). 하지만 브라우저마다 동작이 다르고 특히 크롬에서는 visibility : hidden 처럼 동작합니다. 

3. background 단축 속성에 3가지 값을 더 쓸 수 있다. 
CSS3에서는 background-size, background-origin, background-clip 속성도 background 속성에 추가할 수 있습니다. 단, CSS3에 추가된 속성을 사용하려면 앞에 슬래시를 붙여야 한다고 합니다. 

4. clip 속성은 엘리먼트가 절대 좌표일 때만 동작한다. 
position: absolute 혹은 fixed 인 경우에 한해서만 적용된다고 합니다. 
5. 수직 공간(위 또는 아래)에 대한 퍼센트는 높이가 아닌 너비에 비례한다. 
margin-top/bottom, padding-top/bottom에 퍼센트를 쓰면 너비에 비례해서 값이 바뀌네요. 왜 이렇게 만든 걸까요… 
6. border는 인셉션 같다. 
border는 단축 속성인데 알고 보면 border에서 설정할 수 있는 각 속성들도 사실은 또 단축 속성이고… 

7. text-decoration은 단축 속성이 됐다. 
새로운 스펙에 따라 선 종류, 선 색상, 선 스타일을 한꺼번에 설정할 수 있다. 현재는 파이어폭스만 지원한다. 

8. border-width 속성에는 medium, thin, thick 같은 키워드도 사용할 수 있다. 

9. border-image는 아무도 안 쓴다. 
데모에서 박스 크기 바꿔보면 안 쓰는 이유를 알 것도 같네요. -_-;; 
10. empty-cells 라는 속성도 있다. 
테이블의 빈 셀을 보여줄건지 / 아닌지 설정할 수 있는 속성. 심지어 IE8부터 모든 브라우저가 다 지원하네요. 
11. font-style 속성에는 oblique라는 값도 있다. 
우리가 “이탤릭”이라고 알고 있던 기울임꼴은 사실 oblique가 맞는 거고, 원래 “이탤릭”이라고 불리는 글꼴은 따로 있네요(위키피디아 Oblique Type 참고). “진짜 이탤릭”을 지원하는 폰트가 있다면 기대했던 모양과 달라질 수 있으니 현재 사용되고 있는 이탤릭체에 적절한 값은 olbique가 더 맞다는 얘기입니다. 
12. word-wrap은 overflow-wrap과 같다. 
word-wrap이 되려면 단어 단위로 줄이 바뀌어야 되는데 지금은 그냥 정해진 영역을 넘어간 내용을 자르고 있으므로 overflow-wrap과 같이 동작한다는 뜻입니다. 용어가 혼란스럽게 잘못 만들어졌다는 얘기인데, CSS 워킹 그룹의 Incomplete List of Mistakes in the Design of CSS (CSS 설계상의 실수)라는 글을 읽어보면 같은 내용이 나옵니다. W3C에서도 word-wrap을 overflow-wrap으로 대체하기로 했다고 하네요.

안경을 끼면 상대방의 이름과 직위가 나오고 

둘이서 체스를 두고

서바이벌 총싸움게임을 하고

3d 프린터 디자인을 해서 바로 인쇄까지 연결

https://www.getameta.com/

이미 블로그나 웹사이트를 운영해 본 사람이라면 누구나 제목 태그(Heading tag), 즉 H1, H2 등에 대해 익숙하실 텐데요. 오늘은 검색엔진최적화를 위한 제목 태그 활용 방법에 대해 알아보겠습니다.

제목 태그의 계층화(Hierarchy)

어떤 책이든 책의 제목이 있고 각 장에는 대제목, 중제목, 소제목 등으로 구분됩니다. 대제목과 중제목, 소제목은 그 크기나 색, 굵기 등에 변화를 주어 그 차이를 나타내는데요. 이러한 구분은 HTML에도 존재합니다. 바로 제목 태그(Heading)로 말이죠.
HTML에서 제목 태그는 H1부터 H6까지 총 6개가 존재합니다. 스타일을 지정하지 않은 제목 태그는 아래 그림과 같이 각각 다른 크기로 표현됩니다.

크기의 차이에서 볼 수 있듯 그 중요성에도 차이가 있습니다. 가장 중요한 제목 태그는 H1, 가장덜(?) 중요한 제목 태그는 H6 입니다. 제목 태그는 H1부터 H6까지 계층 구조를 이루고 있는데요.즉 제목 태그 중 하나를 빼먹고 다음 태그를 사용하는 것(예: H1 태그 아래 H3 태그 사용)은 잘못된 계층구조이며, 검색엔진최적화에도 좋지 않습니다.

그렇다면 제목 태그는 어떻게 활용해야 할까요? 제목 태그의 계층에 맞는 활용법은 아래와 같습니다.

Heading 1

일반적으로 H1 태그는 콘텐츠의 타이틀로 활용하게 됩니다. H1은 웹사이트 제작시 이미 HTML 안에 포함하여 구성하기 때문에 특별히 사용할 일은 없을 것입니다. 다만, 콘텐츠의 타이틀이 H1 태그가 아닌 <p> 또는 <strong>, <span> 등으로만 이뤄져 있는 것은 아닌지 확인해야 합니다.

Heading 2

H2 태그는 콘텐츠의 대제목입니다. 주로 가장 큰 문단의 제목으로 사용 됩니다. 동일한 수준의 대제목을 사용하기 위해서는 H2 태그를 사용하고, H2 하위 수준의 제목을 사용하기 위해서는 H3 태그를 사용해야 합니다.

Heading 3

H3 태그는 H2의 하위 제목을 위해 사용 됩니다. H2 태그 다음에 H3가 아닌 H4 이하의 태그를 사용하는 것은 좋은 방법이 아닙니다.

Heading 4~6

H4~H6 태그는 제 경험상 많이 사용하고 있지는 않습니다만, 종종 사용할 경우도 있습니다. H3의 하위 제목으로 사용해야 합니다.

그렇다면 제목 태그는 왜 사용해야 하고, 또 왜 중요 할까요? 검색엔진 측면에서, 그리고 사용자 측면에서 살펴보겠습니다.

제목 태그 사용의 중요성 – 검색 엔진의 측면에서

검색 엔진 스파이더는 웹사이트의 제목 태그와 콘텐츠 사이의 일관성을 체크합니다.

H1 태그는 페이지에서 가장 중요한 태그입니다. H1 태그는 웹사이트나 페이지에 반드시 필요하며 검색 엔진 스파이더는 H1 태그에 사용된 단어에 집중합니다. H1 태그는 반드시 페이지 콘텐츠의 기본 설명이 포함되어야 합니다.

제목 태그 사용의 장점 – 사용자 측면에서

스크린리더를 사용하는 사람들에게 적절히 구조화 된 제목 태그는 사이트를 살펴보기 쉽게 합니다.

페이지 내 제목 태그는 사용자가 콘텐츠를 빠르고 쉽게 살펴보도록 합니다.

제목 태그 사용시 주의할 점

제목 태그 사용시 주의할 점에는 어떤 것들이 있을까요?

• 제목 태그에 유인 키워드 반복(Keyword Stuffing)을 사용하지 않는 것이 좋습니다.
• 정말 필요하지 않을 경우를 제외하고 H1 태그는 한 번만 사용하는 것이 좋습니다.
• 제목 태그를 숨겨진 텍스트(hidden text)로서 사용하는 것은 좋지 않습니다. 숨겨진 텍스트의 경우 검색엔진최적화에 좋지 않은 영향을 미칠 수 있습니다.
• 동일한 제목 태그를 반복해서 사용하는 것은 좋지 않습니다. 사이트 내 제목 태그는 웹사이트를 통틀어 서로 다르게 쓰는 것이 좋습니다.
• H1 태그와 메타 태그에 동일한 콘텐츠를 담지 마세요.
• 제목 태그를 단지 예쁘게 꾸미기 위해 사용하지 마세요. 제목 태그에 CSS 즉, 스타일을 입혀 포스팅을 꾸미는 용도로만 사용하는 분들이 꽤 있습니다. 심지어 제목 태그의 용도는 미리 정해놓은 스타일을 불러오는 정도로만 이해하는 분들도 있습니다. ‘구글 검색엔진최적화 기본가이드’에도 나타나 있듯이 ‘제목 태그로 구조를 표현하지 않고 텍스트 스타일을 지정하는 데에만 사용’하는 것은 피해야 하는 사항이라고 언급하고 있습니다.

지금까지 검색엔진최적화를 위한 제목 태그 사용 방법에 대해 살펴 봤습니다. 다음 시간에는 제목 태그 사용을 통한 계층 구조는 어떻게 나타나는지 알아보겠습니다.