민둥 개발자의 계발 블로그

HTML 사용하기! HTML 태그(Tag) 종류#1 본문

Study/HTML

HTML 사용하기! HTML 태그(Tag) 종류#1

민둥산의 민둥이 2022. 4. 5. 23:48

 우선 HTML이라는 파일을 생성하기 위해서는 전에 설치한 Eclipse(혹은 다른 IDE)를 사용한다면 간편하게 생성할 수 있지만, 웹 표준 언어답게 어떤 텍스트 편집기에 사용하더라도 HTML 파일을 생성할 수 있습니다. 메모장 같은 간단한 파일도 가능합니다. 우선 IDE를 사용하면 자동완성 등의 기능을 사용할 수가 있지만, 태그를 직접 사용하는 것에 익숙해 지기 위해 메모장을 사용하여 HTML 파일 생성을 연습해 나갈 겁니다.

 

메모장에 HTML 파일 생성하는 법

  1. 윈도우 검색창에서 메모장을 검색 후 클릭하여 오픈합니다.
  2. <html>/html> 태그를 그대로 씁니다. 이 태그가 꼭 필요한 이유는 메모장에게 지금 쓰는 파일이 html이라는 것을 알려주기 때문입니다. 안의 내용은 없더라도 일단 저장해봅니다(사실 더 필요함).
  3.  저장 버튼 혹은 Ctrl+S를 누르고 파일명을 Firstfile.html 이라고 이름 붙입니다. 이름은 상관없지만 뒤에 붙는. html 이 중요합니다! 메모장에는 기본적으로. txt 파일로 저장되기에 html로 바꿔주셔야 웹 페이지로 열 수 있습니다. 그리고 인코딩이라고 적힌 곳에 UTF-8(기본 설정)을 UTF-8(BOM)으로 변형하고 저장버튼 클릭.
  4. 이제 저장된 파일의 경로에 가서 파일을 웹 브라우저(저는 크롬 사용합니다)로 열면 html 생성 및 확인 완료!

 

 만약 HTML을 수정하고 싶으신데 저장된 경로에 파일 형식이 웹 브라우저(Chrome/MS) 등으로 되어있다면 파일 우클릭 -> 다른 연결프로그램 선택 -> 메모장 선택해서 열 수 있습니다. 그럼 이제 HTML을 저장하는 방법을 배웠으니 조금 더 그럴듯한 모양을 만드는 것을 알려 드리겠습니다.

<html>
 <head>
 <title></title>
 </head>

 <body>
 </body>
</html>

일단 위의 형식처럼 가장 기본적인 구성을 하는 태그들이 4개 보이시나요? <html>, <head>, <title>, <body> 이렇게 4개가 꼭 있으셔야 합니다. 그리고 큰 태그들이 작은 태그들을 감싸고 있는 느낌이죠. 태그 순서를 잘못 입력하여 큰 태그가 작은 태그들을 감싸지 않으면 오류가 생깁니다.

틀린 예시)<html><head></html></head>

바론 예시)<html><head></head></html>

 

 또한! 코딩을 할 때에는 가독성이 매우 중요하기에 들여쓰기를 꼭 해주시는 게 좋습니다. 자세히 보시면 <html> 태그 다음 문단에 한 칸 띄우고 <head>라고 써져 있죠. 이처럼 태그를 쓰실 때에는 감싸고 있는 태그가 더 왼쪽에 있도록 만들면 html의 구조가 더 한눈에 보기 쉽습니다.

 

 HTML은 일단 <head>와 <body> 로 나뉘는데요

head에는 웹 페이지 자체의 정보가 들어가고 body 에는 HTML의 내용이 들어갑니다. head에 들어가는 대표적인 예시로는 웹 페이지의 상단에 보이는 이름을 지정하는 <title></title> 태그가 있겠네요. Body에서는 웹 페이지의 제목과 글, 이미지 등 대부분의 웹 페이지 작업이 이루어집니다.

 

Body 태그 안에 들어가는 태그의 종류

 <hn></hn> tag (여는 태그와 닫는 태그에 들어가는 숫자가 같아야합니다!)

  • 실제로 사용될 때는 n 자리에 1~6의 숫자가 들어갑니다.
  • ex) <h1></h1>, <h2></h2>
  • 제목을 구성할 때 쓰이는 태그로, 글씨를 키워주고 굵게 하며 바로 밑에 한 줄 크기의 줄을 띄워줍니다.
  • header(1~6)의 약자로, 번역하면 제목입니다. 

<p></p> tag - 문단 태그

  • 문단을 묶어주는 역할을 합니다.
  • 문단 태그가 끝이나고 한줄을 띄워줍니다.
  • paragraph의 약자로 문단이라는 뜻입니다.

<br> tag - 줄바꿈 태그 

  • HTML 내부에서 Enter키를 사용하여 문장 줄바꿈이 불가능한데 그 역할을 <br>태그로 대신 합니다.
  • 거의 아무 위치에서나 사용가능합니다.
  • 닫는태그가 없습니다.
  • break의 약자로, 부수다,끊다~ 라는 뜻입니다.

<hr> tag - 수평선 태그

  • 수평선을 생성하는 태그입니다.
  • 선으로 문단이나 문장을 더 확실하게 나눌 수 있습니다.
  • horizon 혹은 horizontal의 약자로 수평이라는 뜻입니다.

<pre> tag - 자유롭게 쓰는공간

  • 자유롭게 줄바꿈과 한칸 띄우기가 가능한 문단을 만들 때 사용합니다.
  • HTML 코드 내에서 다양하게 띄워져 있기에 가독성이 떨어지고 잘 사용하지 않습니다.
  • 고정 글꼴로 정해져 있어서 글꼴을 바꾸지 못합니다.
  • performatted text의 약자로 미리 형성된 형식이라는 뜻입니다.

 

HTML에 각 태그들을 직접 사용하여 태그에 대한 설명을 넣은 아래의 웹 페이지를 만들었으니 위의 태그들을 사용하여 한번 도전해보세요! 코드는 다음 포스트에서 공개하겠습니다. 소스 보기 금지!

html first.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; }

html

Hyper Text Markup Language.
웹페이지를 만드는 언어.
웹페이지의 구조를 담당.
명령(tag)으로 구성되며 tag는 각괄호 안에 들어가며 시작 tag와 종료 tag의 한 쌍으로 이루어짐.

body안의 tag들

br - 줄바꿈
hr - 수평선
p - 문단
hn - 제목글자(n=1~6)
pre - 공백을 살려주는 태그

hn - 제목글자(n=1~6)

h1 tag 입니다

h2 tag 입니다

h3 tag 입니다

h4 tag 입니다

h5 tag 입니다
h6 tag 입니다
          pre tag 입니다
    공백을        그대로


  살려서 나타냅   니   다
	(고정폭글꼴로 나타남)

풀꽃

                            나태주

자세히 보아야 예쁘다
오래 보아야 사랑스럽다
너도 그렇다

 

 

 

 

반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

HTML#4 정답 공개 및 추가 문제!  (0) 2022.04.18
HTML#4 테이블 만들기!  (4) 2022.04.12
HTML 연습! 심심해서 직접 해보았습니다!  (2) 2022.04.11
HTML 태그#3 목록 태그 및 특수문자 출력!  (0) 2022.04.11
HTML 태그(TAG)#2 글꼴을 바꾸는 태그  (2) 2022.04.10
'Study/HTML' Related Articles more
Comments