HTML 기본, 요소,속성
오랜만에 HTML 정리를 포스팅하게 되었습니다. 게을러진 자신에게 따귀를 한대 때리고 한번 시작해보겠습니다.
저번 시간에는 <!DOCTYPE html> 과 html, head, meta charset="utf-8, titl, body, br 태그에 대하여 알아보았습니다. 이번 시간에는 HTML의 다른 기본 태그와 요소, 속성에 대해서 알아보겠습니다.
기본
h 태그
HTML에서 제목은 h1~h6 태그로 정의합니다. 1이 제일 크고 6까지 크기가 작아집니다.
직접 타이핑해 HTML을 익혀봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
</body>
</html>
p 태그
<p>태그는 HTML 화면의 단락을 나타냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
a 태그
<a> 태그로 링크를 지정하여 클릭 시 다른 사이트로 이동할 수 있습니다.
<body>
<a href="https://www.google.com">구글로 가기</a>
</body>
img 태그
이미지를 불러올 수 있습니다.
src = 소스 경로, alt = 대체 텍스트, width = 너비, height = 높이 속성입니다.
<body>
<img src="1.jpg" alt="썸네일" width="104" height="142" />
</body>
button 태그
버튼이 나타납니다.
<body>
<button>Click</button>
</body>
ul 과 ol 태그
html에서 목록을 나타냅니다 ul 태그는 번호가 매겨져있지 않고 ol 태그는 번호가 매겨진 목록을, li 태그는 ul 과 ol의 항목들로 나타납니다.
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
HTML 태그들은 대소문자를 구분하지 않습니다. <H1> 과 <h1> 은 동일합니다.
하지만 html5 표준에는 소문자를 권장합니다. 규칙이니 꼭 소문자로 하시길 바랍니다.
기초적인 HTML의 기본을 알아보았습니다. 다음으로 HTML의 요소를 알아보겠습니다.
'아 알아가는구나' 정도로 생각하여 같이 써보면서 시작하시면 되겠습니다. 이해를 못 하셔도 됩니다. 뒤에 가면 갈수록 무슨 말인지 알게 될 겁니다.
요소
HTML 요소는 일반적으로 시작 태그와 종료 태그로 구성되며 내용은 사이에 들어가게 됩니다.
<head></head>를 요소라고 합니다. 요소는 중첩될 수 있습니다. 처음에 기본적으로 세팅되어 있는 상태를 보시면 이해가 빠르실 겁니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body></body>
</html>속성
모든 HTML 요소들은 속성값을 가질 수 있습니다. 속성은 요소에 대한 추가적인 정보를 제공하는데 시작 태그에 지정하여야 합니다.
href 속성
<a> 태그의 속성입니다. 링크 주소를 지정합니다. 앞에서 한번 학습하였으니 간단하게 넘어가겠습니다.
<body>
<a href="https://www.google.com">구글로 가기</a>
</body>src,width,height 속성
src = 소스경로, alt = 대체 텍스트, width=너비, height=높이 속성입니다.
<body>
<img src="1.jpg" alt="썸네일" width="104" height="142" />
</body>style 속성
색상, 글꼴, 크기 등 여러 요소의 스타일을 지정할 때 쓰입니다.
<p style="color:red">글자가 빨간색으로 나온다.</p>큰 따옴표, 작은 따옴표
속성값에 보면 큰따옴표를 볼 수 있습니다. 일반적으로 큰따옴표를 사용하지만 작은따옴표도 사용할 수 있습니다.
속성정리
HTML에서 자주 사용하는 속성을 정리해 보았습니다.
| Attribute | Description |
| alt | Specifies an alternative text for an image, when the image cannot be displayed |
| disabled | Specifies that an input element should be disabled |
| href | Specifies the URL (web address) for a link |
| id | Specifies a unique id for an element |
| src | Specifies the URL (web address) for an image |
| style | Specifies an inline CSS style for an element |
| title | Specifies extra information about an element (displayed as a tool tip) |
같이 따라 해보는 것이 중요합니다. 복사해서 붙여넣기 하시지 마시고 하나하나 따라 해 보다 보면 어느 순간 익숙해져있을 겁니다. 그때 복사해서 붙여 넣으셔도 되니 천천히 따라 해 보시길 바랍니다. 여기서 인사드리고 다음 시간에 찾아오겠습니다. 감사합니다.
'IT' 카테고리의 다른 글
| 05.HTML a태그와 id 속성 (0) | 2020.03.29 |
|---|---|
| 04.HTML 주석(티스토리 블로그에 주석달기),feat.tags (0) | 2020.03.27 |
| 02.Eclipse 설치 (JAVA 개발환경 구축) (0) | 2020.02.11 |
| 01.JAVA 개발 사전 준비 (0) | 2020.02.10 |
| 02.HTML 시작 (0) | 2020.02.10 |
댓글