매일공부

[HTML] 웹 페이지의 구조와 내용 본문

Programming/web

[HTML] 웹 페이지의 구조와 내용

aram 2022. 9. 14. 22:23

 

- http(HyperText Transfer Protocol) : tcp기반, 인터넷에서 가장 많이 사용되는 프로토콜, 비 연결형 프로토콜

- http 구조
 : request (request line, request header, blank line, body)
 : responese (status, response header, blank line, body)

- html(HyperText Markup Language)
 : http 기반 응답 형식
 : <태그>내용</태그>  엘리먼트의 트리구조
 : 태그와 속성은 대소문자 구분 없음

- http 프로토콜 참조 문서:https://ryanclaire.blogspot.com/2020/10/HTTP-Overview.html
- 브라우저 구조와 동작 참조 문서
 https://bit.ly/3DoZaXT
- MIME  타입
: https://juyoung-1008.tistory.com/4

 

- HTML 기본 구조

1. 문서유형 선언

  • <!DOCTYPE html>  정적선언 : 문서 유형 선언  html5 버전이며( 파싱 및 레더링 할 버전) 

2. 루트 Element

  • <html> 웹페이지의 시작과 끝
  • <html lang="ko"> 루트 Element  속성 lang = 문서의 주 언어를 한글 선언

3. html 태그자식 태그는 <head> 와 <body> 가 순서대로 1번씩 선언 가능

4. <head>태그

  • Encoding, 작성자, 검색어, view port, css, javascript 외부파일 링크, css와 javascript포함
  • 웹 페이지의 정보, 웹페이지에서 사용할 외부 파일들 링크
    • <meta> 메타데이터를 설정, 인코딩, 사용자 화면 설정, 키워드, 작성자, descript
      viewport 설정 = 사용자가 웹 페이지에 접속했을 때 보이는 화면 영역
        > https://jjeongil.tistory.com/1210
    • <title> 웹 페이지의 제목
    • <link rel="" href="" type=""> 링크연결
    • <style></style> 스타일 지정
    • <script src=""></script> 스크립트

5. <body>태그

  • 브라우저에 실제 표시되는 내용

 

- 튜토리얼 : https://www.w3schools.com/html/default.asp

 

- html 웹 문서의 구조 시멘틱 태그 : https://bit.ly/3xjz9FC
<header> <section> <aside> <footer> <nav> <article>

- 텍스트 입력 내용 태그
<h1>~<h6> <p> <br> <b> <strong> <i> <em> <u> <del> <s> <blockquote> <sub> <sup>

- 목록태그
<ul> <ol type="1, a, A, i, I"> <li>

- 표 입력 태그
<table> <caption> <tr> <td> <th> <thead> <tfoot> <tbody> rowspan colspan

- 이미지 입력 태그
<img src="" width="" height="" alt=-"">
<canvas  width="" height="" >

- 멀티미디어 입력태그
<object width="" height="" data=""> 오디오, 비디오, PDF
<embed src="" width="" height="">
<audio src="" width="" height="" controls autoplay loop muted>
<video src="" width="" height="" controls autoplay loop muted>

- 다른 문서 연결 및 문서 내에 특정 위치로 이동 시키는 태그
<a href="">

- web client에게 데이터 입력 받고, 전송하는 태그
<form action="전송데이터 처리할 서버 컴포넌트url" method="전송방식(get, post etc)">
<input type="" id="" name="전송되는 파라미터 명" value="전송되는 파라미터 값">
    > type="checkbox | radio | color | range | hidden | date | button | number | url | search | search | email | text | password | tel "
    > required(반드시 입력해야하는 속성 지정), autofocus, placeholder(어떻게 입력해달라는 힌트 제공)
<textarea rows="" cols=""></textarea>
<select> <option> </select> 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식(콤보박스)
</form>

 

< Quiz >

1. HTML 문법을 이루는 가장 작은 단위는 무엇인가요? 

더보기

엘리먼트 또는 태그

 

2. 다음 중 HTML 기본 구조의 구성 요소가 아닌 것을 고르세요. 
① DTD
② html
③ title
④ body
⑤ p

 

3. div 태그는 (   )요소와 (   )요소를 그룹 짓는 데 사용하고, span 태그는 (   )요소를 그룹 짓는 데 사용합니다.

더보기

 block / inline / inline

 

4. 목록을 생성할 때 사용할 수 있는 태그는 ____, ____, ____ 태그가 있습니다. 이 중에서 순서가 필요 없는 목록을 생성할 때는 ____ 태그를 사용하고, 목록 내용은 ____ 태그로 생성합니다. 그리고 순서가 있는 목록은 ____ 태그로 생성하는데, 이때 목록 내용은 ____ 태그로 생성합니다. 만약 정의형 목록을 생성하고 싶다면 ____ 태그를 사용하며, 용어의 제목에 해당하는 내용은 ____ 태그로, 설명에 해당하는 내용은 ____ 태그로 생성합니다.

더보기

ul, ol, li ,  ul, li, ol, li, dl, dt, dd

 

5. 다음 코드를 실행해 이미지를 클릭하면 새 창에서 네이버 사이트로 이동하도록 빈칸을 채워 주세요.
<a href="___"             target="___"        >
  <img    ___="./naver_logo.png"    ___="네이버 로고">
</a>

더보기

http://www.naver.com   /    _blank    /   src   /   alt

 

6. 다음 중 잘못 짝지어진 것을 고르세요.       
① form 태그 - 폼 양식을 의미합니다.
② input 태그 - 한 줄짜리 입력 요소만 생성합니다.
③ fieldset 태그 - 관련 있는 폼 요소끼리 그룹을 짓습니다.
④ textarea 태그 - 여러 줄을 입력할 수 있는 요소를 생성합니다.
⑤ select, option, optgroup 속성 - 세 속성 모두 콤보박스를 생성할 때 사용합니다.

더보기

 2번

*한 줄짜리 입력 요소만 생성 = 텍스트
*input은 다양한 요소를 받을 수 있음(텍스트, 오디오버튼, 링크, date 등등)

 

7. 다음 중 태그와 설명이 올바르게 짝지어진 것을 고르세요. 
① table 태그 - table 태그만 있으면 표를 생성할 수 있습니다.
② caption 태그 - 표의 제목을 지정하는 데 사용합니다.
③ tr 태그 - 표의 열을 생성할 때 사용합니다.
④ th, td 태그 - th 태그는 표에서 일반 내용 성격의 셀을 만들 때 사용하고, td 태그는 표에서 제목 성격의 셀을 만들 때 사용합니다.
⑤ thead, tfoot, tbody 태그 - 표의 열을 그룹 지을 때 사용합니다.

더보기

2번

 

8. 다음 중 시맨틱 태그를 모두 고르세요.   
① div 태그
② footer 태그
③ header 태그
④ p 태그
⑤ span 태그

더보기

2, 3번

 

* 내용참고&출처 : 태그의 수업을 복습 목적으로 정리한 내용입니다.

Comments