HTML 기본문법
- 요소 : <태그>내용</태그> 태그안의 내용까지 포함해서 하나의 요소라고 함
- 태그 : 열린태그, 닫힌태그 사이에 요소의 내용(Contents)가 들어간다.
내용 뿐 아니라 태그안에 새로운 요소를 사용 가능.
부모와 자식 요소
- 상위요소 : 나를 기준으로 나를 감싸는 모든 요소를 말함 + 부모요소를 포함한 개념
- 하위요소 : 나를 기준으로 내가 감싸고 있는 모든 요소를 지칭함 + 자식요소를 포함한 개념
- 부모요소 : 나를 기준으로 바로 위에 있는 요소
- 자식요소 : 나를 기준으로 바로 아래에 있는 요소
빈(Empty) 태그
<tag> // 편리함 HTML1 부터 사용되었음
<tag/> // 조금 더 명확하게 작성 가능
<tag attribute="value">내용</tag>
<img src="이미지경로" alt="이미지의 이름(대체 텍스트"/>
<input type="text">- 대부분의 빈 태그들은 기능과 역할을 온전히 수행항기 위해 속성과 값을 입력함(ex: img, input 태그)
- 태그 내의 속성과 값을 이용하여 기능을 확장시킬 수 있음
글자(Inline)와 상자(Block)
인라인 요소
// 콘텐츠 영역을 설정하는 용도 // 본질적으로 아무것도 나타내지 않음 <span>Hello</span>
- 글자를 만들기 위한 요소, ex) span
- 요소가 수평으로 쌓임
- 하나의 글자처럼 취급됨! 따라서 줄바꿈 행위를 띄어쓰기로 인식함.
- 가로, 세로 사이즈가 컨텐츠 크기만큼 자동으로 줄어듬
- 가로, 세로 사이즈를 지정해도 지정한 크기로 변하지 않음(컨텐츠의 크기)
- margin과 padding은 좌우만 사용가능!
- 인라인 요소안에 블록 요소 사용 불가
블록요소
// 콘텐츠 영역을 설정하는 용도 // 본질적으로 아무것도 나타내지 않음 <div>Hello</div> <div>World</div>
- 상자(레이아웃)을 만들기 위한 요소, ex> div
- 요소가 수직으로 쌓임
- 가로 너비가 부모 요소의 크기만큼 자동으로 늘어남! , 세로는 요소 크기만큼 줄어듬
- 마진, 패딩 위,아래,좌우 모두 적용 가능
- 시각적으로 제어하기 인라인 요소보다 유리
- 블록요소는 하위요소로 블록요소와 인라인요소 모두 사용 가능
HTML 핵심요소
1) div, h1, p, img 태그
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div> <h1>오늘의 날씨</h1> <p>장마 저리가 ㅠㅠ 완전 습함 </p> <img src = "img/rain.jpg" alt="장마"/> </div> </body> </html>
div: 특별한 의미가 없는 구분을 위한 요소(Division)h1~h6: 제목을 의미하는 요소(heading)
- 숫자가 작을수록 더 중요한 제목을 정의
p: 문장을 의미하는 용소(Paragraph)
- 글자가 아닌 문장을 의미하는 블록요소
img: 이미지를 삽입하는 요소(Image)
- source와 alt가 필수 속성임
2) ol,ul,li 태그
<ul> <li>사과</li> <li>딸기</li> <li>수박</li> <li>오렌지</li> </ul> <ol> <li>일번</li> <li>이번</li> <li>삼번</li> </ol>
ul: 순서가 필요없는 목록의 집합(블록요소),
li: 목록 내 각 항목(List Item), 블록요소ul,li는 하나의 세트! 필수적임!ol: 순서가 필요한 목록의 집합(블록요소)
3) a 태그
<a href="http://www.naver.com">NAVER</a> <a href="http://www.goolge.com" target="_blank">google</a>
- a(Anchor)
- 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
- target 속성을 이용하여 새로운 페이지가 어디에 표시될것인지 설정 가능
4) span, br 태그
<p> <span>동해물</span>과 </br> 백두산이 마르고 닳도록 <p>
span: 특별한 의미가 없는 구분을 위한인라인요소
- 특정 텍스트에 스타일 적용을 위해서 사용
br: 줄바꿈인라인요소
5) input 태그
<input type="text" value="미리입력될 값"/> <input type="text" placeholder="이름을 입력하세요!"/> <input type="text" disabled /> <label> <input type="checkbox" /> Apple </label> <label> <input type="checkbox" checked /> Banana </label> <label> <input type="radio" name="fruits" /> Apple </label> <label> <input type="radio" name="fruits" /> Banana </label>
inline-block요소이다.- 왼쪽에서 오른쪽으로 수평으로 쌓이는 인라인 특징도 가지고 있고, 가로 세로 값 지정이 가능하고 , 위 아래 여백도 사용가능한 블록 특징도 가지고 있다.
value: 사용자가 입력하기 전에 미리 입력되어있게할 값placeholder: 어떤 데이터를 입력하라고 사용자에게 주는 힌트disabled: 입력요소 비활성화(입력 불가)label
- inline 요소
- 라벨 가능 요소(input)의 제목
label태그의 자식으로 체크박스 인풋타입을 사용하면 label로 묶여있기 때문에 체크박스가 아니라 제목을 클릭해도 체크박스에 체크됨checkbox: 사용자에게 체크 여부를 입력 받음!
- checked: 미리 체크가 된 상태로 만들고 싶을때
radio: 1개만 선택 가능(중복선택 X)
- name 속성으로 같은 값을 명시하여 그룹화 할 수 있음
5) table 태그
<table> <tr> <td>A</td><td>B</td> </tr> <tr> <td>C</td><td>D</td> <td colspan="2">D</td> </tr> </table>
- 행(Row)과 열(row)의 집합
tr: 행(Row)을 먼저 선언 후td: 열(row)을 선언함
HTML 전역 속성
<태그 title="설명"> </태그> <태그 style="스타일"> </태그> <태그 class="클래스명"> </태그> <태그 id="이름"> </태그> <태그 data-이름="데이터"></태그>
title: 해당 부분에 마우스 커서를 올려놓으면 해당 부분에 대한 정보(설명)이 뜸style: 요소에 적용할 스타일(css)을 지정class: 요소를 지칭하는 중복 가능한 이름id: 요소를 지칭하는 고유한 이름 (중복 X)data: 요소에 데이터를 저장하는 용도, 보통 자바스크립트와 같이 사용됨.
be driven