티스토리 뷰





이전 HTML1장-

2018/09/02 - [컴퓨터 공부/HTML] - [HTML무엇일까] HTML5, 에디터, 기본구조 알아봅시다



안녕하세요. 돈혁입니다.

오늘은 자신만의 개인홈페이지를 만들고 텍스트 이미지까지 넣는 방법을 알려드리도록할게요!

복잡하지만 나름 재밋습니다.





텍스트표시


HTML문서에서 텍스트는 특별한 태그 없이도 <body>...</body> 안에서 표시할 수있습니다.






<p> 단락


단락(paragraph)은 <p>태그로 정의된다. 단락이란 전체 글을 내용에 따라 나눌 때, 하나하나의 짧은 이야기 토막을 말한다.

웹 브라우저는 자동적으로 단락의 전후에 빈줄을 추가한다.



<p> 단락을 안넣어주었을때




<p>단락을 넣어주었을때






<br>

새로운 단락을 시작하지 않고 줄 바꿈을 원한다면 <br>태그를 사용한다.

<br>태그는 "break"에서 나온 용어이다. 

<br>태그는 종료태그를 가지지 않는태그이다.







<pre>태그

프로그래머가 입력한 그대로 화면에 나타나게 하는 함수.

<pre>태그를 사용하면 개발자가 입력한 스페이스나 탭, 줄 바꿈이 그대로 유지한다.







헤딩

헤딩은 웹페이지의 머리기사이다. 

<h1>부터<h6>까지의 6개의 태그를 이용해 정의된다. <h1>이 가장중요한 내용이다.

<h1>이 가장 크게 나타내고, h2,h3,h4,h5----- 숫자가 커질수록 글자수가 작아진다.







주석

주석이라는 말은 다들들어보셨죠? 네 맞습니다.

주석은 코드를 설명하는 글입니다. 새로운 개발자가 코드를 이해하는데 도움을 주죠.


<!-- 이것이 주석입니다. -->

(주석시작)         (주석)            (주석종료)


위 사진과 같이 초록색으로 표시된것은 주석이 된 내용입니다.







텍스트 서식


<b> ... </b>  : 볼드체로 만든다.

<i> ... </i>  : 이탤릭체로 만든다.

<strong> ... </strong> : 텍스트를 강하게 표시한다.

<em> ... </em> : 텍스트를 강조한다.

<code> ... </code> : 텍스트가 코드임을 표시한다.

<sup> ... </sup> : 위첨자

<sub> ... </sub> : 아래첨자


이렇게 텍스트를 쓸때 자주쓰는 서식이니 알아두면 좋을것같다.






수평선

<hr> 태그를 사용하면 브라우저의 너비만큼 수평선을 그릴 수 있다. 

hr은 "horizontal line" 의 약자이다.



이런식으로 표시됩니다.




이렇게 html 두번째 포스팅을 마칩니다. 

배우면 배울수록 신기하고 재밌네요. 다음포스팅에서 뵐게요~


댓글
댓글쓰기 폼