devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

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강.리스트와 하이퍼 링크 입니다. 클릭하면 다음 강좌로 이동합니다.