0228
HTML
- HTML 은 웹페이지 구조의 뼈대 역할
(Js: 기능 역할 CSS : 인테리어)
HTML의 구조는 ;
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>head : body를 읽기위한 정보들
(브라우저 크기, 목적, 호환 등 )
body : 웹브라우저의 출력 요소들
- head 태그 : 웹페이지 화면에 출력되지 않는 정보들
(link,style,script,meta,title) - body 태그 : HTML 문서의 내용을 담는 태그 대부분의 요소가 body 태그내에 기술
HTML 기본 문법
- 요소 : 태그와 내용
- 중첩 : 중첩관계로 웹페이지의 구조를 표현 함
- 빈 요소 : empty, 속성만 가지고있음 ( 대표적으로 meta ,br , hr ,img ... )
- 속성 : 태그들마다 고유의 속성을 가질 수 있음
- 주석 : 개발자들에게 코드 설명하기위한 글귀 브라우저에는 표시안댐
<TAG> vs <TAG />
태그 종류
<h1~h6></h1~h6> : 제목 태그 (heading) 자동 줄바꿈 기능, h1은 페이지당 하나
<p></p> : 본문 태그 (paragraph)
<br> : 줄바꿈 태그 (break)
<ul></ul><ol></ol> //<li></li> : 목록과 리스트 태그 ul 은 순서가 없음(불렛)
<hr> : 수평으로 된 줄을 그어줌
문자 꾸미기 태그
<b>,<strong>:두껍게
<i>,<em>: 이탤릭체 Emphasized
<del> : 중간 줄
<u> : 밑 줄
form 태그
- 사용자 입력을 받아서 서버로 전송하기위한 양식 태그이다.
(button,text,password,checkbox,radio...)
type="button" : 버튼을 생성함, 특정 기능을 수행할 때 사용
type="text" : 텍스트 입력을 받는 폼 ( ex) ID 작성 )
type="password" : 비밀번호 입력을 받는 폼 ( 안보이게 처리됨 )
type="checkbox" : 여러 선택지 중 여러개를 선택 가능 하게 하는 체크 박스 기능 // 다중 선택
type="radio" : 여러 선택지 중 한개를 선택 가능 하게 하는 라디오 박스 기능 // 단일 선택
type="date" : 날짜 선택
<select> : 선택메뉴를 만드는 태그 <option>과 같이 사용함 (<optgroup>: option태그를 그룹화 )
table 태그
- 표를 만들 떄 사용하는 태그
- 예전엔 레이아웃 사용을위해 작성하였으나, 예전일뿐
<table> : 표를 감싸는 태그 : 속성은 border,cellspacing,cellpading,align,width,height 등
<tr> : 표 내부의 행
<th> : 표 내부 제목 셀
<td> : 표 내부의 셀 : 속성은 colspan rowspan
SEMANTIC TAG
- html 요소는 semantic하게 작성되어야함
- 레이아웃을 이루는 요소에 의미에 맞는 태그 를 사용하자
<header> : 헤더 ( 로고 메뉴 아이템 등 )
<footer> : 푸터 ( 하단 영역 )
<main> : 메인 컨텐츠 영역 페이지당 단 한개의 main
<h1~h6> : 제목
<nav> : 네비게이터 ( 메인 메뉴창)
<aside> : 직접적인 연관이없는 옆에있는 부분 ( 광고,팝업 )
<article> : 요소하나가 의미가있는 영역 ( 기사목록중 단일 기사)
<section> : 의미가 모여있는 영역 ( 기사목록 )
...- Semantic 태그를 사용하는 이유 : SEO, 유지보수성
