웹프로그램 골격
HTML은 Hypertext Markup Language(하이퍼텍스트 마크업 랭귀지)의 줄임말로 문서와 문서를 연결하는 (하이퍼텍스트) 글자(링크)를 표시(마크업)하는 언어입니다.
로봇을 만든다고 가정했을 때 HTML은 로봇의 뼈대가 되는데 뼈대는 '태그'라고 불리우는 부품들의 결합으로 이루어져 있습니다. 다양한 부품중에서 필요한 부품(태그)을 골라 결합하면 로봇의 골격(HTML)이 완성됩니다.
태그는 '< >' 형태로 감싸서 표시하고 시작태그'< >'와 종료태그 '</ >' 가 한쌍으로 사용됩니다.
<태그> 표현하고자 하는 대상 </태그> : <h1> 제목 </h1>
시작 태그부터 종료 태그까지의 한 묶음이 되어야 정상적인 부품이 되며 이러한 부품을 다른말로 요소(element) 라고 부릅니다. 요소는 기본적으로 시작태그와 종료 태그 한쌍을 이루는데 이미지태그<img /> 처럼 태그 하나만 사용되는 경우도 있습니다.
<img src='이미지 주소' />
<html> 태그는 사용목적에 따라 다양한 종류가 있는데 그 기능에 따라 머리 <head> 태그와 몸통 <body>태그로 나뉘어 작성됩니다. <head> 태그 안에는 화면에 표시되지 않는 웹페이지 정보를, <body> 태그 안에는 화면에 표시되는 웹페이지 내용을 작성합니다.
HTML 코드의 결과를 확인하기 위해 매번 html파일을 저장하고 웹브라우저에서 실행하는 일은 번거로울 수 있습니다.
'jsbin.com' 등의 온라인 코드 실습 서비스를 이용하면 코드의 결과화면을 실시간으로 바로 확인할 수 있기 때문에 편리하게 실습할 수 있습니다.
jsbin.com에 접속하여 좌측의 html 창에 코드를 입력하면 오른쪽창에 실시간으로 결과 화면이 나타납니다.
html에서 주로 사용되는 코드를 하나씩 입력하고 결과화면으로 확인해보면 각각의 태그가 어떻게 작동하는지 쉽게 이해할 수 있습니다.
<head> 태그 안에서 주로 사용되는 태그는 <title>, <meta>, <link>, <script> 입니다.
- <title> : 타이틀바에 입력될 텍스트
- <meta> : 검색 노출에 필요한 문서의 다양한 정보 제공 (인코딩언어, 페이지설명..)
- <link> : 외부 css 파일을 연결할 때 사용
- <script> : 외부 js 파일을 연결하거나 javascript 코드를 입력할 때 사용
<body> 태그 안에서 주로 사용되는 태그는 <h1>, <div>, <img>,<form>, <input>, <button>, <a> 입니다.
- <h1 ~ h6> : 제목 글자를 적을 때 사용( 숫자가 낮을수록 글씨가 큼 )
- <div> : 구역을 나누는 상자를 만듬
- <img/> : 이미지 표시 (속성 - src : 이미지 주소 / width : 이미지 너비 / height : 이미지 높이 / alt : 이미지 설명)
- <form> : 데이터를 전송하기 위한 태그 (속성 - action : 데이터를 전송할 url, method : 데이터 전달방식 get / post)
- <input> : 입력창을 만듬 (타입: text, password, checbox, radio, button, submit, reset, file, hidden, email, url...)
- <button> : 버튼을 생성 (타입 : reset, submit)
- <a> : 다른 주소로 이동하는 링크 생성 (속성 - href : 이동할 주소)
이외에도 매우 다양한 태그가 있지만 일반적으로 많이 사용되는 몇가지 태그만 익혀놓고 나머지는 필요할때마다 검색을 통해 사용하는 것이 효율적입니다.
.
'웹프로그래밍 (HTML)' 카테고리의 다른 글
| HTML 데이터 속성 만들기 (0) | 2022.12.11 |
|---|