html 파일

<!--
CSS(cascading style sheets) : 문서를 예쁘게 '꾸미는'언어
javaScript : 문서의 '기능'을 만들어주는 언어
->마우스 올리면 보이는 이미지, 누르면 들어가지는 자주묻는질문

1 콘텐츠를 가지는 태그
<div> 콘텐츠 </div>
열리는태그   닫히는태그

2 콘텐츠를 가지지 않는 태그
<br /> 닫히는 태그 없이 /로 셀프클로징
단일태그

<div title="제목">Content</div>
    속성  값
    속성  값                 콘텐츠
->a : 링크로 이동

주의 : 들여쓰기 내여쓰기에 따라 부모요소 자식요소의 관계를 볼수있다.
html의 주석은 누구나 볼수 있기 때문에 보안자료 입력금지
-->

<!--문서버전 -->
<!DOCTYPE html>
<!--html 문서 시작 선언 및 문서 언어설정 -->
<html lang="ko">
    <head>
        <!--문서제목 -->
        <title>문서 제목</title>
        <meta charset="UTF-8">
        <meta name="description" content="이 문서는 실습 문서입니다.">
        <meta name="author" content="weare">
        <!-- head에 들어가는 내용들
        1 타이틀
        브라우저 탭에서 볼수 있음
       
        2 메타데이터
            1 인코딩 정보
                charset(character set)은 문서에서 허용하는 문자의 집합, 규칙에 따라 사용할수있는
                문자가 제한된다.
            2 문서 설명
            3 문서 작성자
        3 css. jacaScript
        -->
       
        <!-- 스타일 여기다 구현해도 되고 너무 길면, 따로 css 파일만들어 링크해줘도 됨
        <style>
            body{
                color: blue;
            }
        </style>-->

        <link rel="stylesheet" href="stlye.css" />

        <!-- 스크립트
        1 콘텐츠 방식 : 콘텐츠를 가지지 않는 경우도 있음 but 단일태그 아닌 종료태그 꼭필요
        <script>
            const hello='world';
            console.log(hello);
        </script>
       
        2 링크방식
        <script src="script.js"></script>
        -->
    </head>

    <!--실제 사용자가 눈의로 볼 수 있는 문서의 내용-->
    <body>
        문서의 내용 수정하고 저장하게 되면
        자동으로 새로고침 된다
        <!--
        1 block (블록 레벨 요소) : 레고 블록처럼 차곡차곡 쌓이고 화면 너비가 꼭 차는 요소
        -블록의 크기와 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
        -인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없다.

        대표적인 블록 레벨 요소
        <div>, <article>, <section>
        -->
            <div>블록1</div>
            <div>블록2</div>
            <div>블록3</div>
        <!--
        2 inline(인라인 레벨요소)
        블록 요소 내에 포함되는 요소.
        -주로 문장, 단어 같은 작은 부분에 사용되며 한 줄에 나열된다.
        -좌/우에 여백을 넣는 것만 허용된다.

        대표적인 인라인 레벨요소
        -<span>, <a>, <strong>
        -->
            <!--css에서 여백을 넣어준것 확인할것 -->
            <span>인라인 </span> 인라인 옆글자
            <div>나는 블록</div>
        <!--
        3 inline-block
        글자처럼 취급되나, block 태그의 성질을 가지는 요소.
        -block과 마찬가지로 크기와 내/외부의 여백을 지정할 수 있다.
        -CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소이다.
        -->
    </body>
</html>

 

css파일

body{
    color: blue;
}


span {
    padding-left:10px;
    /* 자세히 보면 span은 상단 여백은 넣어줘도 적용이 안됨 */
    padding-top:10px;
}

div {
    padding-top:100px;
    padding-bottom:100px;

 

chapter5 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>멀티미디어 실습</title>
        <link rel="stylesheet" href="chapter05.css" />
    </head>

    <body>
        <!-- alt는 경로에 없을경우 대체 글자 -->
        <img src="assets/감시.png" alt="감시"/>
        <img src="assets/없는위치.png" alt="감시"/>
        <br><br>

        <!-- autoplay는 자동 재생까지 된다. -->
        <video src="assets/권상우.mp4"></video>
        <video src="assets/권상우.mp4" autoplay></video>
        <br><br>
        <!-- autoplay는 자동 재생까지 된다. -->
        <video src="assets/지구.webm">
            비디오 태그 재생 안되는 브라우져에 쓰임
            비디오 영역입니다.
        </video>
        <br><br>
        <!--controls까지 있어야 재생 플레이어가 생김-->
        <audio src="/assets/백조들의춤.mp3"></audio>
        <audio controls src="/assets/백조들의춤.mp3"></audio>

        <!-- 일반 이미지는 인라인레벨, figure 들어간순간 블록레벨이됨 -->
        <img src="assets/감시.png" alt="감시" />
        <figure>
            <!-- figcation 이미지 사이에 들어가면 안됨
            구현은 되지만 하지 않기로 약속 -->
            <img src="assets/감시.png" alt="감시" />
            <figcation>감시 이미지 입니다.</figcation>
            <img src="assets/감시.png" alt="감시" />
        </figure>

        <!-- width : 가로길이 /height : 세로길이 -> 똑같이 설정해야함
        viewBox="0 0 24 24"  24:24 즉 가로세로 1:1 비율로-->
        <?xml version="1.0" ?>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
        fill="black" width="50px" height="50px"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z"/></svg>
        <!-- 크기가 커져도 깨지지 않는것을 볼수있음 -->
        <?xml version="1.0" ?>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
        fill="black" width="100px" height="100px"><path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z"/></svg>
       
        <!-- svg 파일이 있다면 코드가 아니라 그냥 가져올수도 있음  -->
        <img width="500" height="500" src="assets/없는경로.svg" alt="svg 아이콘" />
       
    </body>
</html>

chapter5 -table

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>테이블 실습</title>

    </head>

    <body>
        <table>
            <!-- 보기는 같아도 thead와 tbody는 구조적 분리됨 -->
            <thead>
                <tr>
                    <th>cell 셀의제목1</th>
                    <th>cell 셀의제목2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>cell 셀1</td>
                    <td>cell 셀2</td>
                </tr>
                <tr>
                    <!-- colspan로 두칸차지 -->
                    <td colspan="2">cell 셀1</td>
                    <td>cell 셀2</td>
                </tr>
            </tbody>

            <tfoot>
                <td>마지막</td>
                <td>tfoot</td>
            </tfoot>
        </table>
       
    </body>
</html>
 

chapter5 -list

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>리스트 실습</title>

    </head>

    <body>
        <ul>
            <!-- 동그란점, 블록레벨요소 -->
            <li>리스트</li>
            <li>리스트</li>
            <li>리스트</li>
            <li>
                리스트
                <ul>
                    <li>
                        하위 리스트

                        <ul>
                            <li>
                                하위 리스트
                            </li>
                        </ul>

                    </li>
                </ul>

            </li>
        </ul>

        <!-- ol도 비슷하고 양식만 다름, 섞어쓸수도 있음 -->
        <ol>
            <li>리스트</li>
            <li>리스트</li>
            <li>리스트</li>
            <li>
                리스트
                <ol>
                    <li>
                        하위 리스트

                        <ol>
                            <li>
                                하위 리스트
                            </li>
                        </ol>

                    </li>
                </ol>
               
            </li>
        </ol>

        <!-- 둘다, 블록레벨요소 -->
        <dl>
            <dt>레고</dt>
            <dd>강의를 듣는 사람</dd>
            <dd>잘생김</dd>
        </dl>
       
    </body>
</html>

chapter5 -iframe

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>테이블 실습</title>

    </head>

    <body>
        <!-- 아이프레임을 지원하는 브라우저는 내용을 가져옴 -->
        <iframe src="chapter05-table.html">
            <!-- 브라우저가 아이프레임을 지원하지 않을땐 이문구가 뜸 -->
            브라우저가 아이프레임을 지원하지 않습니다.
        </iframe>
       
        <iframe name="sample" src="https://example.com/"></iframe>

        <!-- 이 링크를 눌렀을때, 위 링크게 바뀌게 하는법 -->
        <a href="chapter05-list.html" target="sample">리스트 실습</a>
        <a href="chapter05-table.html" target="sample">테이블 실습</a>
        <a href="chapter05.html" target="sample">멀티미디어 실습</a>
    </body>
</html>

chapter5 -form

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>폼 태그 실습</title>

    </head>

    <body>
        <!-- aciton은 전송시 이동할 경로, get은 주소에 모든 정보가 표시
        (비밀번호 포함) post방식은 가려줌. 네트워크 텝에 페이로드에서 볼수있음-->
        <form action="chapter05-form-result.html" method="post">
           
            <label for="username">아이디 </label>
            <!-- 인풋 박스 만들어짐 -->
            <!-- value는 미리 입력된 값 -->
            <!-- 위의 라벨의 for와 아래의 id="username"으로 연결됨
            동작 : 아이디 글자를 누르면 아이디 텍스트에 커서감
            또 id값은 그 문서에서 한번만 나와야함 -->
            <input id="username" name="id" type="text" value="1234">
           
            <!-- 라벨 안에 인풋을 넣으면 비밀번호 누를때 연결되게함 -->
            <label>
                비밀번호
                <input name="password" type="password">
            </label>
           
            <label for="option">옵션 선택</label>
           
            <!-- 선택 박스 -->
            <!-- required는 값을 필수로 받을건지 유무 -->
            <select id="option" name="opt" required>
                <option>옵션1</option>
                <option>옵션2</option>
                <option>옵션3</option>
            </select>

            <!-- 체크 박스 생성 -->
            <!-- id와 for를 연결해 '약관에 동의합니다.' 글씨 누르면 체크됨 -->
            <!-- required는 값을 필수로 받을건지 유무 -->
            <input id="agree" type="checkbox" value="checked"
            name="checkbox" required>
            <label for="agree">약관에 동의합니다</label>

            <!-- name="number" 를 넣어주면 1 2이 다 연결되서
            그 중에 하나 선택할수 있게 바뀜
            안넣어주면 한번 클릭시 해체 안됨
            value="1"는 전송 됐을때 주소에 보내는 값-->
            <input type="radio" name="number" value="1" required>1
            <input type="radio" name="number" value="2" required>2
            <!-- submit이 디폴트 값이라 안써줘도 똑같음 -->
            <button type="submit">전송!</button>
            <br><br>

            <!-- 파일첨부, 브라우저마다 디자인은 조금씩 다름 -->
            <input type="file">
            <br><br>
            <!-- type="button" 이라 눌러도 전송이 안됨 -->
            <input type="button" value="나는 버튼이에요.">
            <button>전송!</button>

            <br><br>
            <!-- 히든이라 안보이게 됨, 개발자 도구상으로 볼수있음
            value="samplecode" 는 제출할 벨류 -->
            <input type="hidden" name="where" value="samplecode">
            <button>전송!</button>
            <br><br>
           
        </form>

        <!-- 이번엔 method=get으로 바꿈-->
        <form action="chapter05-form-result.html" method="get">
            <label for="option">옵션 선택</label>
            <!-- 선택 박스 -->
            <select id="option" name="opt">
                <!-- 밸류를 비워놔야 선택하세요가 전송되는 일이 없다. -->
                <option value="">선택하세요</option>
                <!-- value가 있으면 설정된 이름 "옵션2-값"이 주소값으로 감
                없다면 '옵션3' 이 넘어감  -->
                <option value="옵션2-값">옵션1</option>
                <option value="옵션3-값">옵션2</option>
                <option>옵션3</option>
            </select>
            <button>전송!</button>
           
            <!-- readonly로 값 고정하고 입력 못하게 함 -->
            <label for="username">아이디 </label>
            <input id="username" name="id" type="text" readonly value="1234"
            placeholder="아이디를 입력하세요.">
            <label>
                비밀번호
                <input name="password" type="password">
            </label>

            <br><br>
            <!-- placeholder 설명이 들어감(아이디를 입력하세요.) -->
            <label for="username">아이디 </label>
            <input id="username" name="id" type="text" placeholder="아이디를 입력하세요.">
            <label>
                비밀번호
                <input name="password" type="password">
            </label>
            <!-- 비밀번호 형식의 가이드 입력 -->
            <!-- disabled을 이용해 아예 입력이 안되도록 비활성화 -->
            <input type="tel" placeholder="010-0000-0000형식" disabled>
            <br><br>

            <!-- 텍스트 입력칸 생성 cols="30" 가로 30글자
            rows="10" 세로 10글자 크기, 텍스트창 마우스 크기조절도 가능 -->
            <textarea name="" id="" cols="30" rows="10">안녕하세요</textarea>

        </form>

    </body>
</html>

 

+ Recent posts

티스토리툴바