본문 바로가기
웹 공부/2. HTML5

HTML - 헤딩과 텍스트 서식, 수평선 태그, 주석 - 텍스트 표시 (2)

by 긴냥이 2017. 5. 10.
반응형


HTML - 헤딩과  텍스트 서식, 수평선 태그 및 주석

텍스트 표시 (2)




오늘은 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 처리에

대해서 알아 보도록 하겠습니다.


먼저 태그 기초부터 알아보기 이전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)


먼저 헤딩 태그 입니다.

해딩 태그란 웹 페이지의 머릿글 같은 말인데요.

웹페이지를 신문이라고 친다면 헤드라인? 같은 말을 의미합니다.

(상단 가장 큰 글자 같은것!)


그 다음 헤딩도 머리글 처럼 크기가 있듯이 표시도 제각각 인데요



위와 같이 <h1> ~ <h6> 까지의 6개의 태그로 숫자가 작을수록 가장 큰 크기로 정의 됩니다.

※ 추가로 헤딩 태그는 문서의 중요한 키워드나 머릿글 사용자에게

보여주기 위해 사용하는 것이 좋습니다.


이 다음 HTML의 주석 처리에 관련된 내용입니다.

여기서 주석이란 코드를 설명하는 글 인데요 코딩을 하는 개발자가 코드를

중간 중간 이해하기 쉽게 설명을 해놓는데 도움을 주는 그러한 처리 입니다.





주석 처리는 위와 같이 

태그 밖에  <!--  태그 & 문자  --> 를 적어 표시 하도록 사용이 가능하며

웹 브라우저상 출력시 주석문은 자동으로 무시되어 출력됩니다.

또한 중간 중간 필용없는 코드를 처리하는데도 사용 됩니다. ^^


이 다음은 텍스트 서식에 관련된 태그입니다.

텍스트 서식이란 한글과 같은 워드에서 글자를 가늘게 하거나 두껍게 하거나

기울이거나 글시체를 바꾼다거나 이러한 용도로 사용이 되는데 

이 와 같이 HTML 에서도 동일하게 기능을 하는 태그가 있으며 이는 아래와 같습니다.




 태그

 속성

 <b></b>

 볼드체로 만든다.

 <strong> </strong>

 텍스트를 강하게 표시

 <em> </em>

 텍스트를 강조

 <sub> </sub>

 아래첨자

 <sup> </sup>

 위첨자

 <code> </code>

 코드임을 표시

 <i> </i>

 이텔릭체로 표시



여기까지 텍스트 서식에 관련된 내용이였습니다.


이 다음 수평선 태그 입니다.

수평선 태그는 <hr> 태그를 사용하며 사용하는 방법은 아래와 같습니다.





위 사진을 보시면 아시겠지만 <hr> 태그를 사용하면 브라우저의 너비만큼

수평선을 그릴 수 있습니다.





여기까지 HTML - 헤딩 , 텍스트 서식 , 수평선  태그 및 주석 처리에 관련되어 기록해 보았습니다.

다시 한번 말하지만 백번 보는 것 보다 한두번 써보는게 더 이해하기 쉽습니다.


이상 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 , 텍스트 표시 (2)에 

관련된 포스팅을 마치도록 하겠습니다.




반응형

댓글