자신의 일은 스스로하자

[HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원] 본문

HTML, CSS

[HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원]

힐파르 사막 삼계탕 2021. 6. 27. 13:25
728x90

 

HTML기본 용어 / 구조

HTML은 태그, 요소, 속성으로 이루어져 있습니다. 

태그는 HTML 페이지에서 객체를 만들 때 사용하는 것입니다. 사용할 수 있는 태그는 모두 미리 정해져 있습니다.

이 태그를 사용해 만들어진 객체를 요소라고 부릅니다.

태그에 추가 정보를 부여할 때는 속성을 사용합니다. 사용할 수 있는 속성 또한 W3C재단에서 정의해두었습니다.

 

HTML구조는 아래 사진을 참고해 주세요.

 

 

<!DOCTYPE html> <!--문서 형식 정의-->
<head> <!--HTML문서의 머릿글-->
    <meta> <!--HTML문서의 정보정의-->
    <title>Document</title> <!--HTML문서의 제목-->
</head>
<body>
	Hello HTML <!--HTML 문서 내용(텍스트, 이미지, 동영상 등)-->
</body>
</html>

 

<!DOCTYPE html> 

-> 태그는 웹 브라우저 현재 웹페이지가 HTML5 문서 임을 인식하게 해 줍니다. 반드시 문서의 첫 번째 줄에 있어야 합니다.

<html lang = "en">

->모든 HTML페이지의 루트 요소입니다. lang 속성은 실제 웹 브라우저가 동작하는데 어떤 영향도 끼치지 않습니다.  (검색엔진이 웹페이지를 탐색할 때 해당 웹 페이지가 어떤 언어로 만들어져 있는지 인식합니다.

<head>

->body 태그에서 필요한 스타일 시트와 자바스크립트를 제공하는대 사용합니다.

<title>웹 페이지 제목</title>

->웹 페이지의 제목을 지정합니다.

크롬으로 실행 시 위에 뜨는 제목

<body>

-> 사용자에게 보이는 실제 부분입니다.

HTML 글자 태그

글자 태그는 웹 페이지 내에서 가장 많은 비중을 차지하는 태그입니다.

 

제목 태그

<h1>~<h6> 

-> h는 headin을 의미하며 숫자는 크기 및 우선순위를 나타냅니다.

<body>
    <h1>Hello</h1>
    <h2>Hello</h2>
    <h3>Hello</h3>
    <h4>Hello</h4>
    <h5>Hello</h5>
    <h6>Hello</h6>
</body>

이 코드를 실행하면 아래 사진처럼 출력됩니다.

실행 결과

본문 태그

<p>

-> p는 paragrap의 줄임말이며 단락을 의미하므로 p태그를 사용하면 단락을 만들 수 있습니다.

<br>

-> 줄 바꿈 태그(개행을 의미)

<hr>

-> 수평줄 태그( 가로로 그어지는 줄)

<body>
   <p>HTML 입니다.</p>
    <hr>
    Hello 
    HTML
</body>

p태그를 사용하면 문장이 ' / '에서 마무리 되므로 줄바꿈 태그를 사용 할 필요가 없습니다.

하지만 hr태그 아래 Hello HTML은 br태그가 없기 때문에 body태그안에서 줄을 빠꿔주어도 아래 사진처럼 줄바꿈이 실행되지 않습니다. 

실행 결과

<body>
   <p>HTML 입니다.</p>
    <hr>
    Hello<br>
    HTML
</body>

br코드를 추가해 주어야 원하는 부분에서 줄바꿈이 가능합니다.

실행 결과

앵커태그

<a>

-> 앵커 태그는 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동 할 때 사용하는 태그입니다. (a 태그만으로 이동하는 것이 아닌 href속성으로 이동하고자하는 웹 페이지를 지정해야 이동이 가능합니다.)

<body> 
    <a href="https://www.naver.com/">네이버</a>
</body>

이 코드를 실행시키면 

이렇게 출력이 됩니다. 네이버 문자를 마우스로 클릭하면

이렇게 네이버 페이지로 이동하는 것을 볼 수 있습니다.

 

 

 

스마트인재개발원에서 진행된 수업입니다.

http://www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

728x90
저작자표시 비영리 변경금지

'HTML, CSS' 카테고리의 다른 글

[HTML] #5 HTML 테이블 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #4 HTML 목록 태그 [스마트인재개발원]  (0) 2021.07.05
[HTML] #3_2 HTML 글자 태그 [스마트인재개발원]  (0) 2021.07.05
[HTML] #2 Visual Studio Code / HTML 페이지 생성/ 페이지 작성/ 페이지 실행[스마트인재개발원]  (0) 2021.06.21
[HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원]  (0) 2021.06.01
'HTML, CSS' Related Articles more