HTML 태크 구조

이번시간에는 HTML 태그에 대해 공부해 보도록 하겠습니다.

저번시간에 말했듯이, HTML은 태그 덩어리이기 때문에, 태그를 먼저 알아야 합니다
HTML 파일을 직접 만들어보면서, 태그를 배워보도록 하겠습니다.

디폴트 값으로 index파일을 제일 먼저 찾도록 웹 서버들은 설계되어 있기 때문에,
Visual Studio Code를 열어 index라는 이름으로 파일을 만들어 보겠습니다.

KAKAO-CLONE 옆에 있는 아이콘, New File을 클릭하여, index.html이라는 이름으로 파일을 만들어 주면 됩니다.

 

 

 

태그의 구조를 살펴보면 <name attribute="값">내용</name> 이런식으로 생겼습니다.

 

 

예를 들자면, <human gender="male">Human</human>, <인간 성별="남성">인간</인간> 으로 또는
<dog breed="german-shepard">Dog</dog>, <멍멍이 종류="독일쉐퍼드">멍멍이</멍멍이>로
쓰인다고 이해할 수 있습니다.

 

 

이게 웬 새로운 태그냐 하시는 분들도 있으실지 모르겠지만, 
사실 이해를 돕기 위해 예를 든 것뿐, human이나 dog와 같은 name의 태그는 없습니다.

그럼, 이제 실제로 쓰이는 태그 중에 가장 쉬운 몇 가지 예를 보여 드리겠습니다
<title>This is the title of the document</title>, <제목>이것은 이 문서의 제목이다</제목>

 

 

 

또 다른 예로, <p>로 쓰이는 문단 태그도 있습니다. 
<p>lalalalalala</p>, <p>라라라라라</p>

 

 

링크의 경우에는, <a href="https://hye-math.tistory.com">Go to tistory</a>,
<a href="https://hye-math.tistory.com">블로그로 가 보세요</a> 이런식으로 쓰여질 수 있습니다. 

 

 

 

그럼 이제 링크를 제외한 나머지를 다 지워보고,
해당 링크를 저장(ctrl+s) 후, 크롬에서 해당 파일을 열어서 확인해 보겠습니다.

 

 

 

해당 파일을 저장된 파일을 열어서 index.html을 주소창으로 드래그한 후,
열어보면, Go to tistory라는 링크를 볼 수 있습니다.

 

 

이걸, Go to tistory를 클릭하면 같은 창에서 티스토리로 이동할 수 있습니다. 

target을 blank로 설정하면 어떻게 되는지도 알아보도록 하겠습니다.

 

 

저장(ctrl+s) 후, 해당 페이지를 새로고침을 하고, 해당 링크를 다시 클릭해 보면,

 

 

이번엔 같은 창이 아닌, 새로운 창에서 티스토리로 이동하는 것을 확인할 수 있습니다. 

마찬가지로, 조금 전에 이해를 돕기 위해 작성해 보았던,
<human gender="male">Human</human>도 위와 같은 방식으로 새로고침 후, 웹페이지에서 확인할 수 있습니다.

 

 

 

이것이 바로 attribute, 속성을 활용해서 HTML을 작성하는 방법입니다.