블로그 운영 기본 태그 정리 html, css

블로그 운영을 하려면 가장 많이 부딪히는 벽이 코딩 용어다. 개발 언어부터 배워야 가능한 것일까?라고 포기하는 분도 많다. 하지만 필수 용어만 잘 알아두면 크게 어렵지 않다.

SEO 최적화를 위한 태그

H1~H6

html에서 기본으로 제공하는 태그로 한국어로 변환하면 대제목, 중제목, 소제목을 의미한다. 크기별로 6까지 정리해둔 것으로 보통은 h3~4까지만 사용한다. 구글 검색 엔진에 최적화되려면 대제목, 중제목, 소제목이 잘 나눠져 있어야 하고 하위 본문이 잘 작성되어야 한다. 그래야 구글봇이 보기에 짜임새 있는 글로 인식하게 될 확률이 높아진다. 티스토리 기준으로 설명하면 다음과 같다.

1. 티스토리는 블로그 개발을 했을 때부터 글의 제목이 h1으로 잡히게 된다. 그래서 html모드에서 h1으로 편집하게 되면 글의 제목이 2개가 되는 꼴이 되어 SEO에 좋지 않은 영향을 준다.
2. 티스토리 글 작성 시 설정할 수 있는 제목 1로 작성하면 h2로 설정된다.
3. h3=제목 2
4. h4=제목 3
5. h5~6까지는 html모드에서 따로 설정해야 하지만 제목 4~5까지 쓸 일이 없다면 사용할 필요가 없다.

html이란?

웹사이트를 구축하는 뼈대를 만드는 코딩 용어, 컴퓨터 언어를 의미한다. head, body, p, span 등이 뼈대에 속한다.

css란?

css는 스타일을 지정하는 언어로 정리할 수 있다. html가 뼈대를 만드는 것이라면 css는 내부 인테리어를 하는 것과 같다. 글자 크기, 색상, 콘텐츠 영역 간의 간격, 콘텐츠가 이동하고 사라지는 효과까지 모두 지정할 수 있다.

html, css에서 수정하는 방법

• html 수정: 글 작성하는 페이지에서 오른쪽 상단에 보면 기본 모드가 있다. 여기서 HTML을 선택하고 [ctrl+F]를 눌러 h2, h3, h4를 검색한다. 태그의 기본은 열고 닫는다. 열고 닫는 다는 것은 <태그명>기타 내용</태그명>처럼 마지막에 닫는 것이 중요하다. 그렇지 않으면 코드끼리 꼬이게 되고 사이트가 이상해진다. 그래서 <h2> ~ </h2>를 <h3> ~ </h3>으로 세트로 함께 바꿔준다. 단, html 수정은 제목 크기 외에는 바꿀 수가 없다. 만약 폰트 크기, 색상, 굵기 등을 설정할 것이라면 css값을 수정해야 한다.
• css 수정: 스킨 편집에서 css메뉴를 선택한다. 보통 h1~6은 다른 태그와 함께 엮여서 스타일이 잡혀 있는 경우가 많다. 그래서 나의 경우에는 새로 추가해 준다. css 맨 상단이나 하단에 추가해도 상관없다. 다음과 같이 수정한다.
  
  

/* /**/은 주석태그로 사이트에 영향을 주지 않는다. 그래서 메모처럼 활용한다. */
h1 {
font-family: '폰트명' @important; /* 폰트 스타일을 변경할 수 있다. 연결한 폰트 이름을 폰트명에 입력한다. */
font-weight: bold; /* 폰트 굵기를 설정할 수 있는 태그다. 폰트마다 100~900로 설정하거나 bold, light 등을 입력하는 등 설정값이 다르다. */
line-height: 120%; /* 행간 설정값이다. 퍼센트로 조정할 수도 있고 px로 조정이 가능하다. 값을 조정해보면서 원하는 간격을 찾으면 된다. 대부분 1글자보다 약간 작은 간격을 사용한다. */
letter-spacing: 0; /* 글자 간격을 설정할 수 있는 자간 태그로 "-1, 0, 1"로만 설정할 수 있다. */
text-align: center; /* 텍스트 정렬을 설정하는 값으로 center, left, right가 있다. 이것을 css로 설정하면 글 작성 시 매번 설정할 필요는 없다. 단, 참고할 부분은 글을 등록 후에 자동으로 설정된다.*/
font-size: 28px; /* 글자 크기를 수정한다. */
}

h1~h6은 기본적인 설정값이 정해져 있다. 티스토리가 개발되었을 때부터 또는 스킨 개발자가 작업을 했을 때부터 설정된 것이기 때문이다. 그래서 내가 추가한 css가 가장 최우선으로 지정이 되려면 다음과 같은 태그가 필요하다. 바로 @important이다. 폰트명 뒤에 넣은 것처럼 입력해두면 내가 지정한 값으로만 설정된다. 이 태그를 넣지 않으면 내가 추가한 태그가 반영이 전혀 안 되기도 한다. 그래서 나는 필수로 넣어주는 태그다. 모든 스타일 값마다 넣어주어야 한다. 예를 들면 폰트명, 폰트 굵기, 행간값, 자간값, 텍스트 정렬값, 폰트 크기 뒤에 모두 넣는 것이다.

상단에 예시는 블로그 글 제목의 스타일을 바꾸는 것이다. h2~6까지 수정하려면 따로따로 입력해서 넣어야 한다. 따로 입력한다는 것은 h1 { 스타일 값 }, h2 { 스타일 값 } 등으로 나눠서 쓰는 것을 의미한다. 폰트 사이즈를 수정하는 것이 아니라면 한 번에 묶어서 사용해도 된다. 한 번에 묶는다는 의미는 다음과 같다. h1, h2, h3, h4, h5, h6 { 스타일 값 }으로 묶어서 작업한다. 폰트 사이즈라는 기준을 붙인 이유는 모든 제목의 글자 크기가 같으면 가독성이 떨어지기 때문이다.

alt 태그

블로그에 대한 강의나 글을 공부하다 보면 alt태그에 대한 중요성을 강조한다. alt태그란 이미지에 대한 설명을 하는 입력란이다. 우리는 이미지를 삽입하여 사용한다. html모드로 보면 <img src="" />가 잡힌다. 시력이 있는 우리에게는 이미지가 어떤 메시지를 주는지 이해할 수 있다. 하지만 콘텐츠의 내용을 긁어 읽는 컴퓨터(구글봇, 다음봇, 네이버봇 등)는 인식하지 못한다.

특히 장애인을 위한 웹표준의 중요성이 커졌다. 시각장애인들은 인터넷을 할 때 인터넷 페이지를 읽어주는 리더기를 이용한다. 하지만 대부분 이미지 태그에 설명을 적는 사이트가 없었고, 웹표준이 떠오르면서 alt값 입력은 필수가 되었다. 티스토리에서는 간편하게 아이콘을 선택하여 입력할 수 있다. 잘 입력되었는지 확인하려면 html 모드로 변환해서 <img src="" alt="사진에 대한 설명" />에서 alt값을 확인해보면 된다.

nbsp, br 태그

• nbsp: 공백을 처리하는 태그다. 스페이스 키를 두 번 누르면 html모드에서 " &nbsp;"로 생긴다. 이 공백 태그가 많으면 SEO에 좋지 않다는 의견이 많다. 그래서 나는 글을 모두 작성해놓고 html모드로 이 태그를 지우고 발행한다.
• br: 단락을 나누는 태그로 엔터키를 누른 것과 같다. 하지만 티스토리 블로그에서는 br이 생성되지 않는다. 워드프레스나 다른 플랫폼을 이용할 때 참고하면 된다.