게으른 나에게

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: HTML 기본 문서 만들기" 본문

My Study/서적 공부

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: HTML 기본 문서 만들기"

handbefore 2024. 7. 20. 17:00

03 HTML 기본 문서 만들기

 03-1 HTML과 첫만남

· HTML이란? 웹 문서를 만드는 언어

Hyper Text Markup Language의 줄임말.

Hyper: 문서를 서로 연결해 주는 링크

Mark Up: 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등읠 위치를 표시하는 것

 

 03-2 HTML 구조 파악하기

 

·  HTML 문서의 기본구조

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>HTML 기본문서<title>
	</head>
*<head>는 웹 문서 해석하는 데 필요한 정보*

	<body>
		<h1>프런트엔드 웹 개발<h1>
	</body>
</html>
*<body>는 실제로 웹 브라우저 화면에 나타나는 내용*

웹 문서의 유형을 지정하는 선언문 <! DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻

웹 문서의 시작을 알리는 <html>~</html> : 웹 문서의 시작과 끝을 나타내는 태그. 웹 브라우저가 html 태그를 만나면 </html>까지 소스를 읽어 화면에 표시

웹 브라우저에 문저 정보를 알려주는 <head>~</head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분

<body>~</body> 실제로 웹 브라우저 화면에 나타나는 내용. 

 

문자 세트를 비롯해 문서 정보가 들어 있는 <meta> 태그

<html lang="ko"> 		  *사용할 언어 지정*

<meta charset="UTF-8"> 	           *어떤 인코딩을 사용할지 (인코딩을 처리하지 않으면 한글이 깨질 수 있음*

<meta name="keywords" content="html의구조'> 			    *웹 문서의 키워드*
<meta name="description" content="html의 구조를 알아봅시다">             *웹 문서의 설명*
<meta name="author" content="Son JIwon"> 			   *웹 문서의 소유자나 제작자*

<title>HTML 기본문서</title> 				 	 *웹브라우저의 제목 표시줄*

 

 

03-3 웹 문서 구조를 만드는 시맨틱 태그

· 시맨틱 태그 알아보기

시맨틱 태그 : 이름만 봐도 의미를 알 수 있음.

 

※ 시맨틱 태그 필요한 이유

1. 내용을 쉽게 알 수 있음. 시각 장애인이 웹 사이트를 이용할 때 쓰는 보조기기에서 사이트의 구조를 제대로 이해할 수 있음.

2. 문서 구조가 정확하게 나눠지므로 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉬움.

3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용 정확히 찾을 수 있음.

 

<body>
  <div id="container">    
    <header>				* 헤 더 영 역 *
     
      </div>
      <nav>				* 내비게이션 영역*
        
      </nav>
    </header>
    
    <main class="contents">		* 본 문 영 역 *
      <section id="headling">
        
        
      </section>
      <section id="activity">
           
      </section>
    </main>
    
    <footer>    			* 푸 터 영 역 *
      <section id="bottomMenu">
        
      </section>   
    </footer>  
  </div> 
</body>

 

 

 

 

헤더 영역을 나타내는 <header> 태그 : 검색 창이나 사이트 메뉴 삽입

내비게이션 영역을 나타내는 <nav> 태그 :  웹 문서 안에 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦.

 

 

 

 

핵심 콘텐츠를 담는 <main> 태그 : 웹 문서에 핵심이 되는 내용 넣음. 페이지마다 똑같이 들어간 정보 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용 구성. 웹 문서에서 한 번만 사용 가능

독립적인 콘텐츠를 담는 <article> 태그 : 신문이나 잡지의 기사처럼 웹에서 실제로 보여주고 싶은 내용 넣음

콘텐츠 영역을 나타내는 <section> 태그 : 웹 문서의 콘텐츠 영역을 나타냄. 몇개의 콘텐츠를 묶는 용도로 사용. 블로그의 포스트 처럼 독립된 콘텐츠로 사용

 

사이드 바 영역을 나타내는 <aside> 태그 : 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽 사이드 바를 만듦.

푸터 영역을 나타내는 <footer> 태그 : 웹 문서에 맨 아래쪽에 있는 영역. 사이트 제작 정보나, 저작권 정보, 연락처 등을 넣음

 

여러 소스를 묶는 <div> 태그 : 문서 구조를 만들거나 스타일을 적용할 때 사용. 영역을 구별하거나 스타일로 문서를 꾸밈.

 

 

 

출처

 

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

 

easyspub.co.kr

 

'My Study > 서적 공부' 카테고리의 다른 글

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "4장: 마무리 문제"  (1) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 입력양식 작성하기"  (3) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 목록만들기, 표 만들기"  (2) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-둘째마당: 웹 문서에 다양한 내용 입력하기"  (0) 2024.07.20
[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "HTML-첫째마당: 웹개발 시작하기"  (0) 2024.07.20
'My Study/서적 공부' Related Articles more