HTML

Question 1

기본 구조 만들기

Answer 1

! 엔터키

Question 2

sementic tag 예시들기

Answer 2

<header></header>
main
footer
nav
article
section: 몇개의 콘텐츠가 비슷해서 묶는 용도
aside: 왼쪽 오른쪽 사이드 바
div

Question 3

몇개의 콘텐츠가 비슷해서 묶는 sementic tag

Answer 3

<section></section>

Question 4

text tag 예시들기

Answer 4

<p></p>

h1, h2, h3, h4, h5, h6 (숫자 커질수록 작아짐)
span
blockquote
그리고<.br>까지

Question 5

인용문 넣는 text tag

Answer 5

<blockquote></blockquote>

Question 6

p안에 따로 css 넣고 싶은 글 부분이 있다면?

Answer 6

<span></span>

Question 7

text 특수효과 예시들기

Answer 7

Bold:
<b></b>
strong

Italics:
<i></i>
em

Question 8

리스트 만들기

Answer 8

<ul>
<li></li>
</ul>

<ol .type=”1/a/A/i/I” start=”목록시작번호”>
<li></li>
</ol>

Question 9

unorderedlist 특징 바꾸기

Answer 9

start=”목록시작번호”
type=”1/a/A/i/I”

Question 10

표 만들기

Answer 10

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

Question 11

표 특수 기능

Answer 11

colspan=”int” 가로로 길어지기
rowspan=”int” 세로로 길어지기

Question 12

이미지 추가

Answer 12

<img src="경로" alt="대체문구" width="크기">

Question 13

하이퍼링크

Answer 13

<a href="경로">나타나는 문구</a>

<!--만일 h1 태그를 하이퍼링크하고 싶다면-->
<h1><a href="">내용문구</a></h1>

Question 14

오디오와 비디오 삽입

Answer 14

<video src="경로" width="크기" autoplay controls></video>
이거 외에도 preload="auto/metadata/none*", poster="경로" (thumbnail image), loop, muted라는 특징이 있다

<audio src="경로" controls></audio>

멀티미디어 파일 삽입
<embed src="" width="" height="">

영상, 음악, PDF 삽입
<object data="" width="" height=""></object>

Question 15

object tag는 src 대신 무슨 속성을 쓸까?

Answer 15

data=””

Question 16

video tag에 여러 속성들 나열하기

Answer 16

autoplay, loop, muted, controls
preload=”auto/metadata/none”
poster=”경로”

Question 17

form 속성

Answer 17

(mnat)

method: get/post
(post는 데이터 길이제한 없고 보안성이 좋다. 
get은 query string에 포함되어서 전달된다.)

name: (javascript에 쓸 폼 이름)

action: (서버 프로그램 지정해주기)

target: _blank/_self*/_parent/_top

Question 18

form 관련 tag

Answer 18

<fieldset></fieldset> :폼 요소를 그룹으로 묶음

<legend></legend>: fieldset의 제목 붙여줌

<label>나타나는 텍스트<input type="text"></label>

<label for="관련id이름"></label>
<input id="관련 id이름"></input>

Question 19

<input></input> 속성

Answer 19

type=””
autofocus (페이지 키면 마우스 커서)
placeholder(입력란 힌트. 클릭시 사라짐)
readonly
required

Question 20

<input type="">

Answer 20

1. text
2. password
   -size(입력박스 크기)
   -value(initial input값)
   -maxlength(들어가는 값 크기)
3. search (꼽표 있음)
4. url
5. email
6. tel
7. radio (하나만 선택)
   -name(radio끼리 같아야지 택1가능)
   -value(안보임)
8. checkbox (두개이상 선택)
   -value
9. number (화살표 위아래)
   -min
   -max
   -step
   -value
10. range (bar로 나타남)
    -min
    -max
    -step
    -value
11. date/month/week
12. time/datetime-local
13. submit/reset
    -value(버튼에 글)
14. image (submit기능을 하는 이미지)
    -src
    -alt
15. button
    -value
    -onclick = “window.open(‘notice.html’)”
16. file (파일선택/찾아보기 버튼)
17. hidden (화면상으로 안보이지만 서버로 전송)

Question 21

input 대체 tag들

Answer 21

<select><option></option></select>

<datalist><option></option></datalist>

<button></button>

Question 22

select의 속성들

Answer 22

<select>
    <option></option>
    <option></option>
        -value(서버로 넘기는 값
        -selected(기본 값, 처음에 정해진 애)
</select>

    -size(드롭다운 개수)
    -multiple(여러개 선택)

Question 23

datalist의 속성들

Answer 23

<input type="text" list="id 네임">
    <datalist id="id 네임">
        <option value=""></option>
    </datalist>
</input>

Question 24

button의 속성들

Answer 24

type=””:
submit
reset
button