-
1. 개요개발자 수업/HTML5 2021. 10. 28. 16:29
1. 웹 기반 프로그램의 특징
1) 화면과 로직을 서버에서 모두 처리하므로 클라이언트가 특별히 수행할 작업이 없음
2) 모든 기능을 서버에서 처리하므로 보안 면에서도 월등히 우수함
2. 정적(static) 웹 프로그래밍이란?
1) 웹서버(Apache)에 미리 보여줄 HTML 페이지, CSS, 이미지, JS 파일을 저장해놓고 브라우저에서 요청할 경우 그대로 전달하는 방식
2) 사용자는 페이지가 변경되지 않는 한 고정된 웹 페이지를 보게함
3) 구성요소
- 웹 서버 : 각 클라이언트에게 서비스를 제공하는 컴퓨터를 의미
- 클라이언트 : 네트워크로 서버에 접속한 후 서버로부터 서비스를 제공받는 컴퓨터를 의미
- HTTP(Hyper Text Transfer Protocol)
- www 서비스를 제공하는 통신 규약
- 웹서버와 클라이언트는 이 프로토콜을 이용해 정보를 주고 받음
- HTML
- Hyper Text Markup Language의 약자로, www 서비스를 제공하기 위한 표준 언어
- 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 구조를 담당
- CSS
- Cascading Style Sheets의 약자로, 문서에서 폰트나 색상, 크기, 정렬, 레이아웃 등 세부적인 HTML 페이지의 디자인 관련된 기능
- 실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당
- JavaScript
- HTML 웹 페이지의 여러 가지 동적인 기능을 제공하는 스크립트 언어
- 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
3. 크로스 브라우징(Cross Browsing)
1) 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작)을 줄 수 있도록 제작하는 기술, 방법
4. 기본 용어
1) 창(Window)
2) 주소창(Address bar)
3) 뷰포트(Viewport)
5. 특수 문자 용어
` : 백틱(Backtick), 그레이브(Grave)
~ : 틸드(Tilde), 물결 표시
! : 익스클러메이션(Exclamation mark), 느낌표
@ : 앳(At sign), 골뱅이
# : 샵(Sharp), 넘버(Number sign), 우물 정
^ : 캐럿(Caret)
& : 엠퍼샌드(Ampersand)
* : 에스터리스크(Asterisk), 별표
- : 하이픈(Hyphen), 대시(Dash), 마이너스
_ : 언더스코어(Underscore), 로우대시(Low dash), 밑줄
" : 쿼테이션(Quotation mark), 큰 따옴표
' : 아포스트로피(Apostrophe), 작은 따옴표
: : 콜론(Colon)
; : 세미콜론(Semicolon)
/ : 슬래시(Slash)
| : 버티컬 바(Vertical bar)
\ : 백슬래시(Backslach), 역슬래시
() : 퍼렌서시스(Parenthesis), 소괄호, 괄호
{} : 브레이스(Brace), 중괄호
[] : 브래킷(Bracket), 대괄호
<> : 앵글 브래킷(Angle Bracket), 꺽쇠괄호
6. HTML 기본 문법
1) <h1>Hello world!</h1>
<태그>내용</태그> : 요소 (Element)
- 시작(열린) 태그(Tag)
- 종료(닫힌) 태그
- 요소의 내용(Contents)
<태그 속성="값">내용</태그> : 기능의 확장
- Attribute
- Value
<태그>
<태그/>
<img src="./rose.jpg" alt="장미"/>
src : 이미지 경로 alt : 이미지의 이름(대체 텍스트, Alternate Text)
7. HTML 요소의 관계
<div><div>Contents</div></div>
바깥쪽 <div></div> 는 부모요소
안쪽 <div></div> 는 자식요소
8. 글자와 상자
1) 요소가 화면에 출력되는 특성, 크게 2가지로 구분
- 인라인(Inline) 요소 : 글자를 만들기 위한 요소들
- 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
2) <span></span>
- 대표적인 인라인 요소
- 본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정하는 용도
- 요소가 수평으로 쌓임
- 포함된 컨텐츠 크기만큼 자동으로 줄어듦
<span style="width: 100px;">Hello</span>
<span style="height: 100px;">World</span>
width는 요소의 가로 너비를 지정하는 CSS 속성, height는 요소의 세로 너비를 지정하는 CSS 속성
==> 반응 없음
<span style="margin: 20px 20px;">Hello</span>
<span style="padding: 20px 20px;">World</span>
margin은 요소의 외부 여백을 지정하는 CSS 속성, padding은 요소의 내부 여백을 지정하는 CSS 속성
<span><div></div><span> ==> 불가 (인라인 요소 안에 블록 요소는 불가능)
<span><a></a></span> ==> 가능 (인라인 요소 안에 인라인 요소는 가능)<!DOCTYPE html> <!-- 1. 웹 기반 프로그램의 특징 --> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <span style="width: 100px;">Hello</span> <span style="height: 100px;">World</span> <h1>Hello world!</h1> <img src="img/rose.jpg" alt="장미" > <div> <div> <div>Contents</div> </div> </div> </body> </html>3) <div></div>
- 대표적인 블록 요소
- 본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정하는 용도
- 요소가 수직으로 쌓임
- 가로 너비 : 부모 요소의 크기만큼 자동으로 늘어남
- 세로 너비 : 포함한 컨텐츠 크기만큼 자동으로 줄어듦
<div style="width: 100px;">Hello</div>
<div style="height: 40px;">World</div>
==> 반응 있음
<div style="margin: 10px;">Hello</div>
<div style="padding: 10px;">World</div>
==> 반응 있음
<div><div></div></div> ==> 가능 (블록 요소 안에 블록 요소는 가능)
<div><span></span></div> ==> 가능 (블록 요소 안에 인라인 요소는 가능)'개발자 수업 > HTML5' 카테고리의 다른 글
HTML5/src/main/webapp/lab03 (0) 2021.11.02 5. CSS 기본 문법 (0) 2021.11.01 4. HTML 문서 구조 (0) 2021.11.01 3. Review (0) 2021.11.01 2. HTML 문서 (0) 2021.10.29