HTML

HTML - 태그의 이해

태그란?

HTML을 이해하려면 태그를 먼저 알아야 합니다.

그럼, 태그에 대해 알아봅시다!

HTML의 몸, 태그

HTML은 태그만 아신다면 더 이상 추가로 배우실 것은 없습니다.

그러면, 이제 태그가 무엇인지 이해하기 전에, 한번 밑의 코드를 직접 손으로 짜 봅시다.

 

우선, File을 누르고 가장 위에 있는 New File 버튼을 클릭해줍니다.

그리고 이름은 index.html 이라고 해줍니다.

index.html에서 .html 부분을 확장자라고 합니다. 확장자에 관해서는 나중에 자세히 살펴보겠습니다.
그 후, 다음과 같은 코드를 직접 입력해 보도록 하겠습니다.
<!DOCTYPE html>
<html>
    <body>
        Coding with int!
    </body>
</html>

소스를 직접 짠 후, ctrl + s 키를 눌러 원하는 위치에 선택 후 저장합니다.

그리고 웹 브라우저를 연 후에 ctrl + o 키를 눌러 방금전에 저장한 파일을 열면 

Coding with int!

가 출력되는것을 보실수 있습니다.

이제 여러분은 웹 사이트를 만드신 겁니다.

이제 이 코드를 분석해 보도록 하겠습니다.

<!DOCTYPE html>에서 DOCYTPE html 은 이 html 문서가 어떤 버전으로 작성 됐는지 정의하는 역할을 합니다. 이때 DTD를 활용하는데, DTD는 Document Type Declaration의 약자 입니다.

그러면 이제 본격적으로 태그를 분석해 봅시다.

태그는 <html> 과 </html> 같은것입니다.

 

 

 

태그는 아래와 같이 정리할 수 있습니다.

검색결과

웹의 추천 스니펫

태그(Tag)란 HTML문서를 구성하는 명령어입니다.
알파벳이 모여서 단어를 이루듯 태그가 모여서 웹 사이트를 이룹니다.

그러면 태그가 어떻게 생겼는지 한번 볼까요?

태그는 여는 태그와 닫는 태그로 이루어져 있습니다.

여는 태그를 위의 코드를 예시로 들자면, <html> 이라고 할 수 있습니다.

또한, 닫는 태그는 </html> 이라고 볼 수 있죠.

태그는 열리는 부분과 닫히는 부분 사이에만 영향을 줍니다.

 

그러면, 이제 태그를 알아 보았으니 다시 소스를 분석하여 볼까요?

 

<html>과 </html> 사이에 있는 것들은 html 태그의 효과로 html 코드가 됩니다.

쉽게 말해서 저 태그가 '저 태그 안에 있는 내용은 html이다.'라고 정의해주는 거죠.

그러면 이제 저기다가 어떤것을 쓰든지간에 저기에 쓰이는 언어는 html로 인정됩니다.

 

그러면 body 태그를 볼까요?
body는 알고 계시겠지만 '몸'을 뜻하는 영어 단어입니다.

 

여기서 잠깐 html의 파츠를 알려드리겠습니다.

html은 head와 body로 이루어져 있습니다.

head는 가장 위, 그리고 body가 몸입니다.

그러니까 저 코드는 Body에 Coding with int! 를 출력하도록 되어있는것이죠.

이제 다음 시간에는 본격적으로 코드에 종류에 대해서 알아 보도록 하겠습니다.

감사합니다.

댓글

댓글 본문
버전 관리
int
현재 버전
선택 버전
graphittie 자세히 보기