html에 대한 게시글들은 최종적인 html 결과물을 보여드리고 어떻게 만들어가는지를 설명해드릴꺼예요.
눈으로 하는 코딩 말고!! 직접 타이핑하는 코딩을 하시면 실력향상에 무척이나 도움이 된답니다.^^7
기본 태그 소개
<p>
단락(paragraph)을 표시한다. 웹 브라우저는 자동적으로 단락의 전후에 빈 줄을 추가한다.
<br />
break에서 나온 용어이고, 종료 태그를 가지지 않는다. XHTML과의 연동을 위해 <br> 보다는 <br />로 작성하는 것이 좋다.
XHTML에서는 닫는태그가 필수이기 때문에 알려줘야한다.
<pre>
Previously Formatted text에서 나온 용어. 자신이 입력한 그대로 출력시켜준다.
<h1>~<h6>
Heading 이며 웹 페이지의 머리기사(Headline)이다. 숫자는 커질수록 글자는 작아진다.
<b>
볼드체로 표시
<i>
이탤릭체로 표시
<strong>
볼드체로 표시도 하지만 텍스트를 강하게 표시한다. 현재는 strong과 아래 나와있는 em 태그는 볼드체와 이탤릭체로 표시해준다.
<em>
emphasized에서 나온 용어. 텍스트를 강조하는 것을 의미한다.
<code>
텍스트가 코드(code)임을 알려주는 태그이다.
<sup>
위첨자(superscript)를 표시한다.
<sub>
아래첨자(subscript)를 표시한다.
<hr>
horizontal line의 약자로 브라우저의 너비만큼 수평선을 그려준다.
non-breaking space의 약자로 공백 문자 한 개를 출력해준다.
<
< 를 출력
>
> 를 출력
"
" 를 출력
&
&를 출력
안녕하세요! 정선생이예요. 태그 설명이 좀 많네요. 필수로 다 외워야하는 태그들은 아니예요. 필요할 때 갖다쓰면 되요. 그리고 요즘은 검색만해도 잘 나오니까요! ( 강의는 기본적으로 편집기의 사용법을 알고 계신다는 전제하에 진행하겠습니다. )
모든 html 파일들은 저장 하실때 확장자를 html로 설정을 해주셔야 웹브라우저가 읽어 낼 수 있습니다! ^^
그럼 텍스트 관련 태그 게시글 시작할게요.
이번에 만들어야 할 페이지의 최종 모습입니다.
위에서부터 차근차근 봐볼까요? 일단 웹페이지의 제목은 "텍스트 관련 태그"로 되어있네요.
그러고 쭉~ 태그들에 대한 설명들이 있어요.
아래 코드를 봐볼까요?
먼저 <head>를 봐볼게요. <head> 태그 속에 있는 <title> 태그는 웹페이지의 제목을 표시 할 때 쓴다는 것을 결과값으로 알 수 있어요.
<body>태그로 넘어가보죠. 결과값이랑 비교하면서 보시면 될 것 같아요.
< > 를 이용해서 태그 이름을 쓸 수 있다는 것과, 공백은 아무리 입력해도 하나로 인식된다는 것과. <pre> 태그, <h1>~<h6>까지의 태그들까지.
막상 코드를 입력하고 보니까.. 코드에 설명들이 다 있는 것 같아요. 마땅히 더 추가로 정리해야 할 내용은 없는 것 같아요.
한 번 꼭 손 코딩이나 타이핑 코딩으로 꼭 해보시고 html의 기본적인 태그들에 익숙해지시면 좋겠습니다. :)
html의 텍스트와 관련된 태그는 여기서 마무리 짓도록 할게요.
읽어주시느라 고생하셨습니다. 그럼 이만 ^^7
게시글을 보시다가 궁금한 내용, 이게 맞나? 하는 내용, 이건 틀렸어!하는 내용들은 과감하게 댓글 달아주시면 감사하겠습니다.
이론적인 내용에 대한 궁금증은 검색을 통해 궁금증을 해결하는 것이 좋아요!!
실습적인 내용에 대한 궁금증은 최대한 생각을 해보고 검색을 하는 것이 좋아요!!
'WEB > HTML' 카테고리의 다른 글
| [HTML] 테이블 (0) | 2018.05.07 |
|---|---|
| [HTML] 리스트, 링크 관련 태그 (0) | 2018.04.24 |
| [HTML] 문서편집기 (0) | 2018.04.06 |
| [HTML] 기본 구조 (0) | 2018.04.06 |