상세 컨텐츠

본문 제목

HTML안에 주석 넣는 방법은? 태그구조는 3가지만 알면 끝!!

HTML 마스터하기

by C&story 2023. 11. 19. 17:21

본문

HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)의 줄임말입니다. 그 기능은 웹 페이지 화면의 뼈대를 구성하는 데 사용됩니다.

 

웹에서 우리가 보는 글자, 그림, 표 등을 배치하고 모양을 결정해 주는 화면세팅 도구입니다.

 

프로그램을 개발하는 개발자들은 HTML을 프로그램 언어로 보지 않는 경향이 있습니다. HTML이 단순히 화면상에서 어떻게 보여질지를 결정해 주는 도구일 뿐이고, 논리 연산등을 통해 새로운 결과를 나타내 주지는 않기 때문입니다.

 

목차
- 하이퍼텍스트란?
- 마크업 언어란?
- 태그구조는 ?
- HTML 내에 설명을 추가하는 방법
- 절대주소와 상대주소란?


 

 

■하이퍼텍스트(HyperText)란 무엇인가?

텍스트는 목차를 찾고 그 목차의 부분으로 이동하는 순차적 접근을 해야 합니다. 하이퍼텍스트(HyperText)와 텍스트(Text)를 비교하여 가장 큰 차이점은 곧바로 원하는 지점으로 이동이 가능하다는 것입니다. 

 

마크업 언어란?

마크(Mark)는 영어로 표시한다는 의미인데, 글자의 크기나 굵기, 기울임 등을 표시하는 부가적인 기능을 말합니다. 이러한 마크를 태그(Tag)라고 부릅니다.

 

태그 구조는 3가지만 알면 끝!!

HTML 문서를 작성하기 위해서는 태그를 사용하여 문서의 서식이나 구조를 표현해야 하는데, 이 태그 작성에 필요한 3가지는 규칙에 따라 작성되어야 합니다. 일종의 약속 같은 거죠!!

 

1) 태그는 아래 구조로 작성되어야 합니다.

    <태그이름 속성이름='속성값'> 

 

2) 태그는 아래와 같이 짝을 이루어야 합니다.

    <body></body> 

<body>는 태그의 시작을 나타내고,  </body>는 태그의 끝마침을 나타냅니다.

 

3) </body>와 같이 태그를 닫는 이름 앞에는 '/'를 붙여 줍니다.

 

태그 만드는 방법은 끝!!!!

 

이제 태그가 가진 각각의 기능별로 하나씩 정복해 가면 됩니다.

 

 

 태그를 만들었는데 구별하기 쉬게 설명을 붙이고 싶다면?

코멘트를 추가하는 방법은 <!-- 코멘트 --> 이렇게 작성하면 됩니다.

<!-- 주석 멘트 적어놓고 -->

 

화면상에는 보여지지 않지만, 문서 작성자가 알 수 있도록 주석을 달아 놓으면 다음에 내용을 추가하거나 수정할 때 편리합니다.  

 

절대주소와 상대주소란?

절대주소는 고정적으로 변하지 않는 고정주소입니다. 예를 들면,https://whystoryetc.tistory.com과 같이 HTML작성 시 주소를 전부 적어 넣는다면 항상 고정된 장소로 이동을 할 수 있습니다.

 

상대주소는 지금 현재의 문서 지점에서 상위 폴더로 이동할 것인지, 하위 폴더로 이동할 것이지를 정해 주는 것입니다. 저장된 문서의 상위폴더와 하위폴더로 이동하는 것과 같은 원리입니다. 

 

이동을 위해서는 무언가 작업지시를 해야만 합니다. 현재 문서가 소속된 폴더는 '.'으로 표시하고, 현재 문서의 부모 폴더를 표현하고 싶으면 '..'으로 표시합니다. 

 

예를 들면, 

Test> AA> test1.prg라는 파일과 Test> BB> test2.prg라는 파일이 있습니다. Test라는 폴더에 AA와 BB라는 하위폴더가 있고, 그 폴더 안에 Test1.prg, Test2 prg라는 파일이 있는 것입니다. 

 

이때 현재 문서의 위치가 Test> AA라면,

1) 현재 같은 폴더에 있는  test1.prg를 표현하고 싶을 때 './test1.prg라고 작성하고,

2) Test> BB> test2.prg를 표현하고 싶으면../BB/test2.prg라고 작성합니다.