- 코딩테스트
- AI 플랫폼을 활용한 데이터 분석
- 정보처리기사
- r
- Machine Learning
- 오라클
- 이것이 취업을 위한 코딩테스트다 with 파이썬
- 코딩테스트 python
- 데이터베이스
- 파이썬
- SQL
- 인공지능기초다지기
- 빅분기
- PY4E
- 부스트코스
- 데이터 분석 기반 에너지 운영 관리자 양성 및 취업과정
- 난생처음 R코딩&데이터 분석 저서
- DB
- 프로그래머스
- 빅데이터분석기사
- 빅데이터 분석 기반 에너지 운영 관리자 양성 및 취업과정
- 기초다지기
- Ai
- [멀티잇]데이터 시각화&분석 취업캠프(Python)
- python
- boostcoures
- Oracle
- 이기적
- 네이버부스트캠프
- boostcourse
- Today
- Total
매일공부
[HTML] 웹 페이지의 구조와 내용 본문
- 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> 스크립트
- <meta> 메타데이터를 설정, 인코딩, 사용자 화면 설정, 키워드, 작성자, descript
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
5번
DTD 참고 : https://www.w3schools.com/tags/tag_doctype.asp
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번
* 내용참고&출처 : 태그의 수업을 복습 목적으로 정리한 내용입니다.
'Programming > web' 카테고리의 다른 글
| [Django] templates, static, db 경로 설정 (0) | 2023.08.07 |
|---|---|
| [Django] GitGuardian has detected the following Django Secret Key exposed within your GitHub account. (0) | 2023.02.09 |
| [Javascript] 웹 페이지의 행동 및 응용 프로그램 (0) | 2022.09.15 |
