기록
  • [ 공부/front-end ]
    HTML-2일차
    2023년 11월 14일 17시 38분 47초에 업로드 된 글입니다.
    작성자: 삶은고구마

    오전:어제 강의 복습

     

    -file - save workspace as - 내가 사용할 프로젝트 폴더 경로에 파일 저장.

    해당 파일 실행하면 그 경로에 있는 (생성/실행했던) 프로젝트들이 editor list에 나옴. 

    =>매번 vsc 실행 하지 않고 파일만 실행하면 됨.

     

    -gitignore:설정하지 "않을" 파일들 작성(무시할 파일만)

    -branch 생성 시 보통 목적/이름 이런식으로 네이밍하는게 보기 편함. ex) bugfix/texttest

    -3-way merge : base / commit1 / commit2

    3-way merge

     

     

    true merge

     

    - true merge 이 개념이 좀 헷갈리는데..

    기존의 master에서 작업이 2가지로 분리 됨 master-master / master - feature/animal

    이런 경우엔 빨리감기 병합이 불가능(1번째방법)하므로 새로 병합해야한다.(맨 오른쪽)

    (컨플릭트 발생 가능)

     

    확장기능 : Auto Rename Tag 추천

    태그 시작과 끝 중 하나 수정시 나머지도 동일하게 수정됨

    태그 사이에 자식태그도 포함 시킬 수 있다.

    태그에 타이틀 작성 시 마우스 호버 시 내가 적은 내용이 보인다.

    타이틀

     

     

    label의 for는 input의 id와 같아야한다.

     

    java 도형그리기때처럼 좌표는 항상 왼쪽상단~오른쪽하단으로 증가

     

     

    index.html

    더보기 
    <!DOCTYPE html>
<html>
    <head>
        <!-- 페이지에 노출되지 않는 설정 정보-->
        <meta charset="utf-8">
        <title>🎅HTML🤶</title>
    </head>
    <body>
        <h1>HTML</h1>
        <!-- 
            index.html은 랜딩페이지로써, 
            특정 폴더 하위에 파일이름이 지정되지 않은 경우 응답하는 파일.
            http://192.168.20.37:5500/01_html/ 로 접속해도 index.html을 찾음(소문자 index)
        -->
        <!-- 
            hyper text 다른 페이지를 향한 링크가 걸린 텍스트
            -상대경로 : 현재 페이지 기준으로 경로 탐색
                - ./ 현재 폴더(생략가능)
                - ../ 부모 폴더
            -절대경로 :  /로 시작 , http://로 시작하는 url
            상대,절대경로 모두 사용할 수 있음
        -->
        <!-- 인라인-->
        <a href="./foo.html">foo</a> <!--현재 폴더-->
        <a href="../02_css/bar.html">Bar</a> <!--부모 폴더로-->
        <a href="/02_css/bar.html">Bar2</a> <!--절대 경로-->
        <a href="http://192.168.20.37:5500/02_css/bar.html">Bar3</a>  <!--절대 경로-->
    </body>
</html>

<!--1114-->
<!--ul>li>a-->
<ul>
    <!--블락-->
    <li><a target="_top" href="01_text.html">텍스트 관련 태그</a></li>
    <li><a target="_top" href="02_list.html">목록 관련 태그</a></li>
    <li><a target="_top" href="03_global_attributes.html">공통 속성</a></li>
    <li><a target="_top" href="04_table.html">테이블 속성</a></li>
    <li><a target="_top" href="05_display.html">요소구분 inline|block</a></li>
    <li><a target="_top" href="06_image.html">이미지 관련</a></li>
    <li><a target="_top" href="07_link.html">링크 관련</a></li>
    <li><a target="_top" href="08_iframe.html">iframe</a></li>
    <li><a target="_top" href="09_media.html">미디어 관련</a></li>
    <li><a target="_top" href="10_form.html">폼 관련</a></li>
</ul>

     

     

    01_text.html

    더보기 
    <!-- !+탭 html 문서 자동완성 -->
<!-- emmet html태그 자동완성 기능 -->
<!-- http://kor.pe.kr/util/4/charmap2.htm 특수문자 -->
<!-- https://www.w3schools.com/html/default.asp -->
<!-- https://developer.mozilla.org/ko/docs/Web/HTML/Element/abbr -->

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


    <!--h${안녕}*6 -->
    <!-- 아래로 갈 수록 제목 폰트 사이즈 작아짐-->
    <h1>Text</h1> 
    <h2>Text</h2>
    <h3>Text</h3>
    <h4>Text</h4>
    <h5>Text</h5>
    <h6>Text</h6>

    <!-- 문단 태그 -->
    <!-- 
        개행문자,탭문자,공백문자는 모두 그룹지어 공백1개로 처리된다. 엔터를 수십번 사용해도 공백 1개로 처리된다는 것.
        공백을 더 주고싶다면 &nbsp;를 사용하자.
    -->
    <p>
       춥다!!!! &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;반갑습니다. </br>
       너무추워~~~~~~~</br>
    </p>

    <!-- 
        1114 pre 태그 : pre-formatted 개행/탭/공백을 모두 그대로 출력 
        이클립스 doc (상단에 작성)에서 사용한 그 pre 태그
    -->
    <pre style="font-family: 'Courier New',Courier, monospace;">
        pre 태그 테스트 ,,,
        내가 아무렇게나 써도 
        작성한
        그 
          대
            로
              출력해줌.

    </pre>
    <!-- pre>code-->
    <pre>
        <code>
            function foo()
            {
                console.log('foo');
            }

        </code>
    </pre>

    <!-- 특수문자 표현&문자-->
    <p>
        &lt;p&gt;&lt;&#47;p&gt;를 "표현"하기
    </p>

    <!-- 수평선 태그 <hr> -->
    <hr>
    <hr>
    <h2>Pharse Tags</h2>
    <!-- 
        특수한 기능을 가진 시멘틱 태그(의미 태그) 중 text 관련된 태그
        태그의 목적과 내용을 일치 시켜서 사용하는 태그.
        -스크린 리더(검색봇,시각장애인)에 의해 해석이 가능하다.
        -웹 접근성 향상
        
    -->
    <em>기울여서 강조 처리</em></br>
    <strong>볼드체로 강조 처리</strong></br>
    <mark>하이라이팅 처리</mark></br>
    <ins>밑줄로 강조 처리</ins><br>
    <del>취소선 처리</del>
    <p>
        <!-- abbreviation 줄임말 태그-->
        <abbr title="Artificial Intelligence">AI</abbr>란 인공지능을 가리킨다.
    </p>
    <p>
        자바에서 출력문은 <code>System.out.println();</code>메소드를 사용한다.
    </p>
    <p>
        <!-- 두개의 태그 속성을 섞어서 사용할 수 있음. 기울임+볼드 -->
        <strong><em>웹접근성</em></strong>은 정말 중요합니다.
    </p>
</body>
</html>

     

     

    02_list.html

    목록태그

    -순서가 있는 목록(넘버링):영문표기, 숫자표기,로마자 표기 등등 다양하다.

    -순서가 없는 목록(넘버링x):동그라미,네모 등 앞에 다양한 모양을 붙일 수 있음.

     

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | 목록</title>
</head>
<body>
    <!-- 목록 태그는 두개가 있다. 순서가있는/없는 목록-->
    <h1>목록</h1>
    <!-- 순서가 있는 목록 ORDERD LIST -->
    <ol style="list-style:lower-alpha;">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JAVA SCRIPT2015</li>
    </ol>

    <!-- 순서가 없는 목록 UNORDERD LIST : 앞에 동그라미(bullet) -->
    <ul style=list-style:square;">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>
            JAVA SCRIPT2015
            <ul>
            <li>React.js</li>
            <li>Vue.js</li>
            <li>Svelte.js</li>
            </ul>
        </li>
    </ul>
    <!-- 설명 목록 태그 Description List dt-dd세트 -->
    <dl>
        <!-- title 속성은 tooltip 형태로 마우스 호버시 제공.-->
        <dt title="웹">Web</dt>
        <dd><strong>1990년 팀 버너스리가 만들고 오픈소스화 하였다.</strong></dd>
        <!-- dt+dd하면 동시에 생성가능-->
        <dt>HTML</dt>
        <dd>Hyper Text Markup Language의 약자이다..</dd>
        <dd>페이지의 정보를 계층구조로 표현할 수 있다.</dd>
        <dd>링크를 통해 다른 페이지로 연결 할 수 있다.</dd>
    </dl>
</body>
</html>

     

     

    03_global_attributes.html

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Global Attributes</title>
</head>
<body>
    <h1>Global Attributes</h1>
    <a href="https://www.w3schools.com/tags/ref_standardattributes.asp">
        html global attribute
    </a>
    <br>
    <!-- id : 페이지 내 태그의 식별자. 태그별로 유일한 값을 작성 -->
    <em id = "hello">안녕</em>
    <!-- em#bye{잘가} -->
    <em id="bye">잘가</em> 
    <!-- class : 태그 그룹핑. 그룹별로 css/js 적용할 때 사용-->
    <!-- p>lorem :아무말이나 채워주는 태그-->
    <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus possimus odit nesciunt architecto tenetur, magni nam doloribus recusandae in officia atque obcaecati veritatis maxime et, molestias amet voluptas. Quisquam, cum!</p>
    <!-- p.para>lorem-->
    <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum similique distinctio harum at nulla molestias consectetur facere vero fuga repellat itaque, libero voluptates? Eius aliquid magni quasi fugit cum culpa.</p>
</body>
</html>

     

     

    04_table.html

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Table</title>
    <style>
        table{
            border:1px solid black;
            border-collapse: collapse;
        }
        th, td{
            border:1px solid pink;
            padding: 10px;
        }
        #resume{
            width:500px
        }
    </style>
</head>
<body>
    <!-- 표를 만들 수 있다. 기본:경계선없음/경계선 만들수는있음! -->
    <title>HTML | Table</title>
    <h1>Table</h1>
    <!--
        <table> 테이블 관련 최상위 태그.
            <thead> 헤더 행을 감싸는 태그
            <tbody> 내용 행을 감싸는 태그
            <tfoot> 푸터 행을 감싸는 태그
                <tr> 행 태그
                    <th> 제목 셀 태그
                    <td> 내용 셀 태그

    -->
    <!-- table>thead>tr>th*3-->
    <table>
        <!-- 캡션같은거는 적을 수 있는데 테이블 태그 안에 p태그나 다른 태그는 사용x-->
        <caption>웹 브라우져 표</caption>
        <thead>
            <tr>
                <th>브라우져명</th>
                <th>제조사</th>
                <th>홈페이지</th>
            </tr>
        </thead>
        <!--tbody>(tr>td)*3 
            이렇게 괄호로 묶어서 내가 원하는대로 태그를 만들수 있다.-->
        <!--tbody>tr>td*3-->
        <!-- tbody>(tr>td*3)*3 -->
        <tbody>
            <tr>
                <td>Edge</td>
                <td>ms</td>
                <td><a href="https://microsoft.com">https://microsoft.com</a></td>
            </tr>
            <tr>
                <td>Chrome</td>
                <td>google</td>
                <td><a href="https://google.com">https://google.com</a></td>
            </tr>
            <tr>
                <td>safari</td>
                <td>apple</td>
                <td><a href="https://apple.com">https://apple.com</a></td>
            </tr>
        </tbody>
       <!--tfoot 추가-->
       <!--tfoot>tr>th*2 -->
       <tfoot>
        <tr>
            <th>총 갯수</th>
            <!-- colspan 2개로 확장 col:가로 /row:세로 -->
            <th colspan="2">3</th>
        </tr>
       </tfoot>
    </table>

    <hr>

    <h2>행 | 열 확장</h2>
    <!-- 행 확장(세로) rowspan-->
    <!-- 열 확장(가로) colspan-->

    <!-- 예제 : 간단한 자기 소개표 만들어보기 -->
    <table id = "resume">
        <thead>
            <tr>
                <th colspan="4">자기소개 테이블</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td 
                    img src="./gom.jpg"
                    colspan="2" 
                    rowspan="2" 
                    style="width:130px; height:150px">사진</td>
                <th style="width:80px;">이름</th>
                <td>농담곰</td>
            </tr>
            <tr>
                <th>연락처</th>
                <td>010-7777-7777</td>
            </tr>
            <tr>
                <th style="width:70px;">주소</th>
                <td colspan="3">농담시 농담구 농담동 11번지</td>
            </tr>

            <tr>
                <th style="height:100px;">자기소개</th>
                <td colspan="3">잘 부탁 드립니다.</td>
            </tr>

        </tbody>

    </table>
    <hr>

    <!-- 환율고시표 이미지 대로 테이블 만들어보기.. -->
   <table>
    <thead style="background-color: khaki;">
        <tr>
            <th rowspan="2">통화</th>
            <th rowspan="2">매매<br>기준율</th>
            <th colspan="2">현찰 매매율</th>
            <th colspan="2">전신환 매매율</th>
            <th rowspan="2">T/C<br>매도율</th>
        </tr>
        <tr>
            <th>매도율</th>
            <th>매입율</th>
            <th>매도율</th>
            <th>매입율</th>
            
        </tr>
    </thead>
    <tr>
        <td style="height:100px">미국(USD)</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
   </table>
</body>
</html>

     

     

    05_display.html

    block:전체 페이지 길이만큼 영역 확보 (h1~h6,div,p...)

    inline:콘텐츠 길이만큼 영역 확보 (strong,em..)

    둘의 차이.

     

     

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Display</title>
</head>
<body>
    <h1>Display</h1>
    <h2>요소구분 inline | block</h2>
    <!--
        block 요소: 좌우를 채워서 영역을 차지하는 요소 h1~h6,p,div
        inline요소: "내용만큼만" 영역을 차지하는 요소 span,em,strong 등..
    -->
    <!--div(division) 영역을 의미하는 태그-->
    <h3>blck 요소</h3>
    <div style="background-color: hotpink;">하나</div>
    <div style="background-color: aqua;">둘</div>
    <div style="background-color: tan;">셋</div>

    <h3>inline 요소</h3>
    <span style="background-color: hotpink;">하나</span>
    <span style="background-color: aqua;">둘</span>
    <span style="background-color: tan;">셋</span>
  
</body>
</html>

     

     

    06_image.html

    이미지 높이 너비 등 결정시 

    절대단위:200px 같이 픽셀 단위로 결정. =>창 크기 변해도 고정

    상대단위:부모크기에 맞춰 %(비율)로 결정. =>창 크기에 따라 사이즈 변경

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Image</title>
</head>
<body>
    <!--인라인-->
    <h1>image</h1>
    <!--
        src 이미지 경로
        alt 대체 텍스트. 이미지 로드 실패시 화면에 노출될 텍스트. 
            스크린 리더에 의해 해석,전달된다. 
    -->
    <!-- ../ <-부모 경로 -->
    <!-- 높이,너비 수정시 하나만 수정. 둘다 수정하면 비율 이상해짐.-->
    <img src="../sample/image/flower1.PNG" alt="분홍벚꽃" style="width:200px">
    <!-- 절대경로-->
    <img src="/sample/image/flower1.PNG" alt="분홍벚꽃" style="width:200px">
    <img src = "https://ichef.bbci.co.uk/news/640/cpsprodpb/E172/production/_126241775_getty_cats.png" 
    alt="고양이">

    <h2>절대 | 상대 단위</h2>
    <h3>px : 절대단위</h3>
    <div>
        <img src="/sample/image/flower1.PNG" width="100px" alt="">
        <img src="/sample/image/flower2.PNG" width="100px" alt="">
        <img src="/sample/image/flower3.PNG" width="100px" alt="">
        <img src="/sample/image/flower4.PNG" width="100px" alt="">
        <img src="/sample/image/flower5.PNG" width="100px" alt="">
    </div>
    <h3>% : 상대(가변)단위</h3>
    <!--
        부모 태그 기준으로 상대 크기를 결정한다.
        부모 기준으로 퍼센테이지 크기이기 때문에 부모가 1000px인경우와 200px인 경우 같은 15%여도 다름    
    -->
    <div>
        <img src="/sample/image/flower1.PNG" width="15%" alt="">
        <img src="/sample/image/flower2.PNG" width="15%" alt="">
        <img src="/sample/image/flower3.PNG" width="15%" alt="">
        <img src="/sample/image/flower4.PNG" width="15%" alt="">
        <img src="/sample/image/flower5.PNG" width="15%" alt="">
    </div>

    <h2>정렬</h2>
    <!-- div>img+p>lorem-->
    <div>
        <!--인라인과 블락 요소를 섞으면 인라인 옆에 블락이 붙지 않고 개행되어 아래에 출력됨-->
        <img 
            src="../sample/image/river1.PNG" 
            width="200px" 
            style="float:left; margin:10px;"
            alt="">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure exercitationem odit mollitia, nihil voluptatem quibusdam consequuntur ratione itaque impedit soluta veniam magnam aut similique ullam. Accusantium necessitatibus eius qui cupiditate!</p>
    </div>

    <div>
        
        <img 
            src="../sample/image/river1.PNG" 
            width="200px" 
            style="float:right; margin:10px;"
            alt="">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure exercitationem odit mollitia, nihil voluptatem quibusdam consequuntur ratione itaque impedit soluta veniam magnam aut similique ullam. Accusantium necessitatibus eius qui cupiditate!</p>
    </div>

</body>
</html>

     

     

    07_link.html

    텍스트 말고 이미지에도 특정 사이트 등의 링크를 걸 수 있다.

    혹은 이미지의 특정 영역만 선택하여 링크를 걸 수 있다.

     

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Link</title>
</head>
<body>
    <h1>Link</h1>
    <h2>target</h2>
    <!-- 기본 값 (생략 가능) _self -->
    <a href="./" target="_self">인덱스 현재 탭에서 열기..</a>
    <!-- 새 탭에서 열기 _blank -->
    <a href="./" target="_blank">인덱스 새 탭에서 열기..</a>

    <h2>Image Link</h2>
    <a href="./">
        <img src="../sample/image/flying_pig.jpg" width="100px" alt="">
    </a>

    <!-- 하나의 이미지 링크에 영역을 나눠서 다른 링크들을 걸 수있음 -->
    <!-- 직사각형 영역 left top ~ right bottom -->
    <!-- 이미지 영역쉽게 설정하는 사이트 https://www.image-map.net/-->
    <img src="../sample/image/forest1.PNG" width="200px" alt="" usemap="#imgmap">
    <map name="imgmap">
        <!-- 
            shape 영역모양 rect | circle | poly
            coords 좌표 x1,y1,x2,y2
            href 링크
            alt
            target
        --> 
        <area shape="rect" coords="0,0, 100,200" href="https://naver.com" alt="네이버">
        <area shape="rect" coords="100,0 ,200,200" href="https://daum.net" alt="다음">
    </map>

    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/E172/production/_126241775_getty_cats.png" usemap="#image-map">
    <map name="image-map">
    <area target="_self" alt="cat_nose" title="cat_nose" href="https://cdn.imweb.me/upload/S2020073042b4f52becd2f/4c45cdad2f928.jpg" 
    coords="334,241,31" shape="circle">
</map>


    <!--북마크-->
    <h2>Bookmark(anchor)</h2>
    <!--div>ul>li>a-->
    <div>
        <ul>
            <!-- #:현재페이지-->
            <li><a href="#content1">내용1</a></li>
            <li><a href="#content2">내용2</a></li>
            <li><a href="#content3">내용3</a></li>
            <li><a href="#:~:text=exercitationem voluptates numquam debitis">하이라이팅 북마크</a></li>
        </ul>
    </div>
    <!-- div : 태그들을 묶는 용도-->
    <!--div>h3+(p>lorem)*2-->

    <div>
        <h3 id="content1">내용1</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
        <p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
        <p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
    </div>

    <div>
        <h3 id="content2">내용2</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
        <p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
        <p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
    </div>

    <div>
        <h3 id="content3">내용3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
        <p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit dignissimos illo corrupti iure id, illum itaque. Nam aut adipisci, tenetur voluptates doloremque quibusdam praesentium minus cum inventore nulla, ea a.</p>
        <p>Commodi autem veniam et asperiores assumenda hic iure, exercitationem voluptates numquam debitis, ipsa dolore fugiat. Alias, quam? Corrupti architecto consequatur praesentium autem quia. Quibusdam reprehenderit, ut cumque sit quaerat qui?</p>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div>
        <ul>
            <li><a href="#content1">내용1</a></li>
            <li><a href="#content2">내용2</a></li>
            <li><a href="#content3">내용3</a></li>
            <li><a href="#top">맨위로</a></li>
        </ul>
    </div>
</body>
</html>

     

     

    08_iframe.html

    페이지 내의 프레임을 나눠서 각기 다른 컨텐츠를 보여줄 수 있음.

    youtube 영상 embed - 링크 복사 하면 iframe으로 되어있음. 그대로 코드에 적용하면 된다.

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Iframe</title>
</head>
<body>
    <h1>iframe</h1>
    <!--
        페이지 내에 다른 페이지를 포함해서 출력
    -->
    <iframe src="./" frameborder="0" width="100%"></iframe>
    <iframe src="04_table.html" frameborder="1" width="100%" height="100%"></iframe>

    <iframe width="560" height="315" 
    src="https://www.youtube.com/embed/cp4aUznNvJ0?si=VlxRjiHuKSceB2-p" 
    title="YouTube video player" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen></iframe>
</body>
</html>

     

     

    09_media.html

    이미지 외에 영상,오디오등도 페이지에 삽입가능하다.

    브라우저마다 최적화된 자원을 선택하여 재생 - 용량이 큰 미디어는 사용 지양 할 것.

    (속성명=속성값이 일치하는 경우 속성명만 사용해줘도 된다.)

    mute:음소거

    autoplay:자동재생(브라우저마다 작동 상이함)

    loop:재생종료후 반복

    controls:시작,일시정지등 조작할 수 있는 ui가 나옴.

     

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | Media</title>
</head>
<body>
    <h1>Media</h1>
    <!--
        html5에서는 미디어 관련해서 별도의 플러그인 없이 재생이 가능하다.
    -->
    <h2>audio</h2>
    <!-- controls 라는 속성을 추가해야 누를 수 있는 것이 생김 -->
    <!-- 속성명=속성값 2개가 동일한 경우, 속성값을 생략 가능. -->
    <!-- 자동재생:autoplay 브라우저마다 실행되는 경우,안되는 경우 있음.-->
    <!-- 음소거:mute , 반복재생:loop -->
    <audio src="../sample/audio/major.mp3" 
    autoplay
    muted
    loop
    controls="controls"></audio>

    <!--오디오/속성 따로지정-->
    <!--같은 컨텐츠를 여러 확장자로 준비한 경우..디바이스 별로 최적화된 자원을 재생한다-->
    <audio controls>
    <source src="../sample/audio/major.mp3">
    </audio>

    <!--비디오 역시 controls 속성을 부여해야 재생 버튼이 보임-->
    <h2>video</h2>
    <video 
    src="../sample/video/small.mp4"
    muted 
    loop
    poster = "../sample/image/flower5.PNG"
    controls>
    </video>

    <!--
        디바이스 별로 최적화된 자원을 선택 재생.
        -pc browser : mp4/webm/ogg 순으로 선호
        -mobile browser : mp4/3gop 순으로 선호

        서버 부하를 줄이기 위해 용량이 큰 동영상 파일은 별도의 미디어 서버나
        유튜브, vimeo 등을 통해 제공하는 것이 좋다. (위의 링크같이 사용하지 않고..)
    -->
    <video>
        <source src="../sample/video/small.webm" type="video/webm" controls>
        <source src="../sample/video/small.ogv" type="video/ogg" controls>
        <source src="../sample/video/small.mp4" type="video/mp4" controls>

    </video>
</body>
</html>

     

     

    10_form.html << 중요하다.

    label for = input id 

    이거 하나라도 확실히 외우자.

     

    더보기 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML | form</title>
</head>
<>
    <h1>Form</h1>
    <!-- 
        사용자 입력값을 서버로 전송하기 위한 form과 input 태그 등을 제공..
        name:폼의 이름 (서버로 전송되지 않음. 페이지내에서 구분을 위한 용도)
        action:제출할 서버 주소 (url)
        method:http 메시지를 작성하는 방법
            -get:기본값, 사용자 입력값을 url에 query-string 형식으로 전달
            -post:사용자 입력값을 http 메시지 바디에 작성 (url에서 확인불가)

        query-string 작성 시, key=value형식에 사용되는 key값:name속성값
        form 하위 input태그는 name속성을 반드시 가지고 있어야 한다....
    -->
    <form name="loginFrm" action="10_form.html" method="get">
        <label for="username">아이디</label>
        <input type="text" id="username" name="_username">
        <br>
        <label for="password">비밀번호</label>
        <input type="password" id="password" name="password">
        <br>
        <input type="submit" value="로그인">
    </form>

    <h2>text</h2>
    <form action="" method="get">
        <!-- 입력값들을 시각적으로 그룹핑 -->
        <fieldset>
            <legend>text관련 input 태그</legend>

            <label for="memberName">회원명</label>
            <input 
                type="text" 
                id="memberName" 
                name = "memberName" 
                value="신사임당"
                placeholder="이름을 입력하십시오.."
                required
                >
        <br>
        <label for="memberPw">비밀번호</label>
        <input 
                type="password" 
                name="memberPw" 
                id="memberPw" 
                placeholder="비밀번호를입력하시오"
                value="1234"
                maxlength="8"
                required
                >
        <br>
        <label for="searchKw">검색</label>
        <input type="search" name="searchKw" id="searchKw" placeholder="검색어입력!">  
        
        <label for="memberEmail">이메일</label>
         <!-- email 유효성검사 -->
        <input type="email" name="memberEmail" id="memberEmail">   
        <br>
    
        <label for="homepage">홈페이지</label>
        <!-- url 유효성검사 -->
        <input type="url" name="homepage" id="homepage">   
        <br>

        <label for="memberTel">전화번호</label>
        <!--숫자 키 패드 제공-->
        <input type="tel" name="memberTel" id="memberTel">   
        <br>
    
    </fieldset>

        <input type ="submit" value="제출">
    </form>

    <form action="">
        <fieldset>
            <legend>number 관련 input</legend>
            <label for="cnt">개수</label>
            <input 
             type="number" name="cnt" id="cnt" 
             min="1"max="10" value="1" step="2">

            <br>
            <label for="score">점수</label>
            <input type="range" name="socre" id="score" min="0" max="100">
            <br>
        </fieldset>
        <input type="submit" value="제출">

    </form>

    <!-- 날짜 포맷 : yyyy-mm-dd 이 형식 하나뿐임.-->
    <!-- 시간 : 18%3A15 18:15에서 :가 %3A가 됨 시간도 24:00 이 형식 하나뿐임 -->
    <form action="">
        <fieldset>
            <legend>날짜/시간관련 input</legend>
            <label for="someday">날짜</label>
            <input type="date" name="someday" id="somday" value="2002-01-01">
            <br>
            
            <label for="sometime">시각</label>
            <input type="time" name="sometime" id="sometime" value="21:30">
            <br>

            <!-- 
                2023-11-14T16%3A18 에서 T는 날짜/시간 구분자임 
            -->
            <label for="when">날짜/시각</label>
            <input type="datetime-local" name="when" id="when"
            value="2002-08-08T16:20">

        </fieldset>
        <input type="submit" value="제출">
    </form>

    <form action="">
        <fieldset>
            <legend>선택관련 input</legend>
            <!-- 단일선택 input:radio 체크하면 name의 value값이 날라감 gender=M -->
            <!-- 선택없이 제출하면 아무것도 안날아감-->
            <div>
                성별: 
                <label for="gender-male">남</label>
                <input type="radio" name="gender" id="gender-male" value="M" checked>
                <label for="gender-female">여</label>
                <input type="radio" name="gender" id="gender-female" value="F">
            </div>
            
            <!-- radio, checkbox의 default value는 on -->
            <div>
                <label for="sms">sms수신</label>
                <input type="checkbox" name="sms" id="sms">
            </div>
            




            <!-- 복수선택 input:checkbox -->
            <!-- INPUT의 NAME값이 같아야 그룹핑 됨. -->
            <div>
                취미:
                <input type="checkbox" name="hobby" id="hobby-game" value="GAME" checked>
                <label for="hobby-game">게임</label>
                <input type="checkbox" name="hobby" id="hobby-movie" value="MOVIE">
                <label for="hobby-movie">영화</label>
                <input type="checkbox" name="hobby" id="hobby-music" value="MUSIC">
                <label for="hobby-music">음악</label>

            </div>


            <!-- 단일/복수 선택 select -->
            <select name="menu" id="menu" multiple>
                <option value="">==메뉴==</option>
                <option value="된">된장찌개</option>
                <option value="김" selected>김치찌개</option>
                <option value="순">순두부찌개</option>
            </select>

            <!-- 선택 & 선택지 없으면 작성 datalist-->
            <label for="userBrowser">브라우져 선택</label>
            <input type="text" name="userBrowser" id="userBrowser" list="browsers">
            <datalist id="browsers">

                <!-- <option value="Edge">엣지</option>
                <option value="Chrome">크롬</option>
                <option value="Firefox">파이어폭스</option> -->

                <option value="Edge"/>
                <option value="Chrome"/>
                <option value="Firefox"/>

            </datalist>
        </fieldset>
        <input type="submit" value="제출">
    </form>


    <!-- favoriteColor=%238a2828 : %23 = # 뒤에는 해당컬러 hex값-->
    <form action="">
        <fieldset>
            <legend>기타 input</legend>
            <div>
            <label for="favoriteColor">선호색상</label>
            <input type="color" name = "favoriteColor" id="favoriteColor"
            value="#8a2828">
        </div>

        <div>
            <label for="upFile">파일선택</label>
            <input type="file" name="upFile" id="upFile">
        </div>
        
        <!-- 사용자에게 노출 없이 서버로 전송 :눈에는 안보이는데 제출버튼누르면 val=123이 날아감-->
        <div>
            <input type="hidden" name="val" value="123">
        </div>
        
        <!-- 노출은 되지만 서버로 전송되지 않는다. disabled -->
        <div>
            <input type="text" name="name" value="홍길동" disabled>
        </div>

        </fieldset>
        <!-- 버튼 태그를 만드는 2가지 방법-->
        <!-- 1.ipnut-->
        <div>
            <input type="button" value="버튼">
            <input type="reset" value="초기화">
            <input type="submit" value="제출">
        </div>

        <!-- 2.button-->
        <!-- div>button[type]*3-->
        <!-- 버튼으로 생성할 때 기본은 제출이라 다른 버튼만들거면 타입 명시해야함!-->
        <div>
            <button type="button">버튼</button>
            <button type="reset">초기화</button>
            <button type="submit">제출</button> <!-- type:submit 기본값 -->
            <button>제출~</button>
        </div>


      
    </form>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</body>
</html>

     

     

    1.오늘까지 한 html 예제들 git 업로드 완료

    2.실습과제 3종 완료

    3.테이블 그리기 연습하기

    ->colspan / rowspan 전 총 행,열이 몇인지부터 파악.

     

     

    저작자표시 비영리

    '공부 > front-end' 카테고리의 다른 글

    1128 Javascript 5일차  (1) 2023.11.28
    JavaScript-5일차  (0) 2023.11.23
    Javascript-1일차  (0) 2023.11.17
    HTML-2일차(CSS)  (0) 2023.11.15
    HTML-1일차  (1) 2023.11.13
      댓글

    티스토리툴바