이번주 화요일부터 포스코와 코딩온에서 주최하는 웹개발 과정에 참가하게 되었다 3개월이 짧을수도 길수도 있지만 있는 시간동안 최선을 다해서 임해야겠다.
첫날에는 html의 구성요소와 태그들에대해서 배웠다.
html은 집의 구조와 같은 역할이다.
웹 개발에서의 html은 필수 요소이며 html은 프로그래밍 언어가 아닌 마크업(Mark Up) 언어다.
html의 구조
html은 기본적으로 가지고 있는 구조가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>기본적인 틀은 이렇다.
head 부분에는 주로 meta, title, link 등의 태그들이 존재한다.
body 부분에는 웹 사이트에서 보여지는 내용이 존재한다.
우리는 대부분의 내용을 body 태그 안에 작성할 것이다.
head 태그
메타데이터, 즉 데이터를 위한 데이터를 포함하기 위한 태그다.
웹 페이지에 유일하게 존재하는 태그이기도 하다.
html의 기본적인 정보를 담는 태그이며 화면에 표시되지 않는다.
title : 문서의 제목
style : html문서의 style 정보 정의
link : 외부 리소스와의 연결 정보를 정의(css파일과 연계할때 사용)
script : javascript를 정의
meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또는 검색엔진에서 사용
body 태그
body태그는 html문서의 내용을 담는 태그다.
웹페이지를 구성하는 대부분의 요소가 body태그 내에 기술된다.
tag의 종류
html은 많은 tag들이 있는데 하나씩 정리해보자.
h1~h6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>제목을 뜻하는 Heading의 약자로써 h를 사용한다.
자동 줄 바꿈을 지원한다. (제목이기때문에)
대부분 하나의 html에서는 하나의 h1사용을 권장한다
h1이 제일크고 h6가 제일 작다.
p
<p></p>paragraph의 약자로, p를 사용한다.
본문을 적기위한 태그이다.
br
<br></br>
<br/>br은 html내의 줄 바꿈 태그이다
html내에서는 엔터로 줄바꿈을 할 수 없기때문에
(pre 태그안에는 가능하다.) br태그로 줄 바꿈을 해준다.
ul과 ol
<ul></ul>
<ol></ol>ul = 순서가 없는 목록
ol = 순서가 있는 목록
ol은 속성의 사용이 가능하다.
속성에는 type, start, reversed가 있다.
a
<a></a>a태그는 html에서 가장 많이 사용되는 div 태그만큼 많이 사용되는 태그라고 할 수 있다.
Anchor의 약자인 a를 사용한다.
속성값 href에 링크를 줄 수 있으며, a태그 클릭시 href의 지정된 링크로 이동한다.
target 속성은 a태그 클릭시 문서가 열릴 위치를 지정할 수 있다.
input
<input />input태그에는 많은 type이 존재한다
button,text,password,checkbox,radio,date,color,range,file 등등..
http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Types.html
여기에 많은 속성 정보가 있으니 참고하면 좋을 듯 하다.
마무리..
1일차 수업을 통해 html 기본적인 구조들을 익힐 수 있었으며 이전에 html을 공부를 했지만 meta태그에 대한 조금의 이해가 부족했던 부분을 해결했다.
웹개발의 필수요소이자 기본지식인 html을 능숙하게 사용할 수 있게끔 내실을 키우는 것이 중요할 것 같다.
