2023. 10. 11. 00:42ㆍweb
<22주 – 전반부-HTML>
8. HTML의 개요, 특징, 기능 및 장단점? (P.5, 7-8)
html은 웹페이지를 기술하기 위한 마크업 언어이다
마크업 언어는 텍스트에 태그를 붙여서 문서의 어디에 해당하는지 기술한 언어이다
- 별도의 컴파일러 필요 없고,
- 웹 브라우져에서 해석 가능한 쉬운 언어
- 구조화된 정보 검색과 전달
- 다양한 데이터 타입 제공이 어려움
9. HTML을 구성하는 기본 골격 태그를 순서대로 기술하시오? (P.14, 16)
태그로 구성
<html>태그는 문서의 시작과 끝을 나타내며 그 안에는 <head>와<body>를 포함한다
<head>는 문서의 메타 데이터를 포함하며 <body>태그는 실제 웹페이지의 내용을 포함한다
10. <head>태그내에 포함할 수 있는 태그들을 열거하고 설명하시오? (P.18)
<title>, <meta>, <script>, <style> 이 있다
<STYLE> … </STYLE> : 문서 전체의 레이아웃을 결정하여 문서에 통일감을 줌
11. 주로 내용을 단락으로 구분하고 정렬하는데 사용하는 문단 태그들은? (P.33)
<div>,<p>,<h숫자>,<br>,<center>
12. <PRE>태그의 간단한 설명? (P.34)
엔터키, 특수 문자, 공백 같은 것을 그대로 출력한다 즉 입력상태 그대로 출력한다
13. <div>와 <span> 태그의 정의 및 사용 방법(P.46,48)
블록 태그 <div>
배경 : Table 태그는 <Tr>, <td> 등에 의해 사용이 복잡 자유로운 영역 지정 필요
정의 : 화면의 영역을 분할하여(사용), 블록을 정의
항상 새 라인에서 시작하여 출력한다
양 옆에 다른 콘텐츠 배치하지 않고 한 라인 독점 사용
인라인 태그 <span>
정의 : 문장 단위의 텍스트 영역을 지정
블록 속에 삽입되어 블록의 일부로 출력
자체로는 역활이 없으며 특정 구역에 css스타일 지정시 사용
공통점 : <div>나 <span> 둘 다 영역을 지정한다
차이점 : <div>는 사각형 박스 모양으로 문단 단위의 구역을 지정 <span> 한 문장내 단위 구역 지정
14. 이미지 태그 사용법? (P.57-58)
<img src="그림파일명" alt="설명문“
width="가로“ height="세로"
border="테두리" align="정렬방식“
vspace="상하여백" hspace="좌우여백">
src에는 그림이 위치하는 경로와 파일명을 쓰면 된다 위에는 좀 뭔가 많은데 기본적으로 css이기때문에
기본적인 예제만 한 개 알고 있음 될 것 같다
<img src="/home/house.jpg" width="300" height="200" alt="좋은 집">
alt는 src에 있는 이미지를 로드하지 못했을 때 표시되는 대체 텍스트다
15. 순서와 비 순서의 목록 만들기 (P.64)
<ol> <ul> 태그 <lh>는 그 순서의 제목이고 <li>로 나열한다
목록의 제목
1. 목록1
2. 목록2
3. 목록3
이런식으로 나타내고 싶음
<ol>
<lh> 목록의 제목
<li> 목록1
<li> 목록2
<li> 목록3
</ol>
이렇게 만들면 되고
목록의 제목
- 목록1
- 목록2
- 목록3
이런식으로 나타내고 싶음
<ul>
이런식으로 하면 된다 ul , ol이 햇갈린다면 ul은 unorderList의 약자이고 ol은 orderList의 약자임을 기억해라
<ol>은 1. 2. 3. 이런식으로도 할 수 있지만 <ol type="a"> 이렇게 쓰면 a. b. c. 이런식으로 나타낼 수 도 있다
<ul> 또한 <ul type="squre"> 이렇게 적으면 동그라미가 아닌 네모로 목록이 된다
16. 테이블 태그에 대해서
코드 한번씩 보기
- 셀과 셀간의 간격, 셀과 셀내 내용간의 간격을 정의하는 태그의 속성은? (P.80, 86)
cellspacing : 셀과 셀간의 간격을 정의한다 ex) <table cellspacing=2>
cellpadding : 셀과 셀내 내용간의 간격을 정의한다 ex) <table cellpadding>
- 테이블 태그 사용의 테이블 작성? (P.88-89)
- 셀간의 열 합치기와 행 합치기의 각각 속성은? (P.91) colspan, rowspan
17. “중간고사” 하이퍼링크를 클릭하면 “hyper.html” 웹 페이지를 새 창에 출력하는 HTML 명령어 문장을 작성하시오? (P.99)
<a href="hyper.html" target="_blank"> 중간고사 </a>
18. 하이퍼링크를 사용한 책갈피 만들기 (p.102, 105)
<a href="#chap1"> 챕터 1장으로 가기 링크</a>
....
<a id="chap1"> 챕터 1장</a>
19. iFrame 구성하기 (p.113, 115)
- iFrame 태그의 사용방법
iframe 태그는 html문서안에 또 다른 html 문서나 페이지를 넣을 수 있게하는 태그이다
<iframe src="https://www.etnnews.com" witdh="300" height="200"> 이런식으로 사용
name ="right" name="left" 등을 써서 원하는데 배치시킬 수 있다
20. 음악 및 비디오 파일을 실행하기 위해 HTML 태그를 작성하시오? (P.120, 123)
<video src=“media/bear.mp4" width="320" height="240" controls autoplay>
브라우저가 video 태그를 지원하지 않습니다.
</video>
autoplay를 써서 자동으로 재생이 된다
<audio src="mymusic.mp3" controls autoplay loop></audio>
autoplay를 써서 자동으로 재생이 되고 loop때문에 반복되게한다
21. 태그를 설명하면 태그명을 빈칸에 채우기? (p.142-144)
22. 시맨틱 태그?
- 목적 : 검색 엔진으로 하여금 정보탐색이 용이토록 제공하기 위함 (P.6)
- 정의(용도) : 문서의 구조와 의미를 전달하는 태그 (P.7)
- 종류 : <header>, <nav>, <section>, <article>, <figure>, <main>, <summary>, <mark>, <time>
23. 개인정보의 화면 폼 생성하시오. (P.27-28, 35-36, 44-46, 49, 53-55, 58, 61)
<프로그램 빈칸 채우기>
- 폼에 action 걸기, submit, reset, 이메일 창 구동
- 테이블내 text, 선택박스, 체크박스, textarea, 첨부파일 삽입방법
- 이건 귀찮으니 ppt 참고
24. 사전식 태그의 사용법? (p.55)
<datalist>
목록 리스트를 작성하는 태그이다
<option> 태그로 항목들을 하나하나씩 표현한다
<input type=“text”>에 입력 가능한 데이터 목록 제공한다
<form>
나라 : <input type="text" list="countries"><br>
<datalist id="countries">
<option value="가나">
<option value="스위스">
<option value="브라질">
</datalist>
보고싶은것 : <input type="text" list="what"><br>
<datalist id="what">
<option value="산">
<option value="바다">
<option value="도시">
</datalist>
</form>25. 태그를 설명하면 태그명을 빈칸에 채우기? (p.87)
'web' 카테고리의 다른 글
| web 프로그래밍 중간고사 정리 4장 (1) | 2023.10.12 |
|---|---|
| web 프로그래밍 중간고사 정리 1장 (0) | 2023.10.04 |
| [22주]-2장-HTML-전반부-기본문서-2023-09-11 번외 (3) | 2023.09.18 |
| [22주]-2장-HTML-전반부-기본문서-2023-09-11 중요 부분 (0) | 2023.09.18 |
| [11-2주-11]-1장-웹프로그래밍-2023-09-05 중요 부분 (0) | 2023.09.18 |