HTML 5편

25048 단어 htmlhtml

  • <video> : 동영상을 출력하는 태그.

  • <form> : 폼 태그.

  • action : 정보를 보낼 서버의 주소를 명시.

  • method : 정보가 전달되는 방식을 정하는 메소드.(get, post)
    -get : 도메인 뒤에 입력한 정보의 값이 붙어서 서버에 전송되는 방식. 보안에 취약함. 디폴트값.
    -post : 입력한 정보의 값이 암호화 되어서 서버에 전송되는 방식.

  • <input> : 입력받는 태그.
    -type: 타입 속성.
           -text : 일반 문자
           -password : 대체 문자
           -file : 파일선택
           -radio : n개 중 1개만 선택할 때 사용. name은 같고 value가 달라야한다.
           -checkbox : n개 중 n개를 선택할 때 사용. name은 같고 value가 달라야한다.
                           checked옵션으로 디폴트값 설정 가능.
           -submit : 제출. action에 지정한 경로에 method의 방식으로 정보가 전달됨.
    -name:이름 속성.
    -size:크기 속성.

  • <textarea> : 글 입력 태그
    -row : 줄을 설정.
    -cols : 글자수를 설정.

  • <select> : drop-down으로 선택하는 태그.
    -multiple : 다중 선택. n개의 선택이 가능하게 함.

  • <option> : 옵션 태그.

  • <div> : 레이아웃 구성 태그. br태그 없이 개행이 이루어짐.

  • <span> : 레이아웃 구성 태그. 한 줄로 쭉 이어지는 태그.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video controls ="controls">
            <source src = "비디오 소스" type = "video/mp4" />
        </video>
        <!--   다음처럼 합쳐서도 사용 가능 <video src ="비디오 소스"  type = "video/mp4" controls ="controls"></video> -->

        <form action="#" method="get">
            이름:<input type ="text" name="username"/><br/>
            ID:<input type ="text" name="userID"/><br/>
            PW:<input type ="password" name="userPW"/><br/>
            연락처:<input type ="text" name="userphone1" size="3"/> - <input type ="text" name="userphone2" size="4"/> - 
            <input type ="text" name="userphone3" size="4"/><br/>
            사진:<input type="file" name="userpic"/><br/>
            성별:<input type ="radio" name="gender" value="W">여
                <input type ="radio" name="gender" value="M">남<br/>
            언어:<input type="checkbox" name="lan" value="kor" checked="checked"/>한글,
                <input type="checkbox" name="lan" value="eng"/> 영어,
                <input type="checkbox" name="lan" value="fran"/> 불어,
                <input type="checkbox" name="lan" value="Ger"/> 독어<br/>
            자기소개:<textarea row="5" cols="20">자기소개를 써주세요!</textarea><br/>
            국적:<select>
                <option>Korea</option>
                <option>USA</option>
                <option>France</option>
                <option>Germany</option>
            </select><br/>
            선호음식:<select multiple="multiple">
                <option>Pizza</option>
                <option>Pasta</option>
                <option>Chicken</option>
                <option>Salad</option>
            </select><br/>
            <input type ="submit"/>
        </form>
        <br/><br/>

        <div>block_01</div><div>block_02</div><div>block_03</div>
        <div>block_04</div>
        <div>block_05</div>
        <div>block_06</div> 

        <span>span_01</span><span>span_02</span><span>span_03</span>  
        <span>span_04</span>  
        <span>span_05</span>  
        <span>span_06</span>          

    </body>
</html>
실행 화면
가위, 바위, 보 게임 만들기
5주차 개발일지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage