글을 쓸 때 글자를 강조하기 위해 굵게 표시하거나 색을 넣을 때가 있다. 수정 사항을 표시하려고 가운데 줄을 긋기도 하고 글자를 기울여 쓰기도 한다. 그런데 이런 상황에서 쓸 수 있는 태그가 여러 개다. 어떤 차이가 있는 걸까? 1. 글자 강조하기 특정 문구를 강조할 때 글자를 굵게 표현한다. 글자를 굵게 표현하는 방식은 여러 가지다. 첫 번째로 생각할 것은 글의 구성에 어떤 영향을 미치는 요소인가다. 제목(headings)을 표현하는 h1 ~ h6 태그가 있다. h1 ~ h6은 글자를 굵게 표현함과 동시에 User Agent CSS 설정에 따라 글자 크기나 스타일을 바꾸기도 한다. 그러나 이 요소는 글의 구조를 구성하는 요소지 단순히 글자를 굵게 표현할 때 사용하는 요소는 아니다. 또 block 속성을..

지금처럼 웹 표준이라는 개념이 널리 퍼지기 전 많은 사용자에게 HTML 태그는 원하는 페이지를 화면에 표시하기 위한 도구였다. 태그의 의미보다는 내가 원하는 화면을 표현하는 것이 더 중요한 목표였다. 웹 표준을 준수하기 위한 움직임이 활발한 지금 많은 사용자는 태그를 원래의 의미에 맞게 사용하는 것에 신경을 쓰기 시작했다. HTML 문서에 사용하는 태그는 그 종류가 상당히 많다. HTML, XHTML 버전에 따라서 새로 생기는 태그도 있고 없어지는 태그도 있다. 예를 들어 예전엔 요소를 가운데 정렬하기 위해 center란 태그를 사용했지만, 지금은 deprecated로 선언되었다. 물론 이는 center란 태그가 제 기능을 하지 못한다는 의미는 아니다. 단지 해당 요소를 가운데 정렬할 때 center 태..

* 이전 글 보기 - 블로그에 유용한 태그 4 - table 태그로 간단한 표 만들기 - 블로그에 유용한 태그 5 - table 태그에 스타일 적용하기 이 글은 표 만들기에 관한 이전 글을 읽었다는 전제하에 작성되었습니다. 본문에 나오는 CSS 각 항목에 대한 설명은 이전 글을 참고하세요. 이전 글에서 table 태그로 표를 만드는 법, table 태그 속성 대신 CSS로 표 속성을 지정하는 방법에 대해 알아보았다. 이번엔 스타일을 적용해서 표 내용을 더 보기 쉽게 꾸며보자. 한눈에 알아보기 쉽고 외관상으로도 예쁜 표를 꾸미려면 CSS를 어떻게 작성해야 좋을까? 가장 간단한 방법은 배경색을 사용하는 것이다. 예를 들어 표의 홀수 행(tr class="odd")과 짝수 행을 다른 색으로 지정하면 색 차이 ..

글을 작성하다 보면 간단한 표를 만들어야 할 때가 있다. 간단하게 div 태그를 사용해서 글 상자를 만들고 내용을 주욱 나열하듯 입력해도 되지만, 그것보다는 세부 셀이 나뉜 표를 만드는 편이 한눈에 알아보기 쉽다. table 태그를 사용하면 간단한 표는 어렵지 않게 만들 수 있다. table 태그의 기본 구조는 아래와 같다. 표 제목 첫째 줄 첫째 칸 첫째 줄 둘째 칸 둘째 줄 첫째 칸 둘째 줄 둘째 칸 은 표를 만드는 것이다. 과 사이의 내용이 표를 구성하는 내용이다. caption, thead, tbody, tfoot은 간단히 이야기하면 표 제목, 머리글, 본문, 꼬리글이다. 그러나 보통의 표에선 caption, thead, tbody, tfoot을 생략하고 단순히 tr, th, td 요소만 사용할 ..

* 이전 글 보기 - 블로그에 유용한 태그 1 - 글자 스타일 지정하기 (1) 지난번에 글자에 간단한 스타일을 적용하는 것에 대해 살펴봤다. 로 적용한 스타일은 영구적인 속성이다. 쉽게 이야기해서 한 번 지정하면 계속 그 상태로 유지된다. 글자 색을 토마토색으로 바꾸기와 같이 지속적으로 유지되는 속성이 부여된다. 그러나 style 대신 OnMouseOver와 OnMouseOut을 사용하면 커서 위치에 따라 글자의 스타일을 바꿀 수 있다. 태그 사용 방식은 이전과 비슷하다. 기본 형식은 이며 OnMouseOver는 마우스 커서를 글자 위에 올렸을 때의 스타일이고 OnMouseOut은 마우스 커서를 글자에서 내렸을 때의 스타일이다. OnMouseOut은 속성 이름만 입력하고 속성값을 비워두면 마우스 커서를 ..

대부분 블로그는 WYSIWYG(What You See Is What You Get)를 지원하므로 HTML 태그를 몰라도 글을 작성할 수 있다. WYSIWYG는 간단히 생각하면 워드 프로세서를 사용해서 문서를 작성하는 과정과 비슷하다. 그러나 블로그를 계속하다 보면 태그가 필요할 때가 있다. 아니, 필요하다고 할 순 없지만, 태그를 사용하면 좀 더 간결하고 완성도 높은 글을 작성할 수 있다. WYSIWYG를 사용해서 글 서식이나 표, 그림이 복잡하게 구성된 글을 작성하면 그때그때 적용한 태그가 중첩되거나 하나로 통일할 수 있는데 반복적으로 사용되어 복잡해진다. 결과물은 같지만, 거기에 이르는 과정에서 차이가 있는 셈이다. 홈페이지를 만들 때 나모 웹 에디터나 드림위버를 사용하는 것과 메모장을 이용한 것의 ..