Dog foot print

HTML 기본구조와 태그(1) 본문

HTML

HTML 기본구조와 태그(1)

개 발자국 2019. 6. 27. 16:49

시작하며 

 

html은 브라우저에서 웹페이지를 만들기 위해서 만드는 골조구조와 같은 역할을 한다. 이 html은 Hyper text markup language의 약자로 programming language(java, jvascript,c, c++등) 과 달리 연산이 불가능 하다. 그렇기에 동적인 웹페이지를 만들려면 html과 더불어 동적언어인  javascript를 사용하여 각 버튼이나 입력창이 동작케하도록 해야한다. 

 

html은 프로그래밍을 처음 접하는 사람들도 단 기간에 익히기 쉬운 언어이기에 나는 보통 처음 프로그래밍을 접하는 사람들에게 c언어나 자바를 접하기 보다 html 을 먼저 접해서 본격적으로 프로그래밍을 접하기 전 공부할 수 있는 흥미가 돋았으면 한다. 

 

나는 마이크로소프트에서 제공하는 visual studio code를 사용하며 html파일을 저장할때는  파일명.html로  저장하면 된다. 

 

html의  기초뼈대

<!DOCTYPE html>
//html은 문서에 html을 선언함으로써 시작된다.
<html>
//html선언 후 사용할 html태그 사용 일부 몇개의 태그를 제외하고는 less than sign, 으로 태그명을 감싸고 시작 후 /를 사용하여 다시 태그를 닫아줍니다.
	<head>
		<title></title>	//브라우저에있는 탭창에 명시 할 이름 
	</head>
<body>
	//실질적으로 웹에 보여지는 공간. 
</body>
</html>

<태그> 이렇게 생긴 것들을 html에서 태그라고 한다. 위의 코드를 보면 <!DOCTYPE html> 을 제외한 태그들이 <태그명></태그명>이렇게 열고 닫히는 것을 볼 수 있는데 태그를 선언할 때는 꺽쇠안에 태그명을 넣고 열고 닫을때는 태그명 앞에 ' / ' 슬래쉬를 넣어 닫는다.

 

천천히 위의 태그를 보면 <!DOCTYPE html> 이라는 태그로 시작한다. 이 태그의 의미는 " 이 문서는 지금부터 html입니다. " 라고 선언하는 것이다. 

 

선언이 끝나면 <html>태그를 선언하여 이 안에 태그를 작성 할 수 있도록 한다.

 

처음으로 만나는 <html>태그 이후 처음 만나는 <head>태그는 css파일이나 script파일 ,meta 태그등 실제로 웹페이지에서 실제로 보이는 것들이 아닌 정보들을 담고 있는 태그다. (지금은 css나 script, meta태그가 뭔지 몰라도 된다. 중요한 것은 정보를 담는 부분이다.)

 

<head> 태그 안에는 <title> 태그가 있는 것을 볼 수 있는데 이 태그 사이에 무언가를 적으면 웹페이지에는 아무런 변화가 없으나 페이지의 탭창을 보면 무엇인가 변한것을 볼 수 있다. 

 

<title>NAVER<title> 작성한 결과 

 

<title> 태그는 이 처럼 웹페이지 가 아닌 탭창에 나타나는 텍스트를 변경할 수 있는 태그이다. 그러고 보니 <title>NAVER</title>이라고 태그 사이에 Naver를 적으니 화면에 입력되었다. 그렇다, 태그를 이용해서 텍스트모양을 변경하거나 입력하려면 태그 사이에 무언가를 작성하면된다.

 

<title>태그가 끝이나 <head>태그가 끝이났다. 그리고 마주하는 것은 <body>태그인데 이 <body>태그 안에는 실제로 웹페이지에서 보여지는 것들을 작성하는 곳이다.

 

<body>
	안녕하세요 ! 자스민입니다. 
</body>

 

이렇게 body태그안에 텍스트를 적으면 어떤 일이 일어날까 ? 

body태그안에 안녕하세요 ! 자스민 입니다. 를 적은 결과

 

이 처럼 웹페이지에 우리가 작성한 텍스트가 그대로 나오게 된다. 

 

 제목을 표시하는 h1~6 태그

이 포스트를 이렇게 간단하게 끝내려니 너무 아쉽고 간단하다. 그래서 제목을 표시하는 h 태그들을 익히고 사용해보도록 하자.

 

 h태그는 h1 ~ h7까지 있다. h태그들은 제목을 작성하거나 중요한 부분을 강조할때 사용하며 태그들을 사용한 결과들은 다음과 같다.

 

<body>
    <h1>h1태그</h1>
    <h2>h2태그</h2>
    ...
    <h6>h6태그</h6>
</body>

h1태그

h2태그

h3태그

h4태그

h5태그
h6태그

 

h태그의 숫자가 커질수록 폰트의 크기와 굵기가 약해지고 숫자가 작을수록 폰트의 크기와 폰트의 굵기가 굵어진다. 

 

정리하며

html을 처음 접하여 꺽쇠와 영어들 사이에서 무서움을 느꼇다면 전혀 그럴필요없다. 마음을 가라앉히고 위의 나오는 코드를 본인의 html 파일에 복사 붙여넣기해서 코드안에 텍스트라도 바꾸어보았다면 여러분은 이제 태그를 활용해서 텍스트를 꾸밀 수 있는 단계를 클리어 하게 된 것이다. 

 

 

 

반응형

'HTML' 카테고리의 다른 글

[html] 다양한 input  (0) 2019.07.05
div와 태그에 style속성 추가하기  (0) 2019.06.30
HTML 에서 사용하는 다양한 태그들(2)  (0) 2019.06.27
'HTML' Related Articles more
Comments