on my way
Do it! HTML+CSS+자바스크립트 웹 표준의 정석: 03. HTML 기본 문서 만들기 본문
Do it! HTML+CSS+자바스크립트 웹 표준의 정석: 03. HTML 기본 문서 만들기
wingbeat 2024. 4. 12. 17:31둘째마당. HTML 시작하기
03. HTML 기본 문서 만들기
03-1 HTML과 첫 만남
Hyper Text Markup Language
03-2 HTML 구조 파악하기
html 태그 안에 헤드, 바디가 있다.
브라우저에서 서버에 요처을 하고, 서버가 보낸 브라우저가 받은 결과를 출력한다.
웹 문서의 유형을 지정하는 선언문 <!DOCTYPE html> 태그
<!DOCTYPE html>
웹 문서의 시작을 알리는 <html> 태그
<html lang="en">
</html>
웹 브라우저에 문서 정보를 알려주는 <head> 태그
문자 세트 등 문서의 정보가 있는 <meta> 태그
charset -> character set
만약에 한글이 안나오면 charset이 UTF-8, 열고 있는 편집기의 charset 인코딩이 맞는지 확인해보자.
엑셀은 utf-8이 아니라 한글이 모두 깨짐.
웹 브라우저에 내용을 표시하는 <body> 태그
03-3 HTML 파일 만들기
http://127.0.0.1:5500/test.html
"127.0.0.1"은 컴퓨터의 로컬 호스트를 가리키는 IP 주소. 이 IP 주소는 컴퓨터 자체를 참조하는 데 사용된다. 보통 "localhost"라고도 불린다.
따라서 http://127.0.0.1:5500/test.html은 현재 사용자의 로컬 컴퓨터에서 실행 중인 웹 서버에서 "test.html"이라는 파일에 액세스하는 것을 의미한다. 일반적으로 개발자가 로컬에서 웹 개발 및 테스트를 진행할 때 사용된다.
5500은 port 번호이다. 포트 번호는 컴퓨터 네트워크에서 특정 프로세스를 식별하는 데 사용된다. 웹 서버는 일반적으로 80번 포트(HTTP)나 443번 포트(HTTPS)를 사용하지만, 개발자들은 종종 로컬 환경에서 다른 포트를 사용하여 서버를 실행한다. "5500"은 이러한 목적으로 선택된 임의의 포트 번호로, 보통 로컬 개발 서버에서 사용된다.
따라서 http://127.0.0.1:5500/test.html은 로컬 호스트의 5500번 포트에서 실행 중인 웹 서버에 있는 "test.html" 파일에 액세스하는 것을 의미합니다.
03-4 웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그 알아보기
이름만 봐도 의미를 알 수 있어 시맨틱 태그(semantic: 의미론적인)라 한다.
paragraph - <p>
anchor - <a>
<h> <p> 태그 매우 많이 사용함
<p> 줄바꿈 안됨
웹 문서 구조를 만드는 주요 시맨틱 태그
헤더 영역을 나타내는 <header>
검색창, 사이트 메뉴 삽입
내비게이션 영역을 나타내는 <nav>
문서 안에서 다른 위치로 연결하거나, 다른 웹 문서로 연결하는 링크
각각 id 속성을 지정하면 다른 스타일을 적용할 수 있다.
핵심 컨텐츠를 담는 <main>
: 페이지마다 똑같이 들어간 정보(메뉴, 사이드바, 로고)는 넣을 수 없고, 웹문서에서 한번만 사용 가능
독립적인 컨텐츠를 담는 <article>
: 블로그처럼 독립적 컨텐츠. 안에 section 태그 사용 가능
콘텐츠를 나타내는 <section>
: 여러개의 컨텐츠를 묶는 용도 (article은 독립된 컨텐츠)
사이드 바 영역을 나타내는 <aside>
: 본문 외 왼쪽이나 아래쪽에
푸터 영역을 나타내는 <footer>
: 사이트 제작 정보, 전화번호 등
여러 소스를 묶는 <div>
: 영역 별 구별해서 스타일로 문서 꾸밈
'Computer Science > HTML CSS JS' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석: 01. 웹 개발 시작하기, 02. 웹 개발 환경 만들기 (1) | 2024.04.12 |
|---|
