happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

UI 변경
오늘도 방문해 주셔서 감사합니다.
여러분이 매일 찾아주셔서 하루 5명 오는 사이트에서 1000명이 오는 사이트로 커갈 수 있었습니다.
드디어 2017년 8월 25일 에버디벨 책이 [웹코딩 시작하기]라는 제목으로 정말 출간 합니다.
정말 열심히 최선을 다해 많은 조사를 하며 작성했습니다. ^-^*
에버디벨은 제가 프로그래머가 아닌 시절 만든 사이트지만, [웹코딩 시작하기]는 저의 2년간의 프로그래머 경력을
살려서 꼭 알아야 한다고 생각하는 것들을 최대한 쉽게 설명하여 만들었습니다.
[웹코딩 시작하기]서평 이벤트도 시작했습니다.
[웹코딩 시작하기 서평 이벤트 많은 참여 부탁드립니다. ^-^* 눌러주세요.]

- 2017.8.5 에버디벨 운영자

텍스트 관련 태그

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

<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

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


강좌로 돌아가기