English
한국어
[HTML 스타터] HTML 태그 규칙
지난 연재에서 HTML을 시작하기에 앞서 필요한 준비물에 대해 살펴보았습니다.✌🏻 Sunblime Text를 다운로드 받는 방법에 대해 알아보았는데요, 오늘은 HTML을 본격적으로 시작해 보겠습니다. HTML에서 빠져서는 안될 태그(Tag)!🙌🏻 태그의 기능과 사용법에 대해 살펴볼게요!🙋🏻♀️
1. TAG… 대체 뭔데? 🤔
HTML에서 태그는 텍스트 또는 이미지가 어떻게 보여져야 하는지 컴퓨터에게 명령하는 명령어라고 생각하면 되어요. 따라서 태그를 사용할때 반드시 지켜야할 룰이 있습니다!
규칙 1. 태그는 항상 시작태그와 마침태그가 있어야해요.
규칙 2. 태그는 <시작태그>, </마침태그> 형식으로 쓰입니다.
우선 두가지 규칙을 기억해두고 이제 html 파일을 한번 만들어 보겠습니다.
2. html 파일 만들기 👏🏻
우선 지난번 다운로드 받은 서브라임을 오픈합니다. 그리고 파일을 html 파일형식으로 저장할게요.
여기서 중요한건 파일이름 뒤에 .html을 붙여야 한다는거! 저는 파일 이름을 hello.html로 배경화면에 저장했습니다.
저장한 hello.html이 잘 저장되었는지 브라우저를 열어 한번 보겠습니다.
브라우저에 바탕화면에 있는 hello.html파일을 드래그 드롭하면 위 화면처럼 하얀색 화면이 보입니다. 파일에 아직 텍스트를 저장하지 않아 화면에 아무것도 보이지 않아요 🤦🏻♀️
3. html의 시작과 끝 🧐
html 태그 규칙을 설명할 때 <시작태그>와 </마침태그>가 한 쌍으로 사용해야 된다고 설명했는데요,제일 쉽게 설명하기 위해 우선 만들어 놓은 파일에 텍스트를 입력해 볼게요. html 태그는 정말 많아서 원하는 기능이 있을 때 구글에 검색하면 원하는 태그를 찾을 수 있습니다. 여기서는 가장 많이 사용되는 태그를 살펴보겠습니다.
위 브라우저에 보여진 hello.html을 흰 종이라고 생각해 볼게요. 먼저 <html>태그로 콘텐츠의 시작과 끝을 지정합니다. 여기에 웹페이지의 모든 콘텐츠를 담을 수 있는 하나의 보여지지 않는 박스를 그려 볼게요. 이 박스를 <body>태그로 이용하여 그려보겠습니다.
<html>
<body>
</body>
</html>
이제 <body>태그 안에 텍스트를 넣을 수 있답니다. 안녕하세요?라는 콘텐츠를 <body>에 넣으면 어떻게 되는지 살펴볼까요?
<html>
<body>
안녕하세요?
</body>
</html>
서브라임에 위 코드를 입력한 후 저장하고 브라우저에서 파일을 열면 안녕하세요?라는 텍스트를 볼 수 있습니다.
다음 연재부터 본격적으로 콘텐츠를 넣으며 다양한 hmtl 태그를 살펴 보겠습니다. 🐒
독자 의견
저자 @alexis 에게 의견 남기기: