5일차~(HTML의 기초)

오늘은 HTML이 무엇인지 어떤 형식이고 어떻게 작동하는지에 대해 배웠다. 어제의 반복문에 비하면 무척 쉬운 내용이었다.  오늘 스터디 그룹에 들어가게 되어서 내일부터 스터디 그룹 활동을 하게 되었다. 학습 내용이나 코플릿을 주로 할 것 같다.

 

HTML

• HTML은 웹의 구조나 뼈대를 구현하는 마크업 언어이다.
• 기본적으로 tag의 집합으로 이루어져 있다.
• tag는 부등호로 묶여져 있고 부모와 자식의 구조를 가진 Tree structure이다.
• 기본적으로 opening tag와 closing tag는 쌍으로 같이 쓰이지만 opening tag와 closing tag의 내용이 없다면 closing tag를 생략 가능하다.(<tag/>)

//tag
<button id="push">push here</button>

HTML의 기본구조는 위와같다.

• <>로 묶여져 있는것이 tag이며 앞의 tag가 opening tag, 뒤의 tag가 closing tag이다.
• opening tag 안에 있는 id="push"는 tag의 attribute를 나타내며 ""안에 있는 push가 attribute name이다.(종합 문제에서 틀린건 함정...)
• opening tag와 closing tag 사이에 있는 push here은 content이다.

<div> VS <span> VS <p>

<div>

• 한 줄 전부를 차지한다.
• 영역만 구분할뿐이다.
• 줄바꿈이 된다.

<span>

• content의 크기만큼만 차지한다.
• 줄바꿈이 되지않고 뒤에 다른 tag를 붙일 수 있다.

<p>

• 문단의 영역을 나타내는 tag이다.
• tag의 위와 아래로 마진이 생긴다.

<주요 tag>

<img>

<img src="" alt="">

• <img>는 이미지를 삽입하는 tag이다.
• closing tag가 필요 없다.
• src는 source의 약자로 이미지의 링크가 들어간다.
• alt는 이미지가 깨졌을 경우 표출될 것을 적어놓는다. 

<a>

<a herf="" target="_blank">content</a>

• <a>는 하이퍼 링크를 사용할 때 쓰인다.
• herf 안에 링크를 걸 주소를 적는다.
• target="_blank"는 페이지를 이동시키지 않고 새로운 탭을 생성할 때 쓰인다.

<ul>, <ol>, <li>

<ul>
	<li>
	</li>
</ul>

<ol>
	<li>
	</li>
</ol>

• <ul>은 unordered list의 약자이며 순서가 필요없는 리스트를 만들 때 쓰인다.
• <ol>은 ordered list의 약자이며 리스트에 순서가 필요할 때 쓰인다.
• <li>는 list item의 약자이며 리스트를 나열할 때 쓰인다.
• <ul>, <ol> 안에는 <li>만 사용가능하며 <li>안에는 다른 tag 사용이 가능하다. 

<textarea>

<textarea cols="" rows="">

• <textarea>의 글 입력 창에 줄바꿈이 가능하다.
• cols와 rows로 글 입력 창의 크기를 조절할 수 있다.

<button>

<button>content</button>

• <button>은 content라는 버튼을 만들 때 쓰인다.

<input>

<input type="">

• <input>은 입력 값을 입력받는 창을 생성할 때 쓰인다.
• type은 text, email, password, date, time등 많은 종류가 있다.

<input>의 type
type	설명
text	글을 입력받는 창을 생성한다.
email	이메일을 입력받는 창을 생성한다.
password	비밀번호를 입력받는 창을 생성한다.
date	날짜를 입력받는 창을 생성한다.
time	시간을 입력받는 창을 생성한다.
color	색을 입력받는 창을 생성한다.
file	파일을 첨부하는 창을 생성한다.
number	숫자을 입력받는 창을 생성한다.