Computer Security

#1. 태그,속성,태그중첩,빈태그,공백,주석,문서의 기본구조 본문

프로그래밍/HTML & CSS

#1. 태그,속성,태그중첩,빈태그,공백,주석,문서의 기본구조

쿠리 Kuri 2022. 5. 9. 16:39
반응형

태그(TAG) 는  무언가를 표시하기위한 꼬리표,  무언가를 인식하기 위한 이름표 이다.

 

<h1>Hello, HTML</h1>

태그는 보통 이런 형태로 구성된다. ( <h1> 태그이름 h1 ) 

<h1> 을 시작태그 ,  /가 들어간 </h1>을 종료 태그라 한다.  

Hello,HTML  이란 내용이 실제로 화면에 노출된다.

 

<h1>Hello, HTML</h1> 을 전체 다 합쳐, 요소라 부른다.

 

 

속성(ATTRIBUTE)

<h1 id="title">Hello,HTML</h1>

속성은 이름="값"으로 이루어져 있다.

<h1 id="title" class="test">

위 처럼 하나의 태그에 여러 속성을 선언 가능하다. / 또한 속성의 순서는 중요하지않고, 동일한 결과가 나온다.

 

 

태그중첩(NESTING TAGS)

태그 안에 다른 태그를 선언가능하다.

태그를 중첩해서 사용 할 경우 중첩되는 태그는 부모 태그를 벗어나면 안된다.

 

[잘못된 태그 선언]

<h1>Hello,<i>HTML</h1></i>

위 같은경우 <h1>이 먼저 선언되어 부모태그 역할을 수행하는데, 자식테그 <i>가 밖에있으므로 잘못된 선언이다.

 

[올바른 태그 선언]

<h1>Hello,<i>HTML</i></h1>

위와 같이 부모 태그안에 자식태그인 <i>를 먼저 선언을 끝마치고, 부모태그<h1>의 종료 태그를 선언해야 한다.

 

 

 

빈 태그<EMPTY  TAG>

 

태그는 보통 시작태그와 종료태그 두개가 한 쌍으로 존재하는데, 태그중에는 그렇지 않은 태그도 존재한다.

시작 태그만 존재하고 종료 태그가 존재하지 않는 태그들인데, 예를들어

<br>
<img src="">

이 처럼 종료태그가 존재하지 않기때문에, 내용이 들어 갈 수가 없다.

이러한 태그들은 내용이 비어있다 해서, 빈 태그라 부른다.

 

빈 태그는 웹문서에 텍스트가 아닌 이미지나, 비디오처럼 외부 리소스를 삽입하는 경우에 주로 사용한다.

브라우저에게 이미지를 가져올 수 있도록 위치를 알려주는 역할을 수행한다.

위 코드와 같이 src 속성을 이용해서 , 이미지 리소스의 경로를 전달 할 수있다.

 

 

공백(SPACE)

기본적으로 HTML은 한 칸 이상의 공백을 모두 무시한다.

<h1>Hello, HTML</h1>
<h1>Hello,  HTML</h1>
<h1>
  Hello,
  HTML
</h1>

위 세코드 전부, 실행해보면,  몇번 띄어썼냐의 상관없이 Hello, HTML 로 도출된다.

위와 같이 HTML은 보통 한칸 이상의 공백과 개행을 모두 무시한다.

 

주석(COMMENT TAGS)

 

주석은 화면에 개입하지않고, 메모의 목적으로만 사용된다.

HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지않는다.

 

<!--   이렇게 하면, 코드를 인식하지않는다 -->

위와 같이 시작은 <!--   ,  종료는 --> 로 표시한다.

 

 

HTML 문서 구조 (HTML DOCUMENTS)

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
</head>
<body>
  <h1>Hello,HTML</h1>
<body>
</html>

 

<!DOCTYPE html> 이는 이 문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 선언문이다.

문서 내 최상단에 선언되야한다.

<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지 알려준다.

<head> 태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다.

하지만, 문서의 기본정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 수행한다.

<meta>태그의 charset속성은 문자의 인코딩 방식을 지정한다.

<body>태그에는 실제 브라우저 화면에 나타나는 내용들이 들어간다.

 

반응형

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

#6 단위, 배경, 박스모델  (0) 2022.05.31
#5 CSS 이해하기 (가상선택자,구체성,상속,캐스케이딩)  (0) 2022.05.24
#4 CSS 이해하기 (선택자)  (0) 2022.05.23
#3 HTML 폼,시멘틱마크업,블록&인라인  (0) 2022.05.18
#2 HTML 태그  (0) 2022.05.17
'프로그래밍/HTML & CSS' Related Articles more
Comments