Kudos
Collect
Twiiter
Facebook
Share

[HTML 스타터] HTML 태그 규칙

마지막 업데이트 3년 전
2 0 0 0
이 글은 시리즈 ‘HTML 스타터’ 의 2 번째 포스팅입니다. 시리즈 더보기

지난 연재에서 HTML을 시작하기에 앞서 필요한 준비물에 대해 살펴보았습니다.✌🏻 Sunblime Text를 다운로드 받는 방법에 대해 알아보았는데요, 오늘은 HTML을 본격적으로 시작해 보겠습니다. HTML에서 빠져서는 안될 태그(Tag)!🙌🏻 태그의 기능과 사용법에 대해 살펴볼게요!🙋🏻‍♀️

1. TAG… 대체 뭔데? 🤔

HTML에서 태그는 텍스트 또는 이미지가 어떻게 보여져야 하는지 컴퓨터에게 명령하는 명령어라고 생각하면 되어요. 따라서 태그를 사용할때 반드시 지켜야할 룰이 있습니다!

규칙 1. 태그는 항상 시작태그와 마침태그가 있어야해요.
규칙 2. 태그는 <시작태그>, </마침태그> 형식으로 쓰입니다.

우선 두가지 규칙을 기억해두고 이제 html 파일을 한번 만들어 보겠습니다.

2. html 파일 만들기 👏🏻

우선 지난번 다운로드 받은 서브라임을 오픈합니다. 그리고 파일을 html 파일형식으로 저장할게요.
여기서 중요한건 파일이름 뒤에 .html을 붙여야 한다는거! 저는 파일 이름을 hello.html로 배경화면에 저장했습니다.

서브라임에서 html파일 저장하기
서브라임에서 html 파일 저장하기

저장한 hello.html이 잘 저장되었는지 브라우저를 열어 한번 보겠습니다.

브라우저에 저장한 html파일 열어보기
브라우저에 저장한 html파일 열어보기

브라우저에 바탕화면에 있는 hello.html파일을 드래그 드롭하면 위 화면처럼 하얀색 화면이 보입니다. 파일에 아직 텍스트를 저장하지 않아 화면에 아무것도 보이지 않아요 🤦🏻‍♀️

3. html의 시작과 끝 🧐

html 태그 규칙을 설명할 때 <시작태그></마침태그>가 한 쌍으로 사용해야 된다고 설명했는데요,제일 쉽게 설명하기 위해 우선 만들어 놓은 파일에 텍스트를 입력해 볼게요. html 태그는 정말 많아서 원하는 기능이 있을 때 구글에 검색하면 원하는 태그를 찾을 수 있습니다. 여기서는 가장 많이 사용되는 태그를 살펴보겠습니다.

위 브라우저에 보여진 hello.html을 흰 종이라고 생각해 볼게요. 먼저 <html>태그로 콘텐츠의 시작과 끝을 지정합니다. 여기에 웹페이지의 모든 콘텐츠를 담을 수 있는 하나의 보여지지 않는 박스를 그려 볼게요. 이 박스를 <body>태그로 이용하여 그려보겠습니다.

<html>
    <body>

    </body>
</html>

이제 <body>태그 안에 텍스트를 넣을 수 있답니다. 안녕하세요?라는 콘텐츠를 <body>에 넣으면 어떻게 되는지 살펴볼까요?

<html>
    <body>
        안녕하세요?
    </body>
</html>
html 콘텐츠 넣어보기
html 콘텐츠 넣어보기

서브라임에 위 코드를 입력한 후 저장하고 브라우저에서 파일을 열면 안녕하세요?라는 텍스트를 볼 수 있습니다.

다음 연재부터 본격적으로 콘텐츠를 넣으며 다양한 hmtl 태그를 살펴 보겠습니다. 🐒

Hi, it's Alexis here! I recently began studying coding (basically HTML) and thought I can share some of infos (that I've been learning so far) with some of you who just stepped into this world. I will be posting the basics of HTML and others including stuff like "Mac How to..."

연재
HTML 을 처음 접하는 분을 위하여 최대한 알기 쉽게 설명하려고 노력하였습니다. HTML 을 공부해야 하는데 알기쉬운 설명의 교재를 찾지 못한 분들에게 도움이 되면 좋겠습니다.
Essedrop - 이미지 주소를 만드는 가장 빠른 방법
 

독자 의견

저자 @alexis 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.