(HTML/HTML5) 2.서식태그 원형5가지와 <b> , <strong> 태그 1~2/39

직전 포스트 복습

html을 시작하면서 가장 기본적인 태그 10개에 대해서 알아보았다. 이제 부터는 일명 서식태그에 대해서 알아보고자 한다. 전체 서식태그는 총 39개이다. 굉장히 많은 것 같지만 몇 가지 분류만 해보면 크게 어렵지 않다. 이번 포스트에서는 서식태그 기본원형에는 어떤 것들이 있는지 알아보자. 일종의 분류의 기준을 정한다고 생각하시면 된다.

기준 5가지는
1.글자 굵기
2.글자 에 줄긋기(밑줄,관통, 아쉽게도 윗줄이란건 없다.)
3.글자 크기
4.글자 서체 변형
5.글자 배경색

이렇게 기본형 5가지이다. 그럼 왜 이렇게 글자의 모양, 즉 스타일을 바꿀까? 목적은 당연히 강조의 의미다. 똑같은 것들이 반복되는 와중에 튀는거 한 두개 나오면 당연히 강조이지 않는가. 전체 39개 중에서 37개는 전부 위에 강조방법 5가지를 적적히 조합해서 만들어 낸 것이다. 저 5가지 외에 글자 스타일의 변화를 줄 수 있는게 있을까? 없다. 내 생각에는 박스 만들기가 있지만 그건 머.. 내 생각일 뿐이고. ㅎ 그러니

서식태그에 대해서 간단히 줄이면
1.글자의 스타일 변경(5가지스타일 조합) 해서
2.의미부여 해서
3.태그를 만들었다.

누가? w3c가
여기서 질문. 왜 의미부여를 했을까? 이게 시멘틱의 핵심이다. 왜? 그냥 5가지 던져두고 사람들이 알아서 쓰게 하면되지 어차피 사람들 눈에는 똑같은데 굳이 조합해서 새로운 태그를 만들어 냈을까? 그것에 대해서는 기본적인 b - 태그와 같이 알아보자.

1-1.html - <b> 태그 정리

의미/역활 :글자를 굵게 해서 해당 부분을 강조 하고 싶을 때 사용
사용법 :<b> 와 </b> 사이에 넣어 주기만 하면 된다.

1-2.html - <b> 태그 한 걸음 더

html의 권고에 따르면 가능한 b-태그를 사용하지 말 것을 권고한다. 이게 무슨 말일까? html5는 무엇보다 시멘틱을 강조한다. 잠시만 시멘틱에 대해서 이야기 하자면

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

라고 위키백과에는 정의하고 있다.

b-에 적용하면 글자를 강조하는 것은 사람은 왜 굵게 했는지 이해 할 수 있지만 컴퓨터는 왜 이 부분을 강조했는지 인식할 수 없다. 그러니 강조의 의미를 가지는 다른 태그들을 사용할 수 있으면 사용하고 없다면 마지막에나 b-태그를 사용하라고 권고하는 것이다. b태그는 대체할 수 있는 다른 태그들은 추후에 정리해서 알아보자.

2-1.html - <strong> 태그 정리

의미/역활 :글자를 굵게 해서 해당 부분을 강조 하고 싶을 때 사용
사용법 <strong> 와 </strong> 사이에 넣어 주기만 하면 된다.

hn태그 포스트 바로가기 (HTML/HTML5) 1.기본태그 h1 ~ h6

2-2.html - <strong> 태그 한 걸음 더

또~~옥 같다. b-태그랑. 태그 이름만 다를 뿐이다. CSS로 정의 된 것을 보면 확실히 알 수 있다. 즉, strong 태그는 b-태그에 의미만 새롭게 부여하고 이름만 다르게 붙였을 뿐이다. 그런데 웃긴 것은 html5 권고에는 b태그보다 strong 태그가 우선순위에 있었다. 라는 것이다. 그럼 strong 태그보다 우선순위에 있는 것이 있을까? 당연히 있다. 바로 우리가 알아보았던 h1~ h6 태그 제목을 붙이는 태그다. 글자를 굵게 하지 않는가? 물론 글자의 크기 또한 크게 하지만^^; 사실, h1 ~ h6 태그가 기본태그 이기는 하지만 엄밀히 말하면 서식 태그의 일종이다.

3.html <b> <strong> <hn> 태그 최종정리

단순히 글자를 굵게 한 것 뿐인데 너무 어렵게 설명한 경향이 있다. 의도는 원리만 파악하면 서식태그가 정말 쉽다 라는 것을 그리고 적절하게 사용 할 수 있다 라는 것을 이야기 하고 싶었는데 말이다. 의도와 다르게 필력이 딸리는 관계로 바로 쏙 이해하기가 쉽지 않으리라 생각한다. ㅈㅅ ㅠㅠ

1. 글자의 스타일을 변경해서 그 내용을 강조하는 방법 5가지
2. 서식태그의 5가지 원형
3. 글자 굵기, 글자에 줄긋기, 글자 크기, 글자서체 , 글자 배경색
4. 글자 굵기 변경 태그는 b , strong , hn 태그

앞으로 포스트는 위에 표에 따라 진행 할 것이다.