텍스트 관련 태그

앞의 i태그, b태그, u태그, sub태그, sup태그, strike태그, br태그를 보셨다면 다음 강좌로 패스해 주세요.
이번엔 글씨에 간단한 스타일을 적용해주는 태그를 배워 봅시다.
먼저 이탤릭 효과 입니다. 매우 간단 합니다. ^^ 이탤릭 태그는 이렇습니다. 

<i>쓰고싶은말</i>

다음 소스를 작성해 보고 테스트 해봅시다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>이탤릭</title>
</head>
<body>
<i>Hello world</i>
</body>
</html>
i_tag

이번엔 굵기 효과 입니다. 

<b>쓰고싶은말</b>

다음 소스를 작성해 보고 테스트 해봅시다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>굵기</title>
</head>
<body>
<b>Hello world</b>
</body>
</html>
b_tag

이번엔 밑줄 효과 입니다. 

<u>쓰고싶은말</u>

다음 소스를 작성해 보고 테스트 해봅시다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>밑줄</title>
</head>
<body>
<u>Hello world</u>
</body>
</html>
u_tag

그외에도 아래첨자 효과 sub 태그, 위첨자 효과 sup 태그, 취소선 효과 strike 태그 등이 있습니다. 한꺼번에 테스트 해볼게요.

<sub>아래첨자</sub>
<sup>위첨자</sup>
<strike>취소선</strike>

태그는 위와같이 활용하구요.아래 소스로 테스트 해보도록 하죠.

아래첨자 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>아래첨자</title>
</head>
<body>
<sub>Hello world</sub>
</body>
</html>

sub_tag

위첨자 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>위첨자</title>
</head>
<body>
<sup>Hello world</sup>
</body>
</html>
sup_tag

취소선 소스


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>취소선</title>
</head>
<body>
<strike>Hello world</strike>
</body>
</html>
strike_tag

여기 까지 하고 다음 강좌로 넘어 가려했는데 좀 더 해보고 다음강좌로 넘어 가보죠.

그외에 줄바꿈 태그가 있습니다. 줄긋기 태그도 있구요. 

<br />

이게 줄바꿈 태그이구요.
보시다싶이 단독태그 이므로 꺽세 닫기전에 /를 작성하고 >를 닫습니다. ^^ 

안녕하세요<br />
저는 아시모를 좋아합니다.

<hr /> 이것은 줄긋기 태그 입니다. 

<hr />

요즘은 별로 안쓰는듯 하고 저도 사용해본적이 없지만 간단히 사용할때 좋을듯 합니다.
이말은 나중에 CSS도 배우시다 보면 무슨말인지 알것입니다. ^^
그런데 단독태그에 /를 붙이지 않아도 기능상으로는 상관이 없습니다. <br>만으로도 줄바꿈 기능은 구동합니다만, 단독 태그에는 /를 붙이기로 약속이 되어있어서 그렇게 하는것입니다. 웹표준검사(validator.kldp.org)에 가서 웹표준 검사를 하게 되면 단독태그에 /를 안붙였다고 에러나 워링이 뜨게 됩니다. 그러니 처음부터 이러한것을 습관화 시키면 좋습니다.

위와 같은 식으로 활용 하면 됩니다. ^^

그럼 직접 작성해서 테스트 해볼까요? 이거 공부하시면서 조급한 마음을 갖지 마시고 하시기 바랍니다. 조급함 갖고 하면 정말 될것도 안됩니다. 경험상 그리고 인생 몇년 더 늦춰지더라구요. 그저 지금 공부하고 있다는것만으로 만족하면서
하나 하나 이해하고 넘어 가는게 좋습니다.

주석 이라는게 있습니다.
코딩(코드 작성을 하는것을 그렇게 부른답니다.) 을 하면서 자신이 나중에 이 소스가 무슨 역할을 하는지
모를수 있거나 다른사람이 자신의 코드를 보더라도 쉽게 이용할수 있게 이 소스가 무슨 기능을 하는지
설명문을 적어 두는건데요. 그럴때 그 설명문이 프로그래밍 소스에 영향을 미치지 않게 하기 위해 주석을 달아 주는 것입니다.
예를 들어 <h1>hello world</h1> 라고 작성을 했고 이것을 왜 <h1>태그에 작성을 했는지 설명을 쓰고 싶을때

<h1>hello world</h1> <!-- h1 태그를 사용한 이유는 블라 블라 블라 블라 -->

위와 같이 처리를 합니다.
시작은 이렇게 <!-- 끝맺음은 --> 이렇게 즉 <!-- 주석문 --> 입니다.


아래의 소스로 주석문, 줄바꿈기능, 줄긋기 기능을 실습해 봅시다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>줄바꿈 기능</title>
</head>
<body>
    안녕하세요.<br />
    저는 아시모를 좋아합니다.
<hr /><!--  이것은 줄긋기 태그 이죠 -->
</body>
</html>
br_hr_tag

안녕하세요 다음 줄바꿈이 이루어졌고 밑에는 줄도 그어졌습니다. 그럼 다음 강좌로!!