본문 바로가기


IT 이야기/HTML 강좌

#HTML 강좌 - 글자의 서식 , 주석처리 방법

by 낭만ii고양이 2018. 4. 18.



바로 앞 강좌에서는 표제테크(h),줄바꿈테그 (br/p),수평선테그(hr) 에 대해서 알아보았습니다.

앞 강좌를 거치지 않고 오셨다면 아래 링크를 따라가셔서 공부하고 오시기를 권해드립니다.



#HTML 강좌 - 표제테크(h)  줄바꿈테그(br/p)  수평선테그(hr)
http://disital.tistory.com/56



■  글자의 서식

글을 쓰다가 중요한 부분이 있으면 굵게 처리하거나 기울임 처리 또는 밑줄긋기도 합니다. HTML에서도 이처럼 글자의 서식을 바꿀 수 있는 테그가 있습니다. 


서식을 바꾸는 테그는  굵게, 강조, 기울임꼴, 밑줄, 취소선, 아래 첨자, 위 첨자 이렇게 7개가 흔히 쓰이는 태그입니다. 여기서 굵게와 강조비슷해서 어떤차이가 있는지 궁금할 수도 있는데, 굵게는 단순히 글자를 굵게 하지만 강조는 웹 브라우저에서 실제로 중요한 부분인 것처럼 처리합니다. 중요한 의미를 나타내고 싶다면 강조인 strong 태그를 사용하는 것을 권해드립니다.



이것은 글자를 굵게 적용하였습니다.



이것은 글자를 강조로 적용하였습니다.



이것은 글자를 기울어지게 적용하였습니다.



이것은 글자를 기울어지게 적용하였습니다.



이것은 글자를 취소선이 그어지게 적용하였습니다.



이것은 글자를 아래첨자로 적용하였습니다.



이것은 글자를 위첨자 적용하였습니다.



※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<p>이것은 <b>글자를 굵게 적용하였습니다.</b></p>

<p>이것은 <strong>글자를 강조로 적용하였습니다.</strong></p>

<p>이것은 <i>글자를 기울어지게 적용하였습니다.</i></p>

<p>이것은 <ins>글자를 기울어지게 적용하였습니다.</ins></p>

<p>이것은 <del>글자를 취소선이 그어지게 적용하였습니다.</del></p>

<p>이것은 <sub>글자를 아래첨자로 적용하였습니다.</sub></p>

<p>이것은 <sup>글자를 위첨자 적용하였습니다.</sup></p>



위 소스를 복사해서 메모장으로 붙여넣은후 test.htm 으로 저장한후 실행해보면 아래와 같이 뜨는것을 확인하실수가 있습니다.



그냥 블로그 운영자 이시라면 이런것은 알 필요도 없겠지만  블로그가 아니라 홈페이지를 구축해야 하시는 분이라면 이정도 테그는 기본으로 알고계셔야 할겁니다.




■  주석처리 방법


자신이 소스를 코딩했을지라도 나중에 시간이 많이 지나면 이게 어떤 코드인지 헷갈릴때가 많습니다. 이럴때 주석을 넣어두면 쉽고 빠르게 이해를 할수가 있습니다. 그래서 거의 모든 컴퓨터 관련 언어에는 주석(Comment)이라는게 존재합니다.


HTML에도 주석이 있습니다. 주석을 사용하면 해당 부분이 어떤 의미인지, 또는 여기까지 코딩했다는 표시 등을 가장 빠르게 메모할 수 있습니다. 웹 브라우저는 주석 부분을 아예 무시하기 때문에 코드의 실행 결과에 절대 영향을 주지 않으니 어떤 내용을 적어도 상관 없습니다. 







 Category



※위소스가 제대로 안보이면 아래를 보세요(모바일용)

<!-- 카테고리 모듈 -->

<div class="panel panel-default category">

<h4 class="panel-heading"><i class="fa fa-list"></i> Category</h4>

<div class="panel-body">

</div>

</div>



주석은 '<!--내용-->' 이 형식으로 작성이 됩니다. 위 소스를 보시면 첫번째줄이 주석부분입니다. 제 블로그의 소스중 이부분인데 저런씩으로 주석이 많이 달려있습니다. 이렇게 해놓지 않으면 나중에 수정하고자 할때 엄두가 나지 않습니다. 이렇게 주석처리를 해놓으면 아래 코드가 어떤 내용인지 한번에 알수있습니다.





제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.


 






저작자표시

'IT 이야기 > HTML 강좌' 카테고리의 다른 글

#HTML 강좌 - div 태그 개념다지기  (0) 2018.04.27
#HTML 강좌 - bgsound 태그 embed 태그 iframe 태그  (0) 2018.04.26
#HTML 강좌 - 테이블(TABLE) 테그  (0) 2018.04.25
#HTML 강좌 - FONT 테그  (0) 2018.04.24
#HTML 강좌 - 링크걸기  (0) 2018.04.20
#HTML 강좌 - 이미지 삽입  (0) 2018.04.19
#HTML 강좌 - 표제테크(h) 줄바꿈테그(br/p) 수평선테그(hr)  (0) 2018.04.17

관련글

댓글

티스토리툴바