본문 바로가기

IT & TECH/HTML

3. HTML 텍스트 관련 태그

저번 강의를 통해 저희는 이제 w3schools.com 사이트가 제공하는 html 실행기를 통하여 실습을 진행해 나가려고 합니다. 링크를 저장해 놓지 않으신 분들을 위해 링크는 아래 걸어두었습니다. 


http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 


또한 html 실행기가 무엇인지 하시는 분들은 2강을 참고해 주세요. 링크는 아래 있습니다.


http://techdaddy.tistory.com/21


자 이제, 모든 준비가 끝났습니다. 바로 사용 가능한 html 실행기도 있고 컴퓨터도 있고, 이제 죽어라 타이핑만 하시면서 배우실 자세만 있으시면 됩니다. 간혹 눈으로만 공부하시는 분들이 있으실까봐 그런데, 컴퓨터 코딩은 반드시 손으로 직접 타이핑을 해보고 오류도 경험해보고 실제로 내가 원하는 것이 출력되었는지 눈으로 직접 확인해야지 실력이 향상될 수 있으니, 이 점 잊지 마시고 실습! 을 무조건해주셔야 합니다. 눈으로만 봐서는 지금 당장은 아는 것처럼 보여도 실제로 타이핑을 해보면 막히는 경우가 상당히 많습니다. 자신이 생각했던 방향으로 흘러가지 않는 부분도 많기 때문에, 다시 한 번 강조 드립니다.



이제 진짜로, 3강 html 텍스트 관련 태그에 대해 좀 더 다양하게 알아가보도록 합시다.


저번 시간에 저희는 <h>헤더 태그와 <p>문단 (paragraph) 태그에 대해 잠시 알아보았습니다. 오늘은 이 두 개의 태그와 더불어 여러 개의 태그를 공부해보고자 합니다. 





참고로 아래 내용을 실습하게 하실 수 있게 제가 텍스트 파일을 미리 만들어 놓았습니다. 아래 내용을 공부한 후에, 텍스트를 다운받아서 복사한 후, 맨 위에 있는 링크에 들어가셔서 연습해 봅시다. 일단은 아래 첨부된 연습1.txt를 붙여넣기 해보시고 그다음엔 지우고 스스로 다 타입을 해보시면 좋을 것 같습니다. 타입 완료 후 -> See Result 버튼을 누르시면 됩니다.


(TIP)

텍스트 안에 <!--1,2 번--> 이렇게 쓰인 태그를 접하실 수 있습니다. 

<!-- ...내용... -->태그는 무엇을 뜻하는 것이냐면 주석이라고 보시면 됩니다. 즉, 저 태그 안에 들어가 있는 내용은 컴퓨터가 읽을 수 없습니다. 내가 코딩을 하면서 어떤 코드가 무엇을 의미하는지 설명을 하기 위해 사용되는 태그입니다. 필수 태그도 아니며 태그 안에 어떠한 이상한 갑골문자를 사용해도 컴퓨터는 무시합니다. "설명" 의 의도로 사용하시는 것이라고 알아두시면 됩니다. 



연습1.txt




1. <h1> ... 내용 ... </h1>  


헤더 태그. 헤더 태그라고 어렵게 생각하실 것이 아니라 문단의 제목이라고 생각하시면 편합니다. 보통 신문을 보시면 큰 제목이 굵은 색 글씨로 적혀있고 그에 해당하는 문단이 제목보다 작은 글씨로 적혀있는 글을 많이 보시죠? 아래 예시를 참고해 봅시다.



자 여기서 <h1> 헤더 태그는 무엇이 될까요? 헤더 태그는 바로 "The martians have come at last" 가 되겠죠? 그리고 그 아래 작은 글씨들은 paragraph로서 <p>태그가 될 것입니다. 


여기서 질문입니다. 그렇다면 위에 "The Daily News"는 무엇일까요? 정답은 이것도 헤더 태그라는 것입니다. 왜 그런가요?라고 물으신다면 답은 헤더 태그에서 찾으실 수 있습니다.


주의 깊게 헤더 태그를 한 번 보시면 <h1> 1이라는 숫자가 뒤에 붙어있습니다. 이것은 무엇을 의미하냐면 헤더 태그도 태그 사이에서 랭킹이 있다는 것입니다. 구체적으로 말씀드리자면 헤더는 <h1>, <h2> ... <h6>까지 있습니다. 그리고 숫자가 낮아질수록 헤더 글씨 크기가 작아진다고 생각하시면 됩니다. 






2. <p> .. 내용 .. </p> 


문단 태그입니다. 이 문단 태그는 헤더 태그와 다르게 뒤에 숫자가 없습니다. 일정한 글씨 크기를 가지고 있다고 보시면 됩니다. (나중에 글씨 크기를 조절하는 방법을 배울 수 있는데 이것은 CSS를 배워야 가능합니다. 따라서, 지금은 일단 문단 태그는 글씨 크기가 고정이라고 생각하시면 됩니다.)









3. 글씨체 굵게하기 / 비스듬히 하기


<b>...내용... </b>


b는 영어로 bold의 줄임말입니다. "굵은"이라는 뜻이죠. 이 태그를 이용해 글씨체를 굵게 할 수 있습니다. 예시) 안녕


<i>...내용... </i>


i는 영어로 italic의 줄임말입니다. 이탤릭 채라고 하는데 이 태그를 쓰면 글씨를 비스듬히 기울일 수 있습니다. 예시) 안녕







4. 줄 바꾸기/ 수평선 긋기 /띄어 쓰기


1강에서 태그는 쌍을 이룬다고 말씀드렸었습니다. 하지만 그 원리가 적용이 안되는 몇 가지 태그들이 있습니다. 그 중 하나가 줄 바꾸기이며 또 다른 하하나는 수평선 긋기입니다. 그렇다면 이 둘은 어떻게 사용할까요? <태그 /> 이렇게 사용하시면 됩니다. 함께 보겠습니다. 


<br />


br는 영어로 break line의 줄임말입니다. 해당 줄을 멈추고 다른줄로 시작해라 이런 의미입니다. 

아래 예시에서 보시다시피 점심은...까지만 글을 쓰고 br태그가 나왔기 때문에, 줄 바꿈을 하였습니다. 


<hr />


hr는 영어로 horizontal rule의 줄임말입니다. 그냥 수평선(줄)을 긋는거구나라고 간단하게 생각하시면 됩니다. 아래 예시에서 함께보시죠.



*띄어쓰기*


띄어쓰기 관련 태그는 왜 안 적혀있죠? 실은 여기서 태그에 관해 설명드리려고 적어놓은 것은 아닙니다. 우선 아래 예시부터 보시죠.

<p> 나        는 html을 공부 중이다.</p> 를 보시면, 띄어쓰기를 6-7칸 해놨는데도 불구하고, 띄어쓰기가 씹혔습니다. 

한 칸만 띄어쓰기가 되어있네요. 여기서 여러분들이 추측할 수 있다시피, 태그와 태그 사이에 스페이스를 백 만개하던 enter를 몇 십 개 쳐서 빈 공간을 만들어 놓던 컴퓨터가 이를 다 무시하고 하나의 스페이스만 인정합니다. 


그렇다면 어떻게 해야 띄어쓰기가 가능한가요? 이건 그냥 팁으로만 알려드리겠습니다. 외우진 마세요. 아 그냥 이런 게 있구나 하고 지나치시면 됩니다. &nbsp를 이용하는 것입니다. 예를 들어 <p>나&nbsp&nbsp는 바보다</p> 이렇게 타입을 하면 '나' 와 '는' 사이에 스페이스가 2개 들어갑니다. 스페이스를 하고 싶은 만큼 넣어주시면 됩니다.







5. 중간에 줄 긋기/ 언더라인


<del>...내용... </del>


del는 영어로 delete의 줄임말입니다. 지운다는 뜻이지만 의미처럼 글자를 지우진 않습니다. 

대신에 이 태그를 이용해 글씨 중간에 선을 그을 수 있습니다.  예시) 안녕


<ins>...내용... </ins>


ins는 영어로 insert의 줄임말입니다. 삽입한다는 뜻이지만 의미처럼 무엇을 삽입하진 않고 이 태그를 쓰면 글씨아래 언더라인을 할 수 있습니다. 

예시) 안녕








6. 연습문제


연습문제입니다. 아래와 같이 출력되는 코드를 작성해 주세요. 답은 위에 연습1.txt파일에 있습니다. 


<문제>







이것으로 3강 텍스트 관련 태그에 관해 알아봤습니다. 질문이 있으시면 언제나 댓글을 남겨주세요. 성심성의껏 답변을 도와드리겠습니다.