웹은 인터넷과 웹으로 나누어지며, 인터넷은 컴퓨터를 전세계 규모로 연결한 것이고,
웹은 인터넷 표준 문서 시스템이다.
웹의 특징으로는 전 세계의 컴퓨터를 연결하고, HTTP프로토콜을 사용하며, HTML로 작성된 문서를 연결하고,
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일등의 멀티미디어 서비스를 제공한다.
개발자들은 상호간에 웹 표준을 만들어 개발자가 누구던지 규칙을 준수하면 모두 편히 사용할수 있게 하기 위함이다.
W3C는 웹에 관련된 기술이나 웹 브라우저 사용을 위한 표준안을 제정하여 개발자간 정보공유와 신기술 개발에 기여한다.
HTML5의 특징으로는
●구조적 설계 지원
● 그래픽 및 멀티미디어 기능 강화
● CSS3 지원
● 자바스크립트 지원
● 다양한 API 제공
● 모바일 웹 지원 등이 있다.
또한 <header> <footer> <article> <section> <aside> <nav>로 나누어 각 파트간 역할에 맞게 사용한다.
웹 브라우저는 HTML문서를 읽고 웹 페이지에 정보를 표시하는 소프트웨어이며, URL을 통해 접근한다.
웹브라우저의 기능은
● 웹 페이지 탐색
● 접속하는 프로그램의 주소 관리
● 웹 페이지의 저장, 인쇄, 소스 파일 보기
● 웹 페이지 보안에 관련된 각종 필터 도구 제공 등이 있다.
웹 브라우저의 종류는 크롬, IE, 파이어폭스, 사파리, 오페라 등이 있으며 그중 크롬의 이용률이 가장 높다.
HTML 편집기에는 메모장, 노트패드++, 울트라에디트, 에디트플러스, 아크로에디트, 비주얼 스튜디오, 어도비 브라켓등이 있으며, 메모장으로도 충분히 작성 가능하지만, 편의성을 생각해 별도의 편집기를 사용한다.
웹 서버의 개념
클라이언트가 서버에 파일을 요청하면 인터넷을 거쳐 서버로 부터 파일을 받아온다.
HTML5 문서의 구조
<!DOCTYPE html> // 현재 문서가 HTML5로 작성된 웹 문서임을 의미한다.
<html> // HTML 문서의 시작
<head> // 문서의 머리 시작
<title>제목 영역</title>
</head> // 문서의 머리 끝
<body> // 문서의 몸 시작
<p>본문 영역1</p>
<p>본문 영역2</p>
</body> // 문서의 몸 끝
<html> // HTML 문서의 끝
<!DOCTYPE html>
HTML5 문서를 선언하는 구문으로 생략 가능하지만 하위 호환성을 위해 작성을 권장한다.
<html>~</html>
HTML5 문서의 시작과 끝을 알리며 언어 속성을 사용하여 주된 언어 값 설정을 할수있다.
<head>~</head>
웹 페이지의 정보를 의미하여 <title> 태그와 자바스크립트, CSS등을 정의한다.
<body>~</\body>
HTML5 문서의 본문을 작성한다.
HTML5 문서 작성간 주의사항
● 태그 이름은 대소문자를 구분하지 않는다.
● 본문 내 연속 공백과 줄 바꿈은 하나의 공백으로 처리한다.
● 태그의 포함 관계를 표현하기 위해 들여쓰기를 적용한다(가독성도)
● 종료 태그를 반드시 사용한다.
● 주석은 <!--로 시작해서 --로 끝낸다.(Ctrl+/ 단축어)
미리 정의된 태그
- 사용자가 임의로 변경할수 없고, 사용 용도에 맞게 사용
<h1>~</h1>
문서의 제목
<hr>~</hr>
문서의 구분선
<p>~</p>(또는 <p/>)
단락 구분
<strong>~<strong>
중요한 문장
<br>
줄바꿈
태그작성시 유의점
일반적인 의미로 해석할 수 있도록 포함 관계 설정
ex) 회사 → 부서 → 팀, 학교 → 과
속성
태그의 종속적 정보를 표현하기 위해 사용하며, 태그 없이 단독 사용은 불가능하고, 속성=값 형태로 작성한다.
ex) <img src="welcom.jpg" border="1" width="200" height="130" alt="welcome" title="환영합니다!">
→ welcom.jpg 이미지 파일을 테두리 두께 1, 넓이 200, 높이 130으로 표시하고, 마우스를 올리면 "환영합니다!"를 출력한다.
<hr>요소
구분선을 그을 때 사용한다.
align, noshade, size, width등을 사용하여 수평선의 정렬, 입체감, 두께, 상대적 넓이를 지정한다.
'프로그래밍 공부' 카테고리의 다른 글
| 2024.11.18 CSS3 공부 (0) | 2024.11.18 |
|---|---|
| 2024.11.15 HTML5/CSS3 공부 (0) | 2024.11.15 |
| 2024.11.14 HTML5 공부 (0) | 2024.11.14 |
| 2024.11.13 HTML5 공부 (0) | 2024.11.13 |
| 2024.11.12 HTML5 공부 (0) | 2024.11.12 |