웹프로그래밍
- 웹프로그래밍(혹은 웹디자인 등으로 알려진)은 기본적으로 W3C이나 WHATWG 같은 그룹에서 표준화한 HTML 따위의 기술을 통해 프로그래밍을 하는 것
- 우리에게 가장 와닿을 만한 부분은 아무래도 웹 문서를 작성하기 위해 개발된 마크업언어인 HTML 등을 살펴볼 수 있다
- 현재 버전 5까지 출시된 HTML은 웹페이지를 구조적으로 설계할 수 있게끔 되어있다
- 그래픽 및 멀티미디어 지원, 반응형 웹 문서 작성, 다양한 API 제공 등 우리가 필요로 하는 기능들을 다수 지원하고 있다*
- 앞서 말했듯 HTML 5는 사용자가 직접 웹의 구조를 짤 수 있도록 개발이 되어있다.
- HTML은 기본적인 설계 구조가 있는데 <header> <footer> <article> <section> <aside> <nav> 등이 있다.
- 그 외로 우리가 직접 필요한 부분에 따라 파트를 세분화하여 HTML 구조를 정리하는 것도 가능하다
기본적인 설계 구조
- 머리글처럼 페이지의 상단에 표시하는 부분인 <header>
- 꼬리말처럼 페이지의 하단에 표시하는 부분인 <footer>
- 본문 내용을 다루는 <article>
- 문장의 그룹처럼 세부 내용을 그룹화할 때 사용하는 부분인 <section>
- 본문에 관련된 주석처럼 별도의 내용을 분리하여 보여줄 때 사용하는 부분인 <aside>
- 내비게이션을 표시하는 부분인 <nav>
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
</head>
<body>
Hello World!
</body>
</html>모든 HTML 코드는 다음과 같이 시작하는데 HTML은 여기서 일부 코드를 빼더라도
브라우저에서 융통성 있게 해석을 해주기 때문에 웹문서가 잘 표시된다.
<!DOCTYPE html> : 문서 종류를 선언하는 코드
<html lang="ko"> : html 문서의 시작과 종료를 알리며 및 사용 언어 선언을 하는 코드
<head> : 웹 페이지의 정보를 정의하며 <title>, 자바스크립트, CSS 등을 정의함
<body> : HTML5 문서의 본문을 작성하는 코드
주의점
- HTML은 오타가 있어도 웬만해선 에러를 안띄우고 코드를 몇 개 생략하거나 대소문자를 못가려도 어느정도는 이해해서 웹에다 띄어주는 일이 빈번히 일어난다.
- 그럼에도 불구하고 알아야할 몇 가지 기초적인 사항들이 있다.
1. 태그 이름은 대소문자를 구분하지 않는다.
2. 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리한다.
3. 태그의 포함 관계를 표현하기 위해 들여쓰기를 쓴다.
4. 종료 태그를 반드시 사용한다. (종료 태그가 필요 없는 경우도 있다!)
5. 주석은 '<!--'로 시작해 '--'로 끝내 사용한다
'웹프로그래밍 > HTML 5' 카테고리의 다른 글
| HTML5 - 구조 관련 태그 (0) | 2024.07.25 |
|---|---|
| HTML5 - Form 태그 (0) | 2024.07.24 |
| HTML5 - 기본 태그와 멀티미디어 태그 (2) | 2024.07.23 |