devil cat everdevel character

현재 작업 중..

disney Teyon kin

간단한 스타일 태그

이번엔 글씨에 간단한 스타일을 적용해주는 태그를 배워 봅시다.
먼저 이탤릭 효과 입니다. 매우 간단 합니다. ^^ 이탤릭 태그는 이렇습니다.

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

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

					<!DOCTYPE html>
					<html>
					<head>
					<title>이탤릭</title>
					</head>
					<body>
					<i>Hello world</i>
					</body>
					</html>

결과

i_tag

이번엔 굵기 효과 입니다.

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

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

					<!DOCTYPE html>
					<html>
					<head>
					<title>굵기</title>
					</head>
					<body>
					<b>Hello world</b>
					</body>
					</html>

결과

b_tag

이번엔 밑줄 효과 입니다.

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

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

					<!DOCTYPE html>
					<html>
					<head>
					<title>밑줄</title>
					</head>
					<body>
					<u>Hello world</u>
					</body>
					</html>

결과

u_tag

아 하나 하나 작성하려니 좀 피곤하네요. ㅋ
그외에도 아래첨자 효과 sub 태그, 위첨자 효과 sup 태그, 취소선 효과 strike 태그 등이 있습니다. 한꺼번에 테스트 해볼게요.

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

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

아래첨자 소스

					<!DOCTYPE html>
					<html>
					<head>
					<title>아래첨자</title>
					</head>
					<body>
					<sub>Hello world</sub>
					</body>
					</html>
					

결과


sub_tag

위첨자 소스

					<!DOCTYPE html>
					<html>
					<head>
					<title>위첨자</title>
					</head>
					<body>
					<sup>Hello world</sup>
					</body>
					</html>
					

결과

sup_tag

취소선 소스


					<!DOCTYPE html>
					<html>
					<head>
					<title>취소선</title>
					</head>
					<body>
					<strike>Hello world</strike>
					</body>
					</html>
					

결과


strike_tag

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

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

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

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

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

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


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

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

결과


br_hr_tag

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


다음강좌는 3강.리스트와 하이퍼 링크 입니다. 클릭하면 다음 강좌로 이동합니다.