HTML 이란?
HyperText Markup Language 로 웹을 이루는 가장 기초적인 구성요소입니다.
웹사이트를 인간으로 치면 뼈대라고 할까요?
CSS는 살과 옷 이라고 하면 JavaScript는 행동이라고 하면 좋겠습니다.
그래서 이러한 뼈대를 어떻게 만들 것인가를 알아보도록 하겠습니다. 배운 것 위주로 간단하게만 설명하고 예제를 보여드리겠습니다.
기본 문법
1. <head> </head>
HTML 문서의 <head> 요소는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 title, script, style 시트 등이 있습니다.
head Tag 안에 들어갈 수 있는 요소
- <title>: 문서의 제목을 지정하는 요소입니다.
- <meta>: 문서에 대한 메타데이터를 지정하는 요소입니다. 예를 들어, 문서에 대한 설명이나 키워드를 지정할 수 있습니다.
- <link>: 외부 스타일 시트나 자바스크립트 파일을 연결하는 데 사용되는 요소입니다.
- <script>: 자바스크립트 코드를 포함하는 요소입니다.
- <base>: 문서에 대한 기본 URL을 지정하는 요소입니다.
예시
<head>
<title>내 문서 제목</title>
<meta name="description" content="내 문서의 설명입니다.">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>2. <body></body>
웹페이지 내용을 보여주는 정보를 담는 태그입니다.
<h1>~<h6>
문서의 제목을 만드는 데 사용됩니다.
이 제목 태그를 잘 이용하면 검색 엔진이 문서의 내용을 이해하는 데 도움이 됩니다.(페이지를 만들 때 중요합니다.)
<h4>HTML Tag 연습</h4><a></a>
링크를 만드는 데 사용됩니다. 링크는 문서의 다른 부분이나 다른 웹사이트로 연결할 수 있습니다.
<a href="pabeba.tistory.com">호소세의 블로그 이동!</a>a 태그 속성 값
- href : 링크가 연결되는 URL을 지정합니다.
- target : 링크가 클릭될 때 열리는 창을 지정합니다. 가능한 값은 "_blank"(새 창에서 open), "_self"(현재 창에서 open), "_parent"(링크는 링크가 있는 프레임의 부모 프레임에서 open), "_top"(링크는 현재 창의 최상위 수준에서 open) 및 프레임의 이름입니다.
- title : 링크에 대한 도움말 텍스트를 지정합니다.
<img>
문서에 이미지를 삽입하는 데 사용됩니다. src 속성은 이미지 파일의 URL을 지정합니다. alt 속성은 이미지가 표시되지 않을 때 표시되는 텍스트입니다.
<img alt="아이유" src="picture/iu.jpg">폴더 이름이 picture인 곳에서 iu.jpg를 가져오겠다는 말입니다.
꿀팁 - 폴더 불러올 때 ../../picture/iu.jpg 이런 것들을 본적이 있으실텐데 이것은 자신을 실행시키는 폴더에서 2번 상위폴더로 간 뒤에 picture 폴더에 있는 iu.jpg를 불러오라는 뜻입니다.
<ol></ol>, <ul></ul>
ol 태그는 순서가 있는 목록을 만드는 데 사용되고 ul 태그는 순서가 없는 목록을 만드는 데 사용됩니다. 둘 다 li 태그(항목)로 구성됩니다.
<ol>
<li>피자</li>
<li>치킨</li>
<li>콜라</li>
</ol><ul>
<li>맥주</li>
<li>소주</li>
<li>와인</li>
</ul>
<table></table>
table 태그는 행과 열로 구성된 테이블을 만드는 데 사용됩니다. tr 태그는 행을 만들고 td 태그는 열을 만듭니다.
border 속성 : 테이블의 테두리 지정
cellpadding 속성 : 셀의 안쪽 여백 지정
<td> 속성
colspan : 셀의 너비를 여러 열로 확장하는 데 사용
rowspan : 셀의 높이를 여러 행으로 확장하는 데 사용
<table border="1">
<tr>
<td colspan="2">자기소개</td>
</tr>
<tr>
<td>이름</td>
<td>지코</td>
</tr>
<tr>
<td rowspan="3">취미</td>
<td>독서</td>
</tr>
<tr>
<td>여행</td>
</tr>
<tr>
<td>산책</td>
</tr>
</table>
설명한 태그보다 더 많은 태그가 있는데, 저는 그냥 기본적인 것만 알아보았습니다.
소감
자신이 사용하고 싶은 태그들을 검색해서 찾아보면 다 찾아볼 수 있습니다.(제가 아직 아는 것이 적어 일단은 이정도만 작성했습니다.) 그리고 이미 선조들이 만들어 놓은 멋진 기능들을 이용하면 보다 쉽게 웹페이지를 만들 수 있습니다. 어떻게 잘 이해하고 사용했는지를 알고 있다면, 결과물을 위해서 시간절약을 위해서 선조들이 만들어 놓은 코드를 사용하는 것도 좋다고 생각합니다.
'코딩 개발' 카테고리의 다른 글
| [네트워크] HTTP GET 요청과 POST 요청 (0) | 2023.05.16 |
|---|---|
| CSS 기본 문법 (0) | 2023.05.15 |
| Apache Tomcat & Eclipse 설정하기 (Window, macOS 공용) (1) | 2023.05.13 |
| Apache Tomcat (WAS, Web Server, Apache HTTP Server, Apache Tomcat) (1) | 2023.05.13 |
| DB 정규화 (3) | 2023.05.03 |
