프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

H 태그 사용법 과 주의 사항

H 태그는
Heading 의 약자 로, H1~H6 까지 사용할 수 있고 글자의 크기와 굵기가 바뀐다.
단지, 글자의 크기와 굵기만 바뀌기 보다는 웹 페이지를 검색하는 검색 봇 들에게
해당 웹 페이지의 키워드 들을 제공하는 역할을 한다.
그렇기때문에, H 태그는 글 내용 중 제목 및 소제목 그리고 중요한 키워드가 될 만한 텍스트 들을 사용해야 한다. 그래야지만, 포털 등에서 내 글들이 잘 검색이 되어 진다.
사실 포털들이 운영하는 검색 Robot 의 알고리즘이 계속 해서 업데이트 되기에 어떤 SEO(Search Engine Optimization) 가 딱 정답이다 라고 말할 수는 없다.
하지만, 태그를 사용할 때는 HTML 태그의 본래의 목적에 맞게 잘 사용해주는 것이 가장 좋다.
물론 글을 잘 노출하기 위해서는 SEO 도 중요하지만, 타인에게 도움이 되는 글 이 첫번째가 되어야 하겠다. 도움이 되는 글을 시간이 지나더라도 어떻게든 사람들이 찾아오게 되어있기 때문이다.


그럼 H 태그의 예제와 결과를 만들어 보자.

H 태그

H1이 가장 중요한 키워드가 되겠고, 그 다음으로는 숫자가 커질수록 중요도가 작아진다.
H 태그 결과화면

가장 중요한 키워드 나 제목 등은 H1으로 표현해야겠다.
추가로, 블로그에 따라 기본 제목 등이 이미 H1으로 설정된 경우등도 있다 그럴때 본문은 H2 부터 사용해주는 것이 좋다. SEO등은 H1 이 두개가 나오면 SEO에 최적화 된 글이라고 생각하지 않는다. 
위에서 언급한 것 처럼, 좋은 글이라면 노출은 분명 된다.
SEO만 너무 생각하다보면 알맹이가 없는 껍데기에 만 너무 치중하게 된다.
SEO를 너무 신경쓰지말고 좋은 글을 적는 것에 초점을 맞추는 것이 좋다.
감사합니다.

댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기