[Web/HTML] HTML 소개 및 기본

티스토리 뷰

Web/HTML

[Web/HTML] HTML 소개 및 기본

poopooreum 2024. 4. 14. 14:52

✏️ HTML이란?

Hyper Text Markup Language의 줄임말로, 웹 문서를 만드는 언어

HyperText는 문서를 서로 연결해 주는 링크, Markup은 표시하다라는 뜻을 지니고 있음.

종합적으로 해석해 보면 인터넷에서 링크를 클릭하면 다른 페이지나 사이트로 쉡게 연결해줄 수 있도록 하고

웹 브라우저에 내용을 보여 주는 이미지, 텍스트, 영상 등의 위치를 조절하고 표시하는 것을 의미

HTML과 HTML5

2014년 11월에 발표된 HTML표준 규약은 이전 버전과 구별하기 위해서 한동안 HTML5라고 불렸음

그러나 최근 대부분의 웹 브라우저에서 HTML5를 지원하게 되면서 HTML5에서 숫자 5를 빼고

그냥 HTML라고 부르게 됨. 현재의 HTML은 HTML5를 의미한다고 생각해도 무방

HTML 문서의 기본 구조

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>웹 개발 입문</title>
  </head>
  <body>
    <h1>웹 개발 기초</h1>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바스크립트</p>
  </body>
</html>

<!DOCTYPE html>

현재 문서가 HTML5 언어로 작성한 웹 문서라는 의미, 문서의 유형을 지정

<html>태그

웹 문서의 시작과 끝을 나타내는 태그, </html> 태그 뒤에는 아무 내용이 없어야 함

<html> 태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻

<html> 태그와 </html> 태그 사이에 내용을 입력하면 됨

<head>태그

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 웹 문서를 해석하는 데 있어 필요한 정보를 입력하는 부분

<meta> 태그 : 웹 문서와 관련된 정보를 지정할 대 사용(ex : <meta charset="UTF-8">)

<title> 태그 : 웹 문서의 제목을 입력함/ 웹 브라우저 화면에 뜨는 것이 아닌, 웹 브라우저의 제목 표시줄에 표시됨

<body>태그

실제로 웹 브라우저 화면에 나타나는 내용, 대부분의 태그들은 <body>태그 안에 들어있음

✏️ HTML파일 만들기

visual studio code창에서 파일 만들기를 클릭 -> 자신이 원하는 이름명.html로 입력

! + tap키를 누르면 아래 사진과 같이 html기본 틀이 자동으로 완성됨

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

✏️라이브 서버 설치하기

일반적으로 vsc상에서 html을 실행하게 되면 웹사이트가 떠서 결과를 보여주게 되는데

라이브 서버를 설치하면 vsc 내부적으로 창을 열어주어 내용을 저장할 때마다 바로바로 갱신되어서 편리함

다음과 같이 vsc 확장 팩에서 Live Server를 검색 후 설치하기

실행 방법은 파일 화면에서 우클릭 + Open with Live Server버튼을 누르기

✏️시맨틱(semantic) 태그

기본적으로 html태그는 이름만 봐도 의미를 알 수 있기 때문에 시맨틱 태그라고 불림

다음은 시맨틱 태그를 사용하여 만든 웹 문서

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dream Jeju</title>
  <link rel="stylesheet" href="css/structure.css">
</head>
<body>
  <div id="container">    
    <header>
      <div id="logo">
        <a href="index-footer.html">
          <h1>Dream Jeju</h1>
        </a>
      </div>
      <nav>
        <ul id="topMenu">
          <li><a href="#">단체 여행</a></li>
          <li><a href="#">맞춤 여행</a></li>
          <li><a href="#">갤러리</a></li>
          <li><a href="#">문의하기</a></li>
        </ul>
      </nav>
    </header>
    <main class="contents">
      <section id="headling">
        <h2>몸과 마음이 치유되는 섬</h2>                  
        <div class="detail"> 
          <img src="images/healing.jpg">                            
          <b><p>쉼(Healing)의 공간으로 안내합니다</p></b>          
          <p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. </p>        
        </div>        
        <div class="schedule">
          <h3>상세 일정</h3>
          <ul>
            <li>여행 기간 : 2박 3일</li>
            <li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>
          </ul> 
        </div>
      </section>
      <section id="activity">
        <h2>다양한 액티비티가 기다리는 섬</h2>
        <div class="detail">          
          <img src="images/activity.jpg">
          <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p></b>          
          <p>둘러보기만 하는 여행을 하셨나요? </p>
          <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>
        </div>
      </section>
    </main>
    <footer>    
      <section id="bottomMenu">
        <ul>
          <li><a href="#">회사 소개</a></li>
          <li><a href="#">개인정보처리방침</a></li>
          <li><a href="#">여행약관</a></li>
          <li><a href="#">사이트맵</a></li>
        </ul>
      </section>   
    </footer>  
  </div> 
</body>
</html>

하나씩 분석해보면

// 헤더 부분으로 웹 사이트에서 상단 부분을 의미
<header>
   <div id="logo">
       <a href="index-footer.html">
          <h1>Dream Jeju</h1>
        </a>
   </div>
   <nav>
     <ul id="topMenu">
        <li><a href="#">단체 여행</a></li>
        <li><a href="#">맞춤 여행</a></li>
        <li><a href="#">갤러리</a></li>
        <li><a href="#">문의하기</a></li>
      </ul>
   </nav>
</header>

// <nav> 태그는 네비게이션 영역을 나타내는데 주로 다른 위치나 다른 웹 문서로 연결하는 링크를 만듦
<nav>
   <ul id="topMenu">
       <li><a href="#">단체 여행</a></li>
       <li><a href="#">맞춤 여행</a></li>
       <li><a href="#">갤러리</a></li>
       <li><a href="#">문의하기</a></li>
   </ul>
</nav>

// <section> 태그는 웹 문서에서 콘텐츠 영역을 나타냄, 쉽게 생각하면 글에서 단락같은 개념
<section id="activity">
   <h2>다양한 액티비티가 기다리는 섬</h2>
   <div class="detail">          
       <img src="images/activity.jpg">
       <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p></b>          
       <p>둘러보기만 하는 여행을 하셨나요? </p>
       <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>
   </div>
</section>

// <footer> 태그는 웹 문서 상에서 가장 하단 부분을 나타냄
<footer>    
  <section id="bottomMenu">
     <ul>
       <li><a href="#">회사 소개</a></li>
       <li><a href="#">개인정보처리방침</a></li>
       <li><a href="#">여행약관</a></li>
       <li><a href="#">사이트맵</a></li>
     </ul>
  </section>  
</footer>

// <div> 태그는 id나 class속성을 사용해서 문서 구조를 만들 때 사용, 영역을 구별하거나 스타일로 문서를 꾸밈
<div class="schedule">
  <h3>상세 일정</h3>
  <ul>
    <li>여행 기간 : 2박 3일</li>
    <li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>
  </ul>
</div>

Dream Jeju

위의 코드를 실행했을 때 나오는 브라우저 화면

위의 코드들은 모두 Do it!시리즈 책에 나와있는 코드들입니다!

저작자표시 비영리 변경금지

'Web > HTML' 카테고리의 다른 글

[Web/HTML] HTML - 오디오와 비디오 삽입하기 (0)	2024.04.15
[Web/HTML] HTML - 이미지 삽입하기 (0)	2024.04.15
[Web/HTML] HTML - 표 만들기 (0)	2024.04.14
[Web/HTML] HTML - 목록 만들기 (0)	2024.04.14
[Web/HTML] HTML - 텍스트 입력 (0)	2024.04.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

푸으름

티스토리 뷰