** html 연습문제 1208 (table태그 / form태그 / imput태그 / textarea / select / div) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>연습문제</title>
</head>
<body>
    <form action="join.html" name="form1" method="get">
        <table align="center" bordercolor="#CCDDFF" border="1" cellspacing="0">
            <tr>
                <th colspan="2" bgcolor="#CCDDFF">회원 기본 정보</th>
            </tr>
            <tr>
                <td align="center" bgcolor="#EEEEEE">아이디:</td>
                <td><input type="text" name="my_id" width="15" /><span>4~12자의 영문 대소문자와 숫자로만 입력</span></td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">비밀번호:</th>
                <td><input type="text" name="my_password" width="15" /><span>4~12자의 영문 대소문자와 숫자로만 입력</span></td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">비민번호확인:</th>
                <td><input type="text" name="my_password_confirm" width="15" /></td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">메일주소:</th>
                <td><input type="text" name="my_mail" width="20" /><span>예) id@domain.com</span></td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">이름:</th>
                <td><input type="text" name="my_name" width="20" /></td>
            </tr>
            <tr>
                <th colspan="2" bgcolor="#CCDDFF">개인 신상 정보</th>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">주민등록번호:</th>
                <td><input type="text" name="my_address" width="20" /><span>예) 134561234567</span></td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">생일:</th>
                <td><input type="text" name="my_year" size="4" maxlength="4">년
                    <select name="my_month">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>월
                    <select name="my_day">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">10</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>일
                </td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">관심분야:</th>
                <td>
                    <input type="checkbox" name="My_hobby" value="conputer" />컴퓨터
                    <input type="checkbox" name="My_hobby" value="internet" />인터넷
                    <input type="checkbox" name="My_hobby" value="trip" />여행
                    <input type="checkbox" name="My_hobby" value="movie" />영화감상
                    <input type="checkbox" name="My_hobby" value="music" />음악감상
                </td>
            </tr>
            <tr>
                <th bgcolor="#EEEEEE">자기소개:</th>
                <td>
                    <textarea name="my_intro" cols="50" rows="5" style="resize:none"></textarea>
                </td>
            </tr>
        </table>
        <br />

        <div align="center">
            <input type="submit" value="회원 가입" />
            <input type="reset" value="다시 입력" />
        </div>
        
    </form> 
</body>
</html>

** 예제 1207_15 (평행이동 변환하기) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>평행 이동 변환하기</title>
    <style>
        /*
        div{
            width: 200px;
            height: 100px;
            border: 1px dotted black;
            background-color: yellow;
        }

        div#box2{
            transform:translate(100px, 50px);
        }
        */

        /* 2번 회전 변환 
        div{width:100px; height:100px; border:1px dotted black;
            background-color: lightgreen; margin: 30px;}
        div#box1{transform:rotate(45deg);}
        div#box2{transform:rotate(-90deg)}
        */

        /* 3변 기울기 변환 */
        div{width:100px; height:100px; border:1px dotted black;
            background-color: lightgreen; margin: 50px;}
        div#box1{transform:skewX(50deg);}
        div#box2{transform:skewY(-30deg);}
        div#box3{transform:skew(20deg, 10deg);}

    </style> 
</head>
<body>
    <!--
    <div id="box1">
        박스1
    </div>
    <div id="box2">
        박스2
    </div>
    -->

    <!--2번 회전 변환
    <div>
        기본박스(0deg)
    </div>
    <div id="box1">
        박스 1(45deg)
    </div>
    <div id="box2">
        박스 2(90deg)
    </div>
    -->

    <!--3번 기울기 변환-->
    <div>
        기본박스(0deg)
    </div>
    <div id="box1">
        박스1
    </div>
    <div id="box2">
        박스2
    </div>
    <div id="box3">
        박스3
    </div>    
    
</body>
</html>


** 예제 1208_2 (애니메이션 속성) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>애니메이션 속성</title>
    <style>
        /* 1번 무한반복 좌우로 이동하는 박스 
           @keyframes 애니메이션 이름 지정
        div{
            width:100px; height:100px;
            background: red;
            position:relative;
            animation:boxmove 5s linear infinite alternate;
        }

        @keyframes boxmove{
            from{left: 0px;}
            to{left:300px;}
        }
        */

        /* 2번 웹문서가 로드된 후 일정 시간 후에 애니메이션 시작 */
        /* 3번 애니메이션 진행방향 설정
        div{
            width:100px; height:50px;
            background: red;
            position: relative;
            animation: boxmove 5s linear infinite;  //alternate;
        }

        #box1 {animation-delay: 3s; animation-direction: reverse;}
        #box2 {animation-delay: 5s; animation-direction: alternate-reverse;}

        @keyframes boxmove{
            from{left: 0px;}
            to{left:300px;}
        }
        */
        
        /* 4번 애니메이션 반복횟수 설정(iteration, count 속성)
        div{
            width:100px; height:50px;
            background: red;
            position: relative;
            animation: boxmove 5s;
        }

        #box1 {animation-delay: 3s; animation-direction: reverse;
               animation-iteration-count: 2;}
        #box2 {animation-delay: 5s; animation-direction: alternate-reverse;
               animation-iteration-count: 5;}

        @keyframes boxmove{
            from{left: 0px;}
            to{left:300px;}
        }    
         */
        /* 5번 애니메이션 타이밍 설정 */
        div{
            width:100px; height:50px;
            background: red;
            position: relative;
            animation: boxmove 5s alternate;
        }

        #box1 {animation-delay: 1s; 
               animation-iteration-count: 3;
               animation-timing-function: ease;}
        #box2 {animation-delay: 2s; 
               animation-iteration-count: 3;
               animation-timing-function: linear;}
        #box3 {animation-delay: 3s; 
               animation-iteration-count: 3;
               animation-timing-function: ease-out;}

        @keyframes boxmove{
            from{left: 0px;}
            to{left:300px;}
        }
        
    </style>
</head>
<body>
    <!-- 1번 무한반복 좌우로 이동하는 박스
    <div>애니메이션 박스</div>
    <p><strong>참고 : </strong>잘 이동하는지 확인합니다.</p>
    //-->
    <!-- 2번 웹문서가 로드된 후 일정 시간 후에 애니메이션 시작 3번//
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <p><strong>참고 : </strong>잘 이동하는지 확인합니다.</p>
    -->
    <!-- 4번 애니메이션 반복횟수 설정(iteration, count 속성)
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <p><strong>참고 : </strong>잘 이동하는지 확인합니다.</p>
    -->
    <!-- 5번 애니메이션 타이밍 설정-->
    <div id="box1">애니메이션 박스1</div>
    <div id="box2">애니메이션 박스2</div>
    <div id="box3">애니메이션 박스3</div>
    <p><strong>참고 : </strong>잘 이동하는지 확인합니다.</p>
    
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

** 선택자(selector) 란? **

- CSS의 효과가 적용될 태그를 지정

예) h1 {color:blue;font:12px;}

 

 

* Id 선택자

- id속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨 / 우선순위가 가장 높다.

- css선택자에서는 #을 사용해서 id임을 표시

<style type="text/css">
#memo{color:red;}
</sytle>
<div id="memo">
	red
    </div>

→ id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함.

 

* Class 선택자 *

- class속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용

- class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음

- css선택자에서는 '.'을 사용해서  class임을 표시

- 예) </style>

        <div class="red">red</div>

        <p class >

 

        .red{         }

 

 

* type 선택자 *

- 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용

- css선택자에서는 태그의 이름을 사용함

 

* 하위 선택자 *

- 특정 엘리먼트의 하위에 나오는 엘리면트를 선택하는데 사용

- 부모가 먼저 나오고 자식이 나중에 나옴

- 공백을 통해서 부모와 자식을 구분

 

* 하나의 CSS선언을 여러 개의 선택 자에 적용 *

- 하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용 / 선택자와 선택자를 ,(콤마)로 구분

- 예제)

- h1과 #link 선택자 사이에 ,(콤마)를 두어 글씨의 색을 붉은색으로 지정

 

* 스타일링 링크 꾸미기 *

- 링크는 4가지의 상태를 가지고 있고, 각 상태에 따라소 시각적으로 다른모양을 가질 수 있음

방문하지 않은 링크 a:link{}
방문했던 링크 a:visited{}
마우스르 오버한 링크 a:hover{}          <!--a:link와 a:visited 뒤에 와야함-->
마우스를 누른 상태의 링크 a:active{}          <!--a:hover뒤에 와야함-->

 

* 두개의 클래스 적용 *

 

 

 

 

 

 

 

 

 


** 예제 1207.html (id, class선택자) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>id, class선택자</title>
    <!--overflow:hidden (내용이 넘치면 자름. 자른 부분은 안보임.)
        float:left (정렬-왼쪽)-->
    <style>
        #memo{
            color:red;
            font-size:30px;
        }
        #memo2{
            color:orange;
            font-size:50px;
        }

        #header{
            width:800px;
            margin:0 auto;
            background:red;
        }

        #wrap{
            width:800px;
            margin:0 auto;
            overflow:hidden;
        }
    
        #aside{
            width:200px;
            height:100px;
            float:left;
            background:blue;
            overflow:scroll;
            overflow:hidden;
        }
        #content{
            width:600;
            float:left;
            background-color:green;
        }

        .red{
            color:red;
        }
        .intro{
            color:blue;
        }
    </style>
</head>
<body>
    <!--
     <h1>id 선택자</h1>
     <div id="memo">
        red
     </div>
     <div id="memo2">
        red2
     </div>
    -->

    <!--id가 순서대로 적용
    <div id="header">
        <h1>#header 태그 적용</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>#aside 태그 적용#aside 태그 적용#aside 태그 적용#aside 태그 적용#aside 태그 적용</h1>
        </div>
        <div id="content">
            <h1>#contect 태그 적용</h1>
        </div>
    </div>
    -->

    <!--클래스 선택자-->
    <div class="red">red</div>
    <p class="red intro">Hello World</p>
</body>
</html>


** 예제 1207_2.html (하위 선택자) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>하위 선택자</title>
    <style>
        #navigation li a{
            color:orange;
        }
        h1, #link{
            color:red;
        }

        a:link{
            color:red;
        }
        a:visited{
            color:aqua;
        }
        a:hover{
            color:greenyellow;
        }
        a:active{
            color:orange;
        }

        .select{
            color:pink;
            font-size:30px;
        }

        .header{background-color:blue;color:orange}
        .item{color:yellow;}

        li.select2{
            color:brown;
        }
        input[type="text"]{
            background:orange;
        }
        h3, #link{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <!--하나의 CSS선언을 여러 개의 선택 자에 적용 시작-->
    <div id="navigation">
        <ul>
            <li>홈</li>
            <li><a href="http://www.daum.net">제품소개</a></li>
            <li>고객센터</li>
        </ul>
    </div>
    <ul>
        <li>홈</li>
        <li><a href="http://www.sist.co.kr">제품소개</a></li>
        <li>고객센터</li>
    </ul>

    <h1>하나의 CSS선언을 여러개의 선택자에 적용</h1>
    <a id="link" href="http://www.daun.net">잘되나요?</a>
    <!--하나의 CSS선언을 여러 개의 선택 자에 적용 끝-->

    <!--스타일링 링크 꾸미기 시작-->
    <p>
        <a href="https://www.jejusi.go.kr">링크 상태 모두 체크</a>
    </p>
    <!--스타일링 링크 꾸미기 끝-->
    <br /><br />

    <ul>
        <li class="select">사과</li>
        <li>바나나</li>
        <li class="select">오렌지</li>
        <li>키위</li>
    </ul>
    
    <!--header/item 두개의 클래스 적용해보자-->
    <p><h1 class="header item">즐거운 하루 되세요</h1></p>

    <!--태그 하위 클래스 선택-->
    <ul>
        <li class="select2">사과</li>
        <li>바나나</li>
        <li>오렌지</li>
        <li>키위</li>
    </ul>

    <h3 class="select2">나는 하위가 아닙니다.</h3>
    <br />
    <input type="text" name="name1" size="20" />
    <input type="password" name="name2" size="20" />
    <br /><br />
    <a id="link" href="http://www.daun.net">잘 됩니까.....</a>
</body>
</html>


** 예제 1207_3.html (스타일링 테이블 꾸미기 _ css외부파일방식 적용) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>스타일링 테이블(표) 꾸미기 (css외부파일방식 적용)</title>
    <link type="text/css" href="./style/style.css" rel="stylesheet" />
</head>
<body>
    <table>
        <tr>
            <th>순서</th>
            <th>과목명</th>
            <th>토픽수</th>
        </tr>
        <tr>
            <td>1</td>
            <td>웹서비스 만들기</td>
            <td>12</td>
        </tr>
        <tr>
            <td>2</td>
            <td>HTML수업</td>
            <td>13</td>
        </tr>
        <tr>
            <td>3</td>
            <td>HTML수업</td>
            <td>9</td>
        </tr>
        <tr>
            <td>4</td>
            <td>CSS수업</td>
            <td>15</td>
        </tr>
    </table>
</body>
</html>

 

table{
    border:1px solid gray;
    border-collapse:collapse;
}

th{
    background-color: #d0d0d0;
    font-weight:bold;
}

th, td{
    border:1px solid gray;
    padding:5px;
}

 




 

** iframe **

- 웹페이지 안에서 다른 웹페이지를 표시하고자 할 때 사용됨.


** 예제) 1207_4,5 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe 테스트</title>
</head>
<body>
    <h1>첫번째 iframe 페이지</h1>
    <p>첫번째 나눈 단락</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe 적용</title>
</head>
<body>
    <h1>iframe 적용</h1>
    <iframe src="1207_4.html" width="300" height="150"></iframe>
    <h3>iframe 적용 끝</h3>
</body>
</html>

1207_5 실행시 결과

 


** 예제 1207_6.html (textarea) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--textarea 안에있는 것은 텍스트로 인식-->
    <!--가끔 <>(꺽쇠)를 태그로 인식할때는 &lt; &gt;로 써준다.-->
    <textarea rows="5" cols="50"> 
        &lt;html&gt;
            <body>
                <h1>This is a header.</h1>
            </body>
        </html>
    </textarea>

    <br />
    <iframe src="" name="iframe1"></iframe>
    <p><a href="http://www.daum.net" target="iframe1">여기를 클릭하면 어디에 보일까요??</a></p>
    <p><b>참고 : </b>링크를 클릭하면 iframe안에서 홈페이지가 열립니다.</p>
</body>
</html>

 


** 예제 1207_7 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*body{
            width:500;
            margin:10px auto;
        }*/

        #middle{overflow:hidden;}

        #left{
            float:left;width:150px;background-color:orange;
        }

        #right{
            float:right;width:350;background:brown;
        }

        #top{
            width:150;background:green;
        }

        #bottom{
            background:violet;
        }

        h1, p {width:300px;}

        .ell{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
    </style>
</head>
<body>
    <div id="top">"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표</div>
    <div id="middle">구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.

        <div id="left"> 1.0은 규모에 맞게 세 종류로 최적화했다. ▲방대하고 복잡한 작업에 적합한 가장 유용하고 규모가 큰 모델 '제미나이 울트라(Gemini Ultra)' ▲다양한 작업에서 확장하기에 가장 적합한 모델 '제미나이 프로(Gemini Pro)' ▲ 온디바이스(on-device) 작업에 가장 효율적인 모델 '제미나이 나노(Gemini Nano)'다.
        </div>

        <div id="right"> 따르면 특히 제미나이 울트라의 성능은 대형언어모델(LLM) 연구개발 평가에서 주로 사용되는 32개의 벤치마크 중 30개에서 기존의 최신 기술을 뛰어넘는 결과를 보여준 것으로 전해졌다.
        </div>
    </div>

    <div id="bottom"> 물리학, 역사, 법률, 의학, 윤리 등 총 57개의 주제를 복합적으로 활용해 세계 지식과 문제 해결 능력을 평가하는 MMLU(대규모 멀티태스크 언어 이해) 테스트에서 90.04%의 점수를 기록한 제미나이 울트라는 전문가 인력보다 높은 결과를 기록한 최초의 모델이라는 설명이다.또한 제미나이 울트라는 고도의 추론 능력이 요구되는 다양한 영역에 걸친 멀티모달 작업으로 구성된 새로운 MMMU 벤치마크에서 59.4%의 최상위 점수를 획득했다.
    </div>
    
    <!--
    <h1 class="ell">"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
    구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </h1>
    <p class="ell"> 규모에 맞게 세 종류로 최적화했다. ▲방대하고 복잡한 작업에 적합한 가장 유용하고 규모가 큰 모델 '제미나이 울트라(Gemini Ultra)' 
    ▲다양한 작업에서 확장하기에 가장 적합한 모델 '제미나이 프로(Gemini Pro)' ▲ 온디바이스(on-device) 작업에 가장 효율적인 모델 '제미나이 나노(Gemini Nano)'다.
    따르면 특히 제미나이 울트라의 성능은 대형언어모델(LLM) 연구개발 평가에서 주로 사용되는 32개의 벤치마크 중 30개에서 
    기존의 최신 기술을 뛰어넘는 결과를 보여준 것으로 전해졌다.
    물리학, 역사, 법률, 의학, 윤리 등 총 57개의 주제를 복합적으로 활용해 세계 지식과 문제 해결 능력을 평가하는 MMLU(대규모 멀티태스크 언어 이해) 테스트에서 
    90.04%의 점수를 기록한 제미나이 울트라는 전문가 인력보다 높은 결과를 기록한 최초의 모델이라는 설명이다.
    또한 제미나이 울트라는 고도의 추론 능력이 요구되는 다양한 영역에 걸친 멀티모달 작업으로 구성된 새로운 MMMU 벤치마크에서 59.4%의 최상위 점수를 획득했다.
    </p>
    -->
</body>
</html>

 


 

** 예제 1207_8 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
     <title>html5 책갈피 기능</title>
</head>
<body>
    <header>
        <center>
            <h2>&lt 책갈피 기능 &gt</h2>
        </center>
    </header>

    <section>
        <article>
            <p>
                <a href="#user">[이름]</a>&nbsp;
                <a href="#addr">[주소]</a>&nbsp;
                <a href="#tel">[전화번호]</a>&nbsp;
                <a href="#foot">[참고]</a>
            </p>
        </article>
    </section>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    
    <p><a name="user">홍길동</a></p>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>

    <P><a id="addr" name="addr">서울 마포구 월드컵</a></P>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>

    <p><a id="tel">02-123-4567</a></p>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>

    <p id="foot">기타</p>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
</body>
</html>

 


 

** 예제 1207_9 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html5 input type</title>
</head>
<body>
    <form name="form1" action="1207_8.html" method="get">
        date : <input type="date" name="name1" /><br />
        datetime-local : <input type="datetime-local" name="name2" /><br />
        month : <input type="month" name="name3" /><br />
        time : <input type="time" name="name4" /><br />
        week : <input type="week" name="name5" /><br />
        color : <input type="color" name="name6" /><br />
        e-mail : <input type="email" name="name7" pattern=".@gmail.com" 
                    placeholder="example@gamil.com" required/><br />

        <input type="submit" />
    </form>
</body>
</html>

 

 


** 예제 1207_10 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--optgroup label은 타이틀의 역할-->
    <h3>전공 분야를 선택하세요.</h3>
    <form name="form1" action="1207.html" method="get">
        <label>그룹별 선택항목을 제공
            <select name="major">
                <optgroup label="computer">
                    <option value="software">SoftWare</option>
                    <option value="robot">Robot</option>
                    <option value="system">System</option>
                </optgroup>
                <optgroup label="language">
                    <option value="korea" selected>Korea</option>
                    <option value="english">English</option>
                    <option value="china">China</option>
                    <option value="germany">Germany</option>
                </optgroup>
                <optgroup label="business">
                    <option value="service">Service</option>
                    <option value="education">Education</option>
                    <option value="communication">Communication</option>
                    <option value="marketing">Marketing</option>
                </optgroup>
            </select>
            <br />
            <input type="submit" value="선택">
            <input type="reset" value="다시선택">
        </label>
    </form>

    <br /><br /><br />
    <h3>선택사항을 직접 입력하세요.</h3>
    <form name="form2" action="1207.html" method="get">
        <label>전공분야를 입력하세요.
            <input type="text" name="major" list="majorlist">
            <datalist id="majorlist">
                <option value="SoftWare">소프트웨어</option>
                <option value="Robot">로봇</option>
                <option value="System">시스템</option>
                <option value="Service">서비스</option>
                <option value="Education">교육</option>
            </datalist>
            <br />
            <input type="submit" value="완료">
            <input type="reset" value="다시작성">
        </label>
    </form>
</body>
</html>


** 예제 1207_11 **

 


** 문제 1207_12 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{ margin:0; padding: 0;}
    body{background-color: #F5F6F7;}
    div{margin-top: 60px;margin-left: 38%;}
    ul,li{ list-style: none;}
    li{margin-bottom: 20px; text-align: left;}
    .box{width: 450px; height: 50px; border: 1px solid #666; padding: 10px;}
    .pbox{width: 120px; height: 50px; border: 1px solid #666; padding: 10px;}
    .necessary{font-size: small; color:red;}
    button{background:#00C850; color:white; width: 450px; border: 1px solid #666; height:50px; font-size: x-large; }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><span>아이디<span><br />
                <input type="text" name="name1" placeholder="아이디를 입력하세요." class="box"/>
            </li>
            <li><span>패스워드</span><br />
                <input  type="password" name="name2" placeholder="패스워드를 입력하세요." class="box" /><br />
                <span class="necessary">필수 정보입니다.</span>
            </li>
            <li><span>패스워드 확인</span><br />
                <input  type="password" name="name3" placeholder="패스워드를 다시 입력하세요." class="box" /><br />
                <span class="necessary">필수 정보입니다.</span>
            </li>
            <li><span>생년월일</span><br />
                <input  type="date" name="name4" placeholder="연도-월-일" class="box" /><br />
                <span class="necessary">태어난 년도 4자리를 정확하게 입력하세요.</span>
            </li>
            <li>전화번호<br />
                <input class="pbox" type="text" name="name5" maxlength="4" />-
                <input class="pbox" type="text" name="name6" maxlength="4" />-
                <input class="pbox" type="text" name="name7" maxlength="4" /><br />
                <span class="necessary">필수 정보입니다.</span>

            <li>
            <li><span>성별</span><br />
                <input type="radio" name="name8" value="남자" />남자
                <input type="radio" name="name8" value="여자" />여자
            </li>
            <li><span>취미생활</span><br />
                <input type="checkbox" name="name9" value="독서" />독서
                <input type="checkbox" name="name9" value="산책" />산책
                <input type="checkbox" name="name9" value="TV시청" />TV시청
            </li>

            <li><button>가입하기</button></li>
        </ul>
    </div>
</body>
</html>


** 예제 1207_13 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            background-color:yellow; color:red;
            font-weight:bold; font-size:16px;
        }

        p.pad{
            color:purple;
            padding:20px;
        }

        p.mar{
            color:green;
            margin:30px;
        }

        p.mp{
            color:blue;
            padding:5%;
            margin:5%;
        }

        body{font-family:consolas}
        h3.none{border-style:none;}
        h3.hidden{border-style:hidden}
        h3.dootted{border-style:dotted}
        h3.dashed{border-style:dashed}
        h3.solid{border-style:solid;}
        h3.double{border-style:double;}
        h3.groove{border-style:groove;}
        h3.ridge{border-style:ridge;}
        h3.inset{border-style:inset;}
        h3.outset{border-style:outset;}
        h3.mix{border-style:dotted dashed solid double;}
    </style>
</head>
<body>
    
    <!--padding : 박스의 안쪽 여백, margin : 박스의 바깥쪽 여백
    <p>박스의 안쪽 여백과 바깥쪽 여백 지정</p>
    <p class="pad">(1) 안쪽 여백 지정 - padding 20px</p>
    <p class="mar">(2) 바깥쪽 여백 지정 - margin 30px</p>
    <p class="mp">(3) 안쪽, 바깥쪽 여백 지정 - padding 5% margin 5%x</p>
    -->

    <h1>border-style 예제</h1>
    <h3 class="none">no border</h3>
    <h3 class="hidden">hidden border</h3>
    <h3 class="dotted">dotted border</h3>
    <h3 class="dashed">dashed border</h3>
    <h3 class="solid">solid border</h3>
    <h3 class="double">double border</h3>
    <h3 class="groove">groove border</h3>
    <h3 class="ridge">ridge border</h3>
    <h3 class="inset">inset border</h3>
    <h3 class="outset">outset border</h3>
    <h3 class="mix">mix border</h3>
</body>
</html>


** 예제 1207_14 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{font-weight:bold; font-size:12px;}

        .boxshadow1{
            background-color:yellow;
            border:5px solid blue;
            box-shadow:10px 10px 10px teal;
        }
        .boxshadow2{
            background-color:orange;
            border:5px solid red;
            box-shadow:20px 20px 20px red;
        }
        .boxshadow3{
            background-color:silver;
            border:5px solid black;
            box-shadow:20px 20px 30px - 20px maroon;
        }
        .boxshadow4{
            background-color:lime;
            border:5px solid olive;
            box-shadow:10px 10px 0px 10px fuchsia inset;
        }
    </style>
</head>
<body>
    <h1 class="boxshadow1">박스 그림자 스타일링 예제1</h1>
    <h1 class="boxshadow2">박스 그림자 스타일링 예제2</h1>
    <h1 class="boxshadow3">박스 그림자 스타일링 예제3</h1>
    <h1 class="boxshadow4">박스 그림자 스타일링 예제4</h1>
</body>
</html>


** 문제 1207_15 **

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

** Table 속성 **

- 열병합 (colspan) : column span 약자로, 셀(가로줄)을 합치는 개수를 지정

- 행병합 (rowspan) : 행합치기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table 연습</title>
</head>
<body>
    <!--열병합-->
    <table border="1" width="250" height="100">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

 

← 결과

 

 

 

 

 

 

 

 

 


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table 연습</title>
</head>
<body>
	<!--행병합-->
    <table border="1" width="258" height="100">
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

 

← 결과

 

 

 

 

 

 

 

 

 


** 실습문제2 **

실행 후 결과가 위와 같이 나오도록.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table 연습</title>
</head>
<body>
    <!--Table 실습문제2-->
    <table border="2">
        <tr>
            <th>1열</th>
            <th>2열</th>
            <th>3열</th>
        </tr>
        <tr>
            <td rowspan="2">1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
        <tr>
            <td colspan="3">3행 1열</td>
        </tr>
    </table>
</body>
</html>

** 이미지 출력 태그 img **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>img 태그연습</title>
</head>
<body>
    <p><img src="https://t1.kakaocdn.net/gamepub/daumgame/banner/content/gametop_content_1701251409983_36.jpg" alt="첫번째 이미지" /></p>
    <p><img src="https://t1.kakaocdn.net/gamepub/top/2018/code/game_c_371.jpg" alt="두번째 이미지" /></p>
    <p><img src="https://t1.kakaocdn.net/gamepub/top/2018/code/game_w_333.jpg" alt="세번째 이미지" /></p>
    <p><img src="./img/game.png" alt="네번째 이미지" /></p>
</body>
</html>

** 실습_개인 홈페이지 만들기1 **

아래 이미지와 같이 나오도록.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>개인 홈페이지 만들기1</title>
</head>
<body>
    <h2>My HomePage</h2>
    <p><img  src="./img/computer.jpg" width="250" height="150" alt="" />
        <strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는 KYH입니다.</p>
    <h3>현재 학습하고 있는 과목</h3>
    <p>
        <ul>
            <li>C언어</li>
            <li>JAVA 언어</li>
            <li>웹프로그래밍 <a href="http://www.daum.net" target="_blank">W3C사이트</a></li>
        </ul>
    </p>
    <p><h3>이번 학기 시간표</h3></p>
    <p>
        <table border="1">
            <caption>시간표</caption>
            <tr>
                <th></th>
                <th>월요일</th>
                <th>화요일</th>
                <th>수요일</th>
            </tr>
            <tr>
                <th>1교시</th>
                <th>C언어</th>
                <th>JAVA언어</th>
                <th>JAVA언어</th>
            </tr>
            <tr>
                <th>2교시</th>
                <th>C언어</th>
                <th>JAVA언어</th>
                <th>JAVA언어</th>
            </tr>
        </table>
    </p>
</body>
</html>

** input 태그 **

<input>태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어줌.

예) <input type="">

type  태그 모양을 다양하게 변경할 수 있음.
 text, radio, checkbox (0개 이상 선택가능) , password, button, hidden, submit, reset 등이 있음
 cf) radio, checkbox 은 name이 같은것끼리 그룹으로 묶인다.(name은 되도록 중복되지 않게 사용한다.)
     <input type="checkbox" name="computer" value="cpu" />cpu

      값은 value값이 넘어간다(프론트에서 서버에요청할때 맨뒤 변수 cpu에 해당하는 값)
       / 화면에 출력되는것은 맨 뒤의 cpu
name 해당 type의 이름을 지정
readonly 태그를 읽기전용으로 지정 예) <input readonly>
maxlength  해당 태그 최대 글자 수를 지정
required  해당 태그가 필수태그로 지정됨. 필수 태그를 입력하지 않고 submit버튼을 누르면 에러메시지가 브라우저에서 출력됨(HTML5추가)
autofocus  웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됨 (HTML5추가)
placeholder  태그에 입력할 값에 대한 힌트를 줌 (HTML5추가)
pattern  정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용함 (HTML5추가)

 

cf) HTML 에서는 = 앞뒤로 뜨어쓰기 하지 않는 것이 좋다.

 

* type

 

- input type="button" / input type="sublmit" / input type="reset"

    <p><h1>button, submit, reset</h1></p>

    <input type="button" value="로그인" />
    <input type="submit" value="회원가입" />

    <input type="reset" value="다시입력" />

 - input type="image"

이미지:<input type="image" src="folwer.png">

- input type="file"

 

상대경로 : ./ 내폴더 밑에 | ../ 내 위에폴더 밑에


** 실습 (input type 종류) **

** select option **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>input type 종류</title>
</head>
<body>
    <p><h1>imput type 종류</h1></p>
    이름 : <input type="text" name="my_name" size="20" /><br>
    비밀번호 : <input type="password" name="my_pwd" size="20"><br />
    <input type="text" name="my_name2" size="20" value="수정불가" readonly />

    <p><h1>type radio</h1></p>
    아침메뉴 : <input type="radio" name="food" value="치킨" checked>치킨
              <input type="radio" name="food" value="피자">피자
              <input type="radio" name="food" value="짜장면">짜장면
              <input type="radio" name="food" value="짬뽕">짬뽕
    <br /><br />
    점심메뉴 : <input type="radio" name="food2" value="치킨" checked>치킨
              <input type="radio" name="food2" value="피자">피자
              <input type="radio" name="food2" value="짜장면">짜장면
              <input type="radio" name="food2" value="짬뽕">짬뽕
    <br /><br />
    저녁메뉴 : <input type="radio" name="food3" value="치킨" checked>치킨
              <input type="radio" name="food3" value="피자">피자
              <input type="radio" name="food3" value="짜장면">짜장면
              <input type="radio" name="food3" value="짬뽕">짬뽕

    <p><h1>type checkbox</h1></p>
    <input type="checkbox" name="computer" value="cpu" checked>cpu
    <input type="checkbox" name="computer" value="memory" />memory
    <input type="checkbox" name="computer" value="hdd" />하드디스크
    <input type="checkbox" name="computer" value="cdrom" />cdrom
    <input type="checkbox" name="computer" value="grapic" />그래픽카드

    <p><h1>select option</h1></p>
    <table>
        <tr>
            <td><h2>가장 재미있는 것을 선택해 주세요.</h2></td>
        </tr>
        <tr>
            <td>
                <select name="item1">
                    <option value="html1">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="item2" size="3">
                    <option value="html">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

 

 


 

 

** Form 관련 태그 **

<form> : 폼만들기 폼 태그의 속성에서 사용자가 입력한 자료를 서버로 어떤 방식으로 넘길 지와 어떤 프로그램을 이용해 처리할지 지정한다.

method : 사용자가 입력한 내용을 서버로 어떻게 넘겨줄 것인지 지정

               get - 주소 표시줄에 입력 값이 그대로 드러남

               post - 표준 입력으로 데이터를 전송, 입력 길이에 제한이 없으며, 입력한 내용이 드러나지 않음 (http프로토콘 내 에 담아서감)

name : 한 문서 안에 여러 개의 form이 있을 경우를 위해 이름 지정

action : form태그 안의 내용을 처리해 줄 서버 프로그램 지정.

target : action태그에서 지정한 스크립트 파일을 다른 창에서 열기.

accept-charset : 폼 전송에 사용할 문자 인코딩을 지정.(utf-8)

<form action="search.jsp" name="search_info" mathod="post"
	<input type="text" title="검색">
        <input type="submit" value="검색">
</form>

 

** GET방식 / POST방식 **

서버에 특정 서비스를 요청을하기 위해 클라이언트에서 작성한 값을 넘기는 방식

GET방식 : 클라이언트 데이터를 URL뒤에 붙여서 보낸는방식(?key=value&key=value...)

               보안에 취약, 길이제한이 있음.(256byte), 전송속돈는 POST보다 빠름

POST방식 : URL에 노출하지 않고 데이터를 body에 포함시킴(URL에 노출되지 않아 기본 보안.)

                    전송길이에 제한이 없음.(사용예 - 회원가입시 사용자 입력값)

 


** 예제1206_4 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p><h1>button, submit, reset</h1></p>
    <input type="button" value="로그인" />
    <input type="submit" value="회원가입" />
    <input type="reset" value="다시입력" />
    <br /><br />

    <p><h1>input type=image</h1></p>
    이미지 : <input type="image" src="./img/flower.jpg" width="100" height="100"/>

    <p><h1>imput type=file</h1></p>
    파일명 : <input type="file" name="fileName" />
</body>
</html>

 


** 예제1206_5 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form name="form1" action="1206_4.html" method="get">   <!--"post"-->
        <input type="text" name="id" title="검색" />
        <input type="submit" value="검색" />&nbsp;
        <input type="reset" value="다시입력" />
    </form>
</body>
</html>

** 예제 1206_6 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>form 연습</title>
</head>
<body>
    <form name="form1" action="1206_5.html" method="post">  <!--"get"-->
    <p><h1>imput type 종류</h1></p>
    이름 : <input type="text" name="my_name" size="20" /><br>
    비밀번호 : <input type="password" name="my_pwd" size="20"><br />
    <input type="text" name="my_name2" size="20" value="수정불가" readonly />

    <p><h1>type radio</h1></p>
    아침메뉴 : <input type="radio" name="food" value="치킨" checked>치킨
              <input type="radio" name="food" value="피자">피자
              <input type="radio" name="food" value="짜장면">짜장면
              <input type="radio" name="food" value="짬뽕">짬뽕
    <br /><br />
    점심메뉴 : <input type="radio" name="food2" value="치킨" checked>치킨
              <input type="radio" name="food2" value="피자">피자
              <input type="radio" name="food2" value="짜장면">짜장면
              <input type="radio" name="food2" value="짬뽕">짬뽕
    <br /><br />
    저녁메뉴 : <input type="radio" name="food3" value="치킨" checked>치킨
              <input type="radio" name="food3" value="피자">피자
              <input type="radio" name="food3" value="짜장면">짜장면
              <input type="radio" name="food3" value="짬뽕">짬뽕

    <p><h1>type checkbox</h1></p>
    <input type="checkbox" name="computer" value="cpu" checked>cpu
    <input type="checkbox" name="computer" value="memory" />memory
    <input type="checkbox" name="computer" value="hdd" />하드디스크
    <input type="checkbox" name="computer" value="cdrom" />cdrom
    <input type="checkbox" name="computer" value="grapic" />그래픽카드

    <p><h1>select option</h1></p>
    <table>
        <tr>
            <td><h2>가장 재미있는 것을 선택해 주세요.</h2></td>
        </tr>
        <tr>
            <td>
                <select name="item1">
                    <option value="html1">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <select name="item2" size="3">
                    <option value="html">HTML</option>
                    <option value="javaScript">자바스크립트</option>
                    <option value="CSS">CSS</option>
                </select>
            </td>
        </tr>
    </table>
    <br /><br />

    <input type="submit" value="회원가입" />
    <input type="reset" value="다시입력" />
    </form>
</body>
</html>

 


** 예제 1206_7 **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <form name="form1" action="1206_6.html" method="get">
        <table>
            <tr>
                <td>이름 : </td>
                <td><input type="text" name="name1" repuired></td>
            </tr>
            <tr>
                <td>비빌번호 : </td>
                <td><input type="password" name="name2"></td>
            </tr>
            <tr>
                <td>연락처 : </td>
                <td><input type="text" name="name3" size=5>-<input type="text" name="name4" size="5">-<input type="text" name="name5" size="5"></td>
            </tr>
            <tr>
                <td>사진 : </td>
                <td><input type="file" name="name6" /></td>
            </tr>
            <tr>
                <td>성별 : </td>
                <td><input type="radio" name=name7 value="남">남&nbsp;&nbsp;
                    <input type="radio" name=name7 value="여">여</td>
            </tr>
            <tr>
                <td>사용언어 : </td>
                <td>
                    <input type="checkbox" name="name8" value="한글" />한글&nbsp;
                    <input type="checkbox" name="name8" value="영어" />영어&nbsp;
                    <input type="checkbox" name="name8" value="일어" />일어&nbsp;
                    <input type="checkbox" name="name8" value="중국어" />중국어&nbsp;
                </td>
            </tr>
            <tr>
                <td>자기소개 : </td>
                <td><textarea rows="5" cols="30" name="info">간단하게 입력하세요.</textarea></td>
            </tr>
            <tr>
                <td>국적 : </td>
                <td><select name="name9">
                    <option value="한국">한국</option>
                    <option value="미국">미국</option>
                    <option value="중국">중국</option>
                </select></td>
            </tr>
            <tr>
                <td>좋아하는 음식 : </td>
                <td><select name="name10" size="4">
                    <option value="김치">김치</option>
                    <option value="불고기">불고기</option>
                    <option value="파전">파전</option>
                    <option value="비빔밥">비빔밥</option>
                </select></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="제출" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

 

 

** 레이아웃 구성 태그 - div, span **

Div : 블록요소를 가지고 있음, 줄바꿈이 발생.

span : 줄바꿈이 발생하지 않음.

 


** 예제1206_8 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--div, span-->
    <p>block</p>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>

    <div>111111</div><div>222222</div><div>333333</div><div>444444</div><div>555555</div>

    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
    <span>item5</span>
</body>
</html>



 

** CSS란? **

HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할(정보와 디자인을 분리)

특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용됨.

 

* CSS적용방식(3가지)

- .inline방식 : 엘리먼트에 스타일을 직접 기술하는 방식 / 셀렉트가 필요없음 / CSS 선언이 분명해서 style tag방식에 비해 엘리먼트에 영향을 주고 있는 CSS를 추적하기 쉬움./ 코드가 많아지고, 정보와 디자인의 분리라는 CSS취지와 벗어남.

-  style tag방식 : style 태그에 기술하는 방식 / inline방식 대비 경제적으로 코딩할 수 있음 / 정보와 디자인의 분리라는 CSS의 취지에 부합 (현재 페이지에 공통으로 들어가는 것들에 사용)

- .외부 파일 방식 : CSS를 별도의 파일로 분리해서 링크하는 방식 / 문법적으로는 style tag와 동일 / 파일의 교체로 디자인을 변경할 수 있다는 점에서 유지 보수가 편리 (전체 페이지에 공통으로 들어가는 것들에 사용)

                                         


 

** .HTML요소 지원되는 속성 **

속성 설명
class  요소의 클래스 이름 .
id  요소의 아이디 #
style  요소에 대한 인라인
title  요소에 대한 추가정보, 툴 팁으로 표시됨.

 

 

 


- 외부 link를 이용해서 css파일을 가져오는 방법이다.

- rel : 현재 문서와 외부 리소스 사이의 관계를 알려줘야한다.

- href 에 # 주는건 다른 링크를 준다는 의미

출처: https://heidong.tistory.com/85 [풀스택 개발자:티스토리]

 

 

button - 그냥 버튼

submit = submit을 감싸는 form태그속 정보를 보낸다.

reset - reset을 감싸는  form태그 속 정보를 리셋

 

 

 

 

HTML설치

비주얼스튜디오 다운로드 -> 비주얼스튜디오코드 무료다운로드 (windows x64 사용자 설치 관리자) 설치

 

실행 후 왼쪽 맨밑 확장 -> Korean 설치 후 오른쪽아래 재실행

 

 

 

 

 

 

 

 

 

 

 

* c - prject - HTML새폴더 만들기

-----------------------------------------------------------------------------------------------------------------------------------------------------------

위 입력 후

실행 - > 디버깅 없이 실행 -> chrome

 


** Web 이란? **

Web(웹) 이란? , 사전적인 의미로 거미줄이란 뜻으로 it에서는 WWW (World Wide Web) 의 약자

 

 

** Web의 동작원리 **

- 브라우저에 ( http:// ) www.naver.com  이라는 는 일종의 url을 치면 브라우저는 서버에 url을 요청하고 서버는 저장되어있던 네이버의 HTML, CSS, Java Script파일 등의 구성파일을 보내면 브라우저에 나타냄.

 

** 클라이언트 - 서버 구조 **

- 클라이언트(Client)란? 

  서비스를 사용하는 사용자 혹은 사용자의 단말기를 가리키는말. (서비스를 요청하는 입장)

- 서버(Server)란?

  서비스를 제공하는 컴퓨터이며, 다수의 클라이언트를 위해 존재하기 때문에 일반적으로 매우 큰 용량과 성능을 가지고 있음.

  (서비스를 요청받고 서비스를 제공하는 입장)

 

웹이란? 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태.

인터넷이란? 1개 이상의 네트워크가 연결되어 있는 형태

 

- 프로토콜(Protocol) : 네트워크상에서 약속한 통신규약  (Http, FTP, SMTP, POP, DHCP)

 

- IP(Internet Protocol) : 네트워크상에서 컴퓨터를 식별할 수 있는 주소 (ip와 DNS는 1:1맵핑)

- DNS(Domain Name Service) : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열

- Port : IP주소가 컴퓨터를 식별할 수 있게 해준다면, Port번호는 해당컴퓨터의 구동되고 있는 프로그램을 구분 할 수 있는 번호

 

- Example -

http://www.daum.net/about/introduce

* http - 프로토콜
* www.daum.net - 컴퓨터주소(DNS를 통한 IP주소로 변경) -> 예) <255.255.255.255>
* about/introduce - Information path

 

 


 

* cmd 명령 프롬프트에 ipconfig검색하면 내컴퓨터 ip 알 수 있음

* cmd 명령 프롬프트에 ping 주소 입력하면 DNS와 맵핑된 ip 알 수 있음


** HTML 이란? **

<!DOCTYPE html>							//1)doctype (생략가능)
<html lang = "ko">						//2)<html> 태그
	<head>							//3)<head>태그
		<meta charset="UTF-8">
		<title>HTML 기본구조</title>
	</head>
	<body>							//4)<body>태그
		<h1>Hello, HTML</title>
	</body>
</html>

 

Hyper Text Markup Language의 약자로 웹문서를 기술하는 언어, 웹문서를 표현하기 위해 태그들로 구성되어 있음.

1)doctype - 브라우저 선언문, 반드시 상단 웹표준과 관련

2)<html> 태그 - lang속성은 문서가 작성된 언어

3)<head>태그 - 브라우저 화면에 표시되지 않음, 문서의 기본설정 ( 보통 이페이지가 무슨페이지인지 설명 or body정보를 추가or보완)

4)<body>태그 - 브라우저 화면에 나타나는 내용, 태그들 대부분이 해당

 

* Visual studio code 에서 '! (느낌표) 하고 엔터' 치면 html기본 코드 제공

 

 

* HTML 요소 구조

HTML 요소(element)는 여러 속성을 가질 수 있으며, 이러한 속성(attribute)은 해당요소에 대한 추가적인 정보를 제공함.

HTML 요소는 시작 태그로 시작해서 종료 태그로 끝남

 

//HTML요소

<p class="para">TCPschool.com</p>

//<p class="para"> - 시작태그
// p-태그이름
// class - 속성명
//"para" - 속성 값
//TCPschool.com - 내용
//</p> - 종료태그

 

 

<b /> : 화면상 엔터키(줄바꿈)

 

* css 란?

Cascading Style Sheets의 약자로, HTML문서를 디자인적으로 예쁘게 만들어 정보를 가지고 있고, CSS는 화면상의 레이아웃 등을 컨트롤 하는 문서

a { background-color : yellow ; font-size : 16px ; }

//a - 선택자
//{} - 선언시작,끝
//background-color - 속성명
//yellow - 속성값
//font-size  - 속성명
//16px  - 속성값

 

 


** HTML 태그 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html연습</title>
</head>
<body>
    <h1>h1 태그입니다.</h1>
    <h2>h2 태그입니다.</h2>
    <h3>h3 태그입니다.</h3>
    <h4>h4 태그입니다.</h4>
    <h5>h5 태그입니다.</h5>
    <h6>h6 태그입니다.</h6>

    <p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
    <p>주로 본문에 사용되는 태그로서 단락을 구분합니다.</p>
    <p>주로 본문에 사용되는 태그로서 단락을 구분합니다. <br /> 행바꿈 태그입니다.</p>

    <p>주로 <b>본문</b>에 사용되는 태그로서 단락을 구분합니다. <br /> 행바꿈 태그입니다.</p>

    <p><a href="http://www.daum.net">다음 웹사이트로 이동</a></p>
    
    <p><i>KOREA</i></p>
    <p>KOREA<sup>SEOUL</sup></p>
    <p><ins>KOREA</ins></p>
    <p><del>DELETE</del></p>
</body>
</html>

 

* 결과


** CSS 적용 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            font-size:60px;
            color:green;
        }
    </style>
</head>
<body>
    <h1>안녕하세요. 월요일입니다.</h1>
</body>
</html>

 


 

* 리스트 태그 - ol, ul, li

<ol> : 숫자나 알파벳 등 순서가 있는 목록

<ul> : 순서가 필요 없는 목록

<li> : list item의 약자

 

*  리스트 태그 - dl, dt, dd (dl안에 dt/dd 태그 올수 있다.)

<dl> : 사전처럼 용어를 설명하는 목록을 만들때

<dt> : 정의되는 용어의 제목을 넣을때

<dd> : 


** 실습 (리스트) **

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>메뉴 리스트</p>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
    </ul>

    <p>지역 리스트</p>
    <ol>
        <li>서울</li>
        <li>경기</li>
        <li>충청</li>
        <li>강원</li>
        <li>제주</li>
    </ol>

    <ol>
        <li><a href="http://www.google.com" target="_blank">구글</href></li>
        <li><a href="http://www.daum.net" target="_self">다음</href></li>
    </ol>

    <br /><br />

    <!--리스트 태그 dl, dt, dd-->
    <dl>
        <dt>메뉴 리스트</dt>
        <dd>menu1</dd>
        <dd>menu2</dd>
        <dd>menu3</dd>
        <dd>menu4</dd>
        <dd>menu5</dd>

        <dt>지역 리스트</dt>
        <dd>서울</dd>
        <dd>경기</dd>
        <dd>충청</dd>
        <dd>강원</dd>
        <dd>제주</dd>
    </dl>
</body>
</html>

 


** Table 태그 **

 

 

** 테이블만들기 **

<table> : 테이블을 만드는 태그

<th> : 테이블의 헤더 부분을 만드는 태그

<tr> : 테이블의 행을 만드는 태그

<td> : 테이블의 열을 만드는 태그 (왼쪽정렬기본)

 

** 테이블 디자인 변경 **

border : 테이블의 테두리 (border="1") - 숫자가 높을수록 테두리가 두꺼워짐

bordercolor : 테이블의 테두리 색상 - default 검정색

width : 테이블 가로 크기

height : 테이블 세로 크기

align : 정렬 (테이블안에 있는 값들을 정렬시키는 기능)

bgcolor : 배경색

colspan : 가로합병(열 합병)

rowspan : 세로합병(행 합병)

 


** 실습 (테이블) **

<!DOCTYPE html>
<html>
<!--
<head>
    <meta charset="UTF-8">
    <title>테이블테스트</title>
</head>
<body>
    <table border="1" bordercolor="red" bgcolor="#FCFA76">
        <tr>
            <th>번호</th>
            <th>이름</th>
        </tr>
        <tr>
            <th>1</th>
            <th>첫번째 순서</th>
        </tr>
        <tr>
            <th>2</th>
            <th>두번째 순서</th>
        </tr>
    </table>

</body>
-->

<head>
    <meta charset="UTF-8">
    <title>Table 실습문제1</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>영화제목</th>
            <th>연도</th>
            <th>감독</th>
            <th>평가</th>
        </tr>
        <tr>
            <th>라이프오브파이</th>
            <th>2013</th>
            <th>이안</th>
            <th>8.68</th>
        </tr>
        <tr>
            <th>레미제라블</th>
            <th>2012</th>
            <th>톰후퍼</th>
            <th>8.28</th>
        </tr>
        <tr>
            <th>장고: 분노의 추적자</th>
            <th>2012</th>
            <th>타란티노</th>
            <th>8.29</th>
        </tr>
    </table>
</body>

</html>

 

 

 

 

 

 

 

 

 

 

+ Recent posts