본문 바로가기
웹퍼블리셔수업

12/29(화)웹퍼블리셔수업 6회차

#쇼퍼제리 2020. 12. 29. 21:03

비디오태그

로컬 옮긴후

 

이미지와 같이 똑같이 업로드한다.

 

http://romeonews.woobi.co.kr/green/wp/video/Wildlife.mp4

업로드 확인한다.

 

교재 72페이지

비디오플러그인

https://videojs.com/

 

Video.js - Make your player yours

Make your player yours with the internet's most popular open source video player framework

videojs.com

해당 사이트에서 절대경로css 링크와 스크립트를 복사해준다

 

★절대경로css

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />

★스크립트

 <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

 

소스정리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
    <title>video</title>
</head>
<body>
    <video controls poster="/green/WP/img/Penguins.jpg" width="350" id="my-video" class="video-js" data-setup="{}">
        <source src="/green/WP/video/Wildlife.mp4" type="video/mp4">
    </video>
    <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</body>
</html>

 

폼태그

  • action =입력데이터의 전달위치를 지정한다.
  • method = 입력데이터의 전달 방식을 선택한다.
  • GET , POST 구분
    GET = 주소데이터를 전달(용량제한)
    POST= 헤드의 데이터를 묻어간다.(용량제한없음)
    (교재 77페이지~78페이지)

 

 

http://romeonews.woobi.co.kr/green/wp/form.html

소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼</title>
</head>
<body>
    <form action="https://search.naver.com/search.naver" method="GET">
        <input type="text" name="query">
        <input type="submit">
    </form>
</body>
</html>

 

 

  • value= 버튼위에 나타나는 글자이고 , 나머지는 다 값이다
  • placeholder= (투명한데 글자가 없어지는것)
  • checkbox는 이름으로 전송한다 name=태그를 이용
  • hidden 사용자에게 값을 숨겨주기때문에 value= 값을 정해준다.
  • image의경우 당연히 src= 를 이용
  • radio 의경우 name을 동일하게 하면 여러개중에 하나만 선택 , name을 틀리게 하면 다중 선택 가능

교재 80페이지

http://romeonews.woobi.co.kr/green/wp/input1.html

 

소스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼</title>
</head>
<body>
    <form action="" method="GET">
        <input type="text" placeholder="이름을 쓰세요." name="query"><br>
        <input type="button" value="나는버튼"><br>
        <input type="checkbox" name="mycheck"><br>
        <input type="file" name="myfile"><br>
        <input type="hidden" name="myhidden" value="12"><br>
        <input type="image" src="img/Penguins.jpg" width="100"><br>
        <input type="password" name="mypassword"><br>
        <input type="radio" name="myradio" value="1"><input type="radio" name="myradio" value="2"><input type="radio" name="myradio" value="3"><input type="radio" name="myradio" value="4"><br>
        <input type="reset" value="리셋">
        <input type="submit" value="전송">
    </form>
</body>
</html>

라벨

라벨안에 인풋을 감쌀경우 라벨을 눌러도 체크가 된다.

http://romeonews.woobi.co.kr/green/wp/label.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label</title>
</head>
<body>
    <label> 아이디
        <input type="text">
    </label>

    <label for="userPwd">비밀번호</label>
    <input type="password" id="userPwd">

    <label for="userAge">나이</label>
    <input type="text" id="userAge">

    <label for="userHab">취미</label>
       <input type="checkbox" id="userHab">
</body>
</html>

 

교재 81페이지

 

input의경우 단일 태그이나

textarea의경우 전역속성

http://romeonews.woobi.co.kr/green/wp/textarea.html

소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea</title>
</head>
<body>
    <textarea name="mytext" id="mytext" cols="30" rows="10"></textarea>
    <pre>
        pre테스트
    </pre>
</body>
</html>

 

select태그(교재85페이지)

 

select 태그에서 

multiple은 여러개 선택할때 넣어준다.실제로 크게는 안쓰일듯 (다중 체크등이 나을듯)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select</title>
</head>
<body>

    <label for="myselect">나이</label>
    <select name="myselect" id="myselect" multiple>
        <option value="0">선택</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <label for="yourselect">지역</label>
    <select name="yourselect" id="yourselect">
        <option value="0">선택</option>
        <optgroup label="경남">
            <option value="1">부산</option>
            <option value="2" selected>울산</option>
            <option value="3">양산</option>
        </optgroup>
        <optgroup label="경북">
            <option value="4">대구</option>
            <option value="5" selected>경산</option>
        </optgroup>
    </select>
</body>
</html>

 

fiedlset태그

 

legend 태그=이름

http://romeonews.woobi.co.kr/green/wp/fieldset.html

소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>필드셋</title>
</head>
<body>
    <form>
    <fieldset>
        <legend>사용자</legend>
        <label for="userId">아이디</label>
        <input type="text" id="userId">
        <label for="userPwd">비번</label>
        <input type="text" id="userPwd">
    </fieldset>
</form>
</body>
</html>

div태그은 block 형태

span태그는 inline 형태

(교재91페이지)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>화면분활</title>
    </head>
    <body>
        <div>블록단위 / 넓이가 부모의 100%</div>
        <div>블록단위</div>
        <div>블록단위</div>
        <div>블록단위</div>
        <span>인라인단위 / 넓이, 높이가 없다</span>
        <span>인라인단위</span>
        <span>인라인단위</span>
        <span>인라인단위</span>
        <span><p>문단</p></span>
        <img src="img/Penguins.jpg" alt="" width="150">
        <img src="img/Penguins.jpg" alt="" width="150">
        <img src="img/Penguins.jpg" alt="" width="150">
        <img src="img/Penguins.jpg" alt="" width="150">
    </body>
</html>

 

 

 

 

참고사이트

https://www.w3schools.com/

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML

 

 

 

 

 

 

 

오늘수업 참고하면 좋을만한 부분

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

저작자표시

'웹퍼블리셔수업' 카테고리의 다른 글

비주얼스튜디오코드 유용한 익스텐션 정리  (0) 2021.02.01
1/7(목)웹퍼블리셔수업 8회차  (0) 2021.01.07
1/5(화)웹퍼블리셔수업 7회차  (0) 2021.01.05
12/24(목)웹퍼블리셔수업 5회차  (0) 2020.12.24
12/22(화)웹퍼블리셔수업 4회차  (0) 2020.12.22

'웹퍼블리셔수업' Related Articles

티스토리툴바