728x90
HTML5의 기본적인 태그의 입문과 속성
먼저 HTML5를 공부하기위해서는 기본적으로 가장 중요한 몇가지 요소 '태그Tag', '요소Element', '속성Attribute'이라는 용어를 알아야할 필요가있다고 생각한다. 그래서 저번에는 HTML로 웹사이트를 구축하기위해 VISUAL STUDIO CODE라는 프로그램을 설치하였다면 한발 더 나아가 가장 중요하고 필수로 알아야할 용어들을 정리해보려한다. 여기서 먼저 알아야할 태그Tag와 요소Element의 정의에대해서 먼저 간단히 설명하려한다. 기본적으로 코딩에서 태그는 HTML 페이지에서 객체를 만들때 기본적으로 사용한다는 점이고 태그를 사용해 만들어진 객체를 요소라고 부른다. 예를들어 아래와같이 가장 기초적인 태그의 속성을 조금 더 자세하게 소개하려한다. 특히 HTML은 웹 브라우저의 형태로 웹 페이지를 컨트롤하다보니 사실상 이부분이 이해가없다면 전반적인 웹 제어가 불가능하다고생각한다. HTML5페이지는 사용자에게 보이는 뷰와 사용자에게 보이지않는 코드로 나눈다는 부분은 확실히 인지하고 있어야할 필요가있다.
<h1>Website HTML5</h1>
:여기서 <h1>는 시작태그를 의미하며 </h1>는 끝태그를 의미한다. 이런식으로 시작태그와 끝태그를 별도로 입력하는 요소이다. 하지만 이러한 경우도 있다. 시작태그와 끝태그를 함께 입력하는 요소이다. 이렇게 단독으로 사용하는 태그는 HTML5 표기법과 XHTML5표기법을 사용해 입력해야한다.
<br> <br/>
:첫번째 내용과 약간 다른 표기법이다. 여기에서는 <br>과 <br/>은 HTML5표기법이다. 사실상 어떠한 표기법이던 크게 상관은 없지만 대다수의 개발자들은 XHTML5표기법을 더 선호하기 마련이다. 아, 특히 아래 예시같은 경우는 article태그 내부에 h1태그와 p태그를 삽입한 형태라고 보면된다. 여기서 "일부 태그는 태그내부에 다른 태그를 넣을 수 있습니다"라는 말은 "태그 내부에 다른 태그를 넣지 못할 수도 있다"라는 의미와 같으므로 다시한번 확인해야할 필요가있다.
<article>
<h1>Article Header</h1>
<p>Hello this is daniel.</p>
</article>
다음으로는 속성에대해 한번 알아볼것이다. 코딩에서는 태그에 추가 정보를 제공할때 속성을 사용하게된다. 여기서 속성이라함은 아래와같은 예시를 뜻한다. h1태그에 title 속성을 부여하는 간단한 코드이다.
<h1 title(속성이름)="header(속성값)">Hello HTML5</h1>
<img src(속성이름)="image.png(속성값)"/>
여기서 src속성을 사용해 어떠한 이미지를 출력할지 관련된 정보를 제공하게되고 따라서 img태그는 그림으로 만들 때 사용하는 속성이다.
다음으로 살펴볼 것은 주석이라는 것이다. 사실상 기본적인 프로그램이아닌 규모가 커지는 상황에서는 직접 작성한 코드도 어떤 목적으로 작성했는지 확인하기가 쉽지만은않다. 그래서 먼저 어떠한 기능을 수행하는 코드인지 설명할 수 있는 방법도 필요하다. 여기서 중요한 것은 프로그래밍 언어에서는 프로그램의 실행에 어떠한 영향을 미치지않고 설명을 위한 목적으로 사용하는 코드를 바로 주석이라고 부른다. 사실상 주석이있으므로써 더욱 더 편하고 수월하게 작업을 할 수 있다는것이다. 예를들면 아래와같이 기본코딩틀로 정리해볼수 있다.
<!-- 주석 -->
<!doctype html>
<html>
<head>
<!-- title 태그 -->
<title>TITLE</title>
</head>
<body>
<!-- h1 태그 -->
<h1>Hello HTML5</h1>
</body>
</html>
'IT_웹개발언어 > IT·HTML' 카테고리의 다른 글
| [IT·HTML+CSS] HTML5페이지 구조와 LANG 언어 속성/ 속성값 + 글자태그(1) (0) | 2021.07.01 |
|---|---|
| [IT·HTML+CSS] 웹의 역사:: 월드와이드웹(World Wide Web)을 자세히 파헤쳐보다. (0) | 2021.07.01 |
| [IT·HTML+CSS] HTML을 위한 VISUAL STUDIO CODE(비쥬얼스튜디오코드) 설치방법 (0) | 2021.06.30 |
| [IT·HTML+CSS] HTML에 꼭 필요한 기본태그 의미 정리와 사용예시 (0) | 2021.06.23 |
| [IT·HTML+CSS] HTML(Hypertext Markup Language)ㅣ시장 Market (0) | 2021.06.22 |