앞의 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>
이번엔 굵기 효과 입니다.
<b>쓰고싶은말</b>
다음 소스를 작성해 보고 테스트 해봅시다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>굵기</title> </head> <body> <b>Hello world</b> </body> </html>
이번엔 밑줄 효과 입니다.
<u>쓰고싶은말</u>
다음 소스를 작성해 보고 테스트 해봅시다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>밑줄</title> </head> <body> <u>Hello world</u> </body> </html>
그외에도 아래첨자 효과 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>
위첨자 소스
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>위첨자</title> </head> <body> <sup>Hello world</sup> </body> </html>
취소선 소스
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>취소선</title> </head> <body> <strike>Hello world</strike> </body> </html>
여기 까지 하고 다음 강좌로 넘어 가려했는데 좀 더 해보고 다음강좌로 넘어 가보죠.
그외에 줄바꿈 태그가 있습니다. 줄긋기 태그도 있구요.
<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>
안녕하세요 다음 줄바꿈이 이루어졌고 밑에는 줄도 그어졌습니다. 그럼 다음 강좌로!!
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
댓글 0개
정렬기준
