Web 의 기본 구조
HTML5 & CSS3 소개
HTML 개요
•
HTML은 Hypertext Markup Language의 약자
•
web에서 사용하는 문서 양식
•
문서를 웹브라우저에 표현할 때 tag를 사용
웹표준
•
모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하기 위해 표준을 지정함
•
HTML5가 웹 표준으로 지정되어있음
HTML5의 특징
•
Offline Web을 만드는 것이 목적 ( 마크업 + JS API ← local Storage )
•
멀티미디어 요소 재생
◦
HTML5에서는 멀티미디어 요소를 별도의 플러그인 없이도 재생 가능
•
서버와 통신
◦
서버와 클라이언트 사이에 소켓 통신이 가능
•
Semantic tag 추가
◦
웹사이트를 검색엔진이 좀 더 빠르게 검색할 수 있도록 특정 tag에 의미를 부여하는 방식
◦
예를 들어 <header>tag는 문서의 주제를 나타내는 tag로써, <header> tag가 사용된 웹 문서의 경우 검색엔진은 웹문서의 모든 내용을 검색하는 것이 아닌 <header> tag의 내용만을 검색해서 보다 빠르게 검색을 진행할 수 있다.
•
form 관련 요소 강화,추가
◦
date, month, week 등이 추가됨 (옛날에는 <p> 밖에 쓰지 못했음)
HTML의 문서 구조
•
<!DOCTYPE html> tag는 현재 문서가 HTML 문서임을 정의
•
시작 tag(<tagname>)와 종료 tag(</tagname>)가 있으며, tag 사이에 문서 내용을 정의
•
각 tag는 고유의 의미를 가지고 있으며, 웹브라우저는 이 의미에 따라 문서를 화면에 표시
•
<html> , </html> 을 root tag, root element라고도 함
HTML 기본
•
HTML5 웹 문서를 구성하는 3가지 요소
1.
HTML : 구조, 웹 페이지 문서 담당
2.
CSS : 표현, 웹 페이지 디자인 담당
3.
JS : 동작, 웹 페이지의 이벤트 담당
•
마크업 언어(markup language)로 웹 문서를 작성하며, tag를 사용하여 문서의 구조 등을 기술
tag와 속성
•
HTML 문서는 tag로 만들어진다.
•
HTML 문서의 전체 구성은 html, head, body tag로 구성
•
tag는 시작 tag와 종료 tag로 쌍을 이루거나, 시작 tag만 존재하는 tag도 있다.
•
시작 tag(<tagname>)와 종료 tag(</tagname>)는 '/'로 구분하며, 중첩되지 않도록 한다
◦
시작과 종료 tag : <body> ... </body>
◦
시작 tag만 있는 경우 : <br/>, <hr/>, <img/>
•
각각의 태그는 속성과 값이 존재한다.
•
HTML tag에는 어느 tag에나 넣어서 사용할 수 있는 글로벌 속성(global attribute)이 있다.
◦
class - tag에 적용할 스타일의 이름을 지정
◦
id - tag에 유일한 ID를 지정함. 자바스크립트에서 주로 사용
주석
•
주석의 내용은 브라우저에 출력이 되지 않는다.
•
HTML tag의 내용을 설명하기 위한 용도로 사용.
•
<!— 내용 —> 으로 사용된다.
•
HTML 주석은 서버쪽에서 클라이언트에게 전송을 한다. 다만 보이지만 않을뿐!!
Root 요소
•
<html> tag는 HTML 문서 전체를 정의
•
Head(<head> ... </head>) 와 Body(<body> ... </body>)로 구성
Head 요소
•
<head> tag는 브라우저에게 HTML 문서의 머리 부분임을 인식
•
<title>, <meta>, <style>, <script>, <link> tag를 포함 가능
•
<title> tag는 문서의 제목을 의미, 브라우저 제목 표시줄에 제목 나타남
•
<title> tag 이외의 다른 tag로 표현한 정보는 화면에 출력 X
Body 요소
•
body
◦
웹브라우저에게 보여질 문서의 내용을 작성
◦
<head> tag 다음에 위치하고 <head> 내부에 위치하는 tag와 <html>을 제외한 모든 tag
◦
id 속성을 이용하여 문서 내에서 tag를 유일하게 식별 가능 (id 속성은 중복 X)
◦
class 속성을 이용하여 여러 tag에 공통적인 특성(CSS)을 부여 (class 속성은 중복 O)
•
heading
◦
문단의 제목을 지정할 때 사용 <h1>부터 <h6>까지 구분
▪
숫자가 커지면 글자 작아짐, 줄바꿈 자동, Bold 자동
◦
<section> tag를 이용하면 같은 tag를 서로 다르게 표현
◦
문서 구조를 <section> tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성가능
특수문자
•
공백, < >, & 등의 특수문자는 특수한 처리를 해야지만 HTML에서 사용이 가능하다.
HTML 마크업 요소
포맷팅 요소
•
출력의 형식을 지정
•
<b> - Bold 처리 , <i> - 기울임 처리
목록형 요소
•
목록 tag는 하나 이상의 하위 tag를 포함
•
목록 tag는 각 항목을 들여쓰기로 표현
•
번호 또는 심볼을 이용해서 목록을 표현
•
List
◦
ul , li, ol,
•
dl
table
•
HTML table 모델은 데이터를 행(Row)과 열(Column)의 셀(Cell)에 표시
•
행 그룹요소인 <thead>, <tbody>, <tfoot> 요소를 사용하여 행들을 그룹화
•
<colgroup>과 <col> 요소는 열 그룹을 위한 추가적인 구조정보를 제공
•
table의 셀(Cell)은 머리글(<th>)이나 데이터(<td>)를 가질 수 있음
•
테이블의 모든 데이터가 로딩될때까지 테이블이 로드되지 않음.
◦
그래서 디자인을 하는 경우에는 table을 잘 안쓰고 div를 사용함!!
•
테두리(border)
◦
cellspacing은 table cell과 cell 사이의 공간을 의미 (cell 끼리의 간격)
◦
cellpadding은 Cell 외곽과 Cell 컨텐츠 사이 공간을 의미 (Cell 내부의 간격)
◦
HTML5 부터는 테두리 스타일 관련 속성을 지원하지 않고, CSS 사용
이미지 요소
•
<img> tag를 사용하며 이미지를 삽입하기 위해 사용
•
src 속성은 이미지 경로를 지정하기 위해 사용 (상대경로, URL 모두 가능)
•
height, width 속성은 이미지 사이즈를 지정하기 위해 사용
•
alt 속성은 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트를 지정
•
<figure>는 설명 글을 붙여야 할 대상을 지정
링크 요소
•
Anchor
◦
<a> tag를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해(하이퍼링크) 사용
◦
tag를 서로 중첩해서 사용할 수 없다.
◦
href 속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정
◦
target 속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 결정
▪
_self : 현재 윈도우에서 다른 문서로 이동 (default)
▪
_blank : 새로운 윈도우, 새로운 탭을 열음
•
#anchor
◦
같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한번에 이동한다.
◦
<tag id = "anchor name"> content </tag>
◦
<a href = "#anchor name"> content </tag>
▪
div → element 이름
▪
.div → class 이름
▪
#div → id 이름
•
map
◦
하나의 이미지에 여러 개의 link ( Click 위치에 따라 서로 다른 link)
◦
<map name = "map name"> <area> <area> ... </map>
◦
이미지에 영역을 표시할때 <area> 사용
◦
area의 속성은 href(링크 경로), target(링크표시대상), shape(링크로 사용할 영역의 형태) 등
◦
usemap의 이름과 map의 이름은 동일한 이름을 사용한다
Form control 요소
•
사용자로부터 데이터를 입력받아 서버에서 처리하기 위한 용도로 사용
•
사용자의 요처에 따라 서버는 HTML form을 전달 (회원가입양식, 검색 양식 등)
•
사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라 함
•
서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환
•
form
◦
사용자가 입력하기 위한 control 요소들은 모두 <form> tag 하위에 위치해야 서버로 전송됨
◦
다중 form은 사용 가능하지만 form 아래에 다른 form을 가지는 것은 불가능하다
◦
form action = "서버쪽 URL" method = "http method(GET, POST,,,)"
▪
enctype
•
단순 form이 아니라 파일 등 다른 형태의 form 사용시 사용
•
enctype = "multipart/form-data" 으로 사용 가능
▪
method
•
GET : 서버로부터 데이터를 요청 (데이터를 소량 보유, 주소 뒤에 붙음, 데이터 노출)
•
POST : 서버쪽으로 데이터를 전송 (데이터를 다량 보유, 요청 보낼 때 data 부분이 따로 존재, 파일)
•
label
◦
form control에 레이블(텍스트)을 연결
◦
보여지는 것은 동일하지만, 클릭했을 때 focus를 레이블 지정한곳으로 가게 함
◦
<label [속성="속성값"> 레이블 <input ...></label>
사용자 입력을 위한 input
•
input에는 무조건 속성값 name이 들어가야 한다!! (name의 내용은 해당 input의 id와 같게)
•
text, password 등 엄청 많이 존재
•
checkbox, radio
◦
checked 속성은 여러 개의 항목 중 선택된 항목을 표시
◦
label 지정을 통해 정확한 버튼의 클릭 없이도 텍스트 클릭을 통해서 선택 가능
◦
name : 서버로 보내는 data를 구분하기 위한 이름 지정
같은 그룹으로 묶는 경우에는 name을 같게 주어야 함
◦
value : 선택했을 경우에 실제로 서버로 가는 data
CSS 기본
CSS
•
Cascading Style Sheet의 약자
•
스타일 사용 이유
◦
웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
◦
다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다.
•
웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서
CSS 선택자, 선언자
•
CSS 규칙은 선택자(selector)와 선언(declaration) 두 부분으로 구성
•
선택자는 규칙이 적용되는 엘리먼트
•
선언 부분에서는 선택자에 적용될 스타일을 작성
•
선언은 중괄호로 감싸며, 속성과 값으로 이루어짐
◦
속성(property)은 선택자에서 바꾸고 싶은 요소(color, font, width,,,)
◦
선언 안에 하나 이상의 속성을 작성할 수 있으며, 각 속성은 semi-colon으로 구분
스타일 시트의 적용
1.
외부 스타일 시트 적용
•
방법 1
◦
<link>를 사용하여 외부 스타일 시트를 적용
◦
href는 CSS file 경로를 의미함
•
방법 2
◦
@import를 사용하여 외부 스타일 시트를 적용
◦
@import는 스타일 시트 중 최상단에 위치해야 함
◦
<link>와 달리 <style>의 media 속성을 통해 보여지는 미디어 타입 설정
2.
내부 스타일 시트 적용
•
<style>을 사용하여 내부 스타일 시트를 적용
•
HTML 내부에 작성하는 방법
3.
인라인 스타일 시트 적용
•
개별 element마다 스타일을 지정하므로 유지보수에 용이하지 않다.
•
HTML 내부에 작성하는 방법
스타일 적용 우선순위 (가까운 순서대로)
인라인 스타일 > 내부 스타일 시트 ? 외부 스타일 시트
⇒ 구체적으로 정의된 스타일 시트가 우선순위가 높다.
⇒ 우선순위가 동일하다면 마지막으로 선언된 스타일 시트가 적용된다.
CSS의 이해
선택자
1.
선택자의 이해
•
HTML 문서에는 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자(selector)가 존재
•
일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류
•
복합 선택자는 자식 선택자 (가장 선호되는 타입), 하위 선택자, 인접 형제 선택자, 일반 형제 선택자로 분류
•
그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재
2.
일반 선택자 요소
•
일반 선택자의 우선 순위는 전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자이다.
2.1 전체 선택자
•
전체 선택자(Universal Selector) 사용법은 "*{ }" 이다.
•
HTML 문서 내 모든 element를 선택
2.2 타입 선택자
•
타입 선택자(Type Selector) 사용법은 "elementName { }" 이다.
•
태그명을 이용해서 스타일을 적용할 태그를 선택
•
1개 이상의 HTML 엘리먼트를 사용할 수 있다.
•
여러 엘리먼트를 선택할 때에는 컴마( , ) 로 구분
2.3 클래스 선택자
•
클래스 선택자(Class Selector) 사용법은 ".className { }" 이다.
•
클래스 명은 공백없이 대소문자 또는 Hypen( - ), UnderScore( _ ) 로 시작 (기호나 숫자 X)
•
HTMl
2.4 ID 선택자
3.
복합 선택자 요소
•
하위 선택자(Descendant Selector) 사용법은 "element element
•
때에 따라서 쓰임
4.
가상 클래스 선택자 요소
•
가상 클래스 선택자 (Pseudo-Classes Selector)는 User Agent가 제공하는 가상의 클래스를 지정
•
사용법은 "가상 클래스 { }" 이다.
•
:link , :visited , :hover , :active 등등이 존재
....못적은거 엄청많음...
Font
•
font-fmaily 속성 사용시 여러개를 선언했을 때 앞쪽을 먼저 고려하고, 이해하지 못하면 뒤쪽으로 넘어간다.
