Appia의 IT세상

[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성 본문

Programming/HTML&CSS

[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성

Appia 2020. 7. 11. 07:35
반응형

[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성 

 

이번 앞선 포스팅에서는 가장 기본적인 (Tag)에 들에 대해서 살펴봤습니다. 제목, 문단등을 사용하면서 각 태그를 어떻게 사용하는지에 대해서 확인할 수 있었습니다. 이번 포스팅에서는 이 태그들을 사용하는 방법에 있어서 몇가지 원칙에 대해서 살펴 보고자 합니다. 그런 후에 각 태그에 대한 속성에 대해서 살펴보고자 합니다. 

 

일단, 앞서서 사용했던 간단한 예시를 살펴보겠습니다. 

<!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>h1 : Hello Appia</h1>
 
    <h2>h2 : Hello Appia</h2>
 
    <h3>h3 : Hello Appia</h3>
 
    <h4>h4 : Hello Appia</h4>
 
    <h5>h5 : Hello Appia</h5>
 
    <h6>h6 : Hello Appia</h6>
  
</body>
 
</html>
 cs

 

위의 코드에서 간단히 보면 몇가지 부분들을 확인할 수 있습니다. 바로 <head> ~ </head>로 구성이 되고, <body> ~ </body>와 같이 시작과 끝을 알리는 부분이 존재합니다. 즉 쉽게 간단히 이야기 하면 요소들을 표현하기 위해서는 각 부분들을 표현하기 위한 시작점과 표현을 다했다는 종료 지점을 나타내야 합니다. 이 시작을 나타내는 태그(Tag)를 통해 Element을 구별할 수 있습니다. 물론, 모든 Element들이 시작 태그와 종료 태그로 구성되지는 않습니다. 다음과 같은 항목의 태그들은 별다른 부분 없이 사용이 가능합니다. 

 

<img.../>, <hr />, <br /> 

 

한가지 부분을 더 이야기 하자면, 요소라고 하는 Element안에는 Element가 존재할 수 있습니다. 쉽게 생각하면, <body>~ </body>안에는 <h1>~<h2>이 존재할 수 있습니다. 

 

각 Element들에는 속성을 설정할 수가 있습니다. 저희가 앞서서 봤던 부분에 대해서는 속성을 입력하지 않았습니다. 하지만, 이제는 그 방법에 대해서 한번 살펴보도록 하겠습니다.

 

흔히 속성은 크게 Name과 Value로 구성이 됩니다. Name을 설정할 속성의 이름을 말하고, Value는 그 속성의 값을 입력한 것을 의미합니다. 그럼 각 Elements에 적용하는 속성에 대해서 간단히 이야기 해보겠습니다. 

 

Name Value  Description
align left, right, center 양 옆 정렬
valign top, bottom, middle 위아래 정렬
bgcolor RGB 값, 10, 16진수 수 각 Element의 배경색 설정

 

그럼 간단히 태그(Tag)에 속성을 입력한 예시를 한번 살펴보도록 하겠습니다. 

<!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 align = right>right 표현</h1>
    
    <h1 align = center>center 표현</h1>
    
</body>
 
</html>
 cs

위와 같이 h1에 align은 속성이 name이 되고, right / center는 value 가 됩니다. 이부분을 한번 표현하면, 다음과 같은 결과가 나타납니다. 

 

right 표현

center 표현

위에서는 간단한 속성에 대해서 살펴봤습니다. 그럼 가장 많이 사용되는 속성에 대해서 살펴보겠습니다. 

Id Element의 유일성을 확보하기 위해 사용됩니다. 웹페이지 상에서 Element 이름이 동일 시, 유일성을 확보해줍니다. 
Title 각 Element위에서 마우스 커서를 올렸을 때와 같이 관련된 설명들을 명시가 됩니다. 주로, Id와 같은 속성을 나타냅니다. 
Class Element와 CSS와 연결할 때 사용됩니다. 
Style Element내에 CSS 규칙을 정할 수 있습니다. 

이와 같은 부분을 바탕으로 속성을 지정할 수 있습니다. 

 

이번 포스팅에서는 [초보HTML배우기 02]HTML / CSS - 기본 태그(Tag) 구성 원칙 및 속성이라는 포스팅으로 관련된 부분에 대해서 살펴봤습니다. 혹 궁금하신 점이나 무의 사항이 있으면, 댓글 및 방명록에 글남겨주시길 바랍닏. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기  (0) 2020.07.17
[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법  (0) 2020.07.15
[초보HTML배우기 03]HTML - 글자 속성 스타일 적용  (0) 2020.07.13
[초보HTML배우기 01]HTML / CSS - 처음시작 및 기본태그(Tag)  (0) 2020.07.09
[초보HTML배우기 00]HTML / CSS 환경설정 - Visual Studio Code 설치  (0) 2020.07.07
'Programming/HTML&CSS' Related Articles more
Comments