웹(Web)이란 무엇일까?

웹(Web)

• 월드 와이드 웹(World Wide Web)의 줄임말 a.k.a WWW
• 웹 이전의 인터넷은 초기의 명령어 기반 구조를 가지고 있었기에, 하드웨어와 OS(운영체제)에 따라 다른 명령어를 사용했음.
• 웹에서는 어떤 종류의 컴퓨터를 사용하여도 한 가지 종류의 표준 사용자 환경으로 조작이 가능.

  W·B(Web Browser) & W·S(Web Server)

• 웹을 사용하기 위해 클릭하는 웹 브라우저 → ‘클라이언트’
• 웹 페이지의 요청에 응답하는 웹 서버 → ‘서버’
  

웹의 특징 ( 웹 vs 앱 )

여러가지 태그들

HTML 기본 태그

< input > : 입력 요소

 <input type="text" id="name" required minlength="5" size="10" />

• < input >은 type 속성에 따라 동작 방식이 매우 다름
  • text, button, checkbox, color, date 등
• 다양한 속성 적용 가능
  • checked, disabled, maxlength, minlength, placeholder, required 등

< h1 > - < h6 > : 제목 요소

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
 <h3>Heading level 3</h3>
 <h4>Heading level 4</h4>
 <h5>Heading level 5</h5>
 <h6>Heading level 6</h6>

• 6단계의 제목을 나타냄. h1이 가장 높은 레벨이며 가장 크기가 크다.
  

< p > : 문단

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Sed id justo ante. Pellentesque varius imperdiet luctus.
 Suspendisse est quam, finibus vel orci ac, tempor molestie magna.
 Maecenas luctus non urna eu interdum.
 Aliquam pellentesque sagittis erat vitae condimentum.
 In hac habitasse platea dictumst.
 Etiam tortor tortor, egestas vel dolor eget, bibendum posuere purus.
 Maecenas consectetur quis eros et sollicitudin.
 Donec orci nulla, lobortis id felis nec, porta mattis velit.</p>

• 하나의 문단을 나타낼 때 사용

< a > : 앵커(하이퍼링크)

<a href="https://github.com/seyxxn">My GitHub</a>

• herf 속성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크 생성

< li > < ol > < ul > : 리스트

  <h1>라면 끓이는법</h1>
  <ol>
  	<li>물을 끓인다.</li>
  	<li>스프를 넣는다.</li>
  	<li>물이 끓으면 면을 넣는다.</li>
  	<li>3분동안 기다린다.</li>
  	<li>맛있게 먹는다.</li>
  <ol>
  
  <h1>가고싶은 나라</h1>
  <ul>
  	<li>스위스</li>
  	<li>이탈리아</li>
  	<li>미국</li>
  	<li>일본</li>
  <ul>

• < li > : 리스트 아이템
• < ol > : ordered list, 정렬된(순서가 있는) 목록
• < ul > : unordered list, 정렬되지 않은 목록

< img > : 이미지 삽입 요소

 <img
 	src="이미지 경로"
 	alt="이미지의 텍스트 설명">

• 문서에 이미지를 삽입한다.
• src는 필수이며, 포함하고자 하는 이미지로의 경로를 지정
• alt는 이미지의 텍스트 설명 (필수는 아니지만 사용하지 않으면 경고)

< table > < tr > < td > : 표

   <p>Simple table with header</p>
   <table>
     <tr>
       <th>First name</th>
       <th>Last name</th>
     </tr>
     <tr>
       <td>seyeon</td>
       <td>park</td>
     </tr>
     <tr>
       <td>seyeong</td>
       <td>park</td>
     </tr>
   </table>

• < table > : 표를 나타냄
• < th > : 테이블의 헤더 부분을 만드는 태그
• < tr > : 테이블의 행을 만드는 태그
• < td > : 테이블의 열을 만드는 태그

< header > : 소개 및 탐색에 도움을 주는 콘텐츠

   <header class="page-header">
       <h1>Hello HTML</h1>
   </header>
   <main>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   	Sed id justo ante. Pellentesque varius imperdiet luctus.</p>
   </main>

• 제목, 로고, 검색폼, 작성자 이름 등의 요소 포함 가능

< body > : 문서 본문 요소

• HTML 문서의 내용을 나타냄
• 한 문서에 하나의 < body > 요소만 존재

< div > : 콘텐츠 분할 요소

• 플로우 컨텐츠를 위한 통용 컨테이너
• 순수 컨테이너로서 아무것도 표현하지 않음
• 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 사용하는 등의 용도
• 블록 레벨 요소

< span > : 구문 콘텐츠 요소

• 구문 콘텐츠를 위한 통용 인라인 컨테이너
• 본질적으로는 아무것도 나타내지 않음
• 스타일을 적용하기 위해 사용 가능
• 인라인 요소