칠리설탕의 it
HTML의 기본생성 / tag 본문
안녕하세요. 이번에는 틈틈이 HTML이라는 언어에 대해서 공부를 해볼 계획입니다.
우선 vscode를 실행시켜 .html이라는 확장명을 가지고 파일을 하나 생성합니다.
생성한 파일에 텍스트를 입력후 실행을 시켜보겠습니다. (vscode기준 F5번입니다)
 |
 |
결과로 하나의 웹페이지가 만들어진 것을 볼 수 있습니다.
이제 tag라는 문법에 대해 배워보겠습니다.
tag란 문서의 구조와 콘텐츠를 정의하는데 사용되며 시작태그와 종료태그의 쌍으로 사용을 합니다. 시작태그는 <tag>와 같이 표현하고 종료태그는 </tag>와 같이 표현을 합니다. 말 그대로 시작태그는 tag가 시작하는 부분, 종료태그는 tag가 끝나는 부분을 말하는 것입니다.
| <html> | HTML 문서의 시작과 끝을 정의 |
| <head> | HTML 문서의 헤더를 정의하며 여기에는 문서 제목, 메타데이터, 스타일시트 밑 기타 소스들에 대한 링크를 포함 |
| <title> | 문서의 제목을 정의, 브라우저의 제목 표시줄ㅇ이나 북마크에서 표시 |
| <body> | 문서의 본문을 정의 |
| <h1>,<h2>,<h3>.....<h6> | 제목을 정의하고 숫자가 클수록 제목의 수준이 낮아지며, 줄바꿈과 문자가 진하게 표시 |
| <br> | 줄바꿈 정의 |
| <p> | 단락 정의 |
| <img> | 이미지 삽입 |
| <strong> | 문자를 진하게 표시 |
| <u> | 텍스트 밑에 밑줄 |
| <a> | 하이퍼 링크를 정의 |
| <li> | 목록의 항목을 정의 |
위의 표와 같이 tag들이 존재합니다. 하지만 tag의 종류는 대략 150개로 많기에 몇개만 담아봤습니다.
위의 tag를 이용하여 웹페이지를 다시 재구성해보겠습니다.
 |
 |
이렇게 웹페이지의 이름도 지정했고, 강조, 밑줄, 단락나눔등을 사용했습니다.
여기에 사진을 추가해보는 tag를 사용해보겠습니다.
사진을 추가할때에는 <img src=" "> 태크 안에서 " " 안에 원하는 사진의 주소를 적으면 됩니다. 만일 사진의 크기가 너무 커서 이미지 크기를 조정해야 한다면 width = 100%라는 속성을 통해 자동으로 웹 브라우저의 크기에 맞게 이미지의 크기를 바꿀 수 있습니다.
 |
 |
이제 li 태그를 이용해 목차를 정의해보겠습니다.
목차를 정의 하기 위해 html코드를 조금 수정하겠습니다.
 |
 |
이렇게 보면 공부는 공부대로 운동은 운동대로 따로 구분이 안되어있기에 한눈에 파악하기 힘듭니다. 이럴때 줄바꿈태그 <br>을 사용해도 되지만 이런경우 사용하기 위해 따로 만든 태그인 <ul>태그를 사용하면 됩니다. <ul>태그는 <li>태그의 부모태그입니다.
<ul>태그를 이용하여 화면을 재구성 하겠습니다.
 |
 |
마지막으로 만일 오늘 해야 할일이 많다고 가정을 하면 번호 매겨야 할것이 너무 많을 것입니다. 이럴때는 <ul>태그를 <ol>태그로 바꾼다면 자동으로 번호를 매겨주는 방법이 있습니다.
<ol>태그를 이용하여 번호응 매겨보겠습니다.
 |
 |
오늘은 이렇게 몇개의 tag를 이용하여 html을 만드는 방법에 대해 알아보았습니다!
감사합니다!!
'HTML' 카테고리의 다른 글
| HTML에 채팅 기능 추가하기 (0) | 2024.05.19 |
|---|---|
| HTML을 github를 이용하여 웹 호스팅하기 (0) | 2024.05.15 |
| HTML 링크달기 (0) | 2024.05.13 |
