상세 컨텐츠

본문 제목

[html] 5월3일

카테고리 없음

by esoesmio 2023. 5. 3. 17:03

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>num, range 속성</title>
</head>
<body>

<form action="">
    <div>
        <label for="">참여인원</label>
<!--        type = number, range 일때 사용할 수 있는 속성들-->
<!--        min : 최소값 설정-->
<!--        max : 최대값 설정-->
<!--        step : 증가값 설정-->
<!--        value : 초기값 설정-->

        <input type="number" id = "membercnt" min = "1" max = "20" step="1" value="0">
    </div>


    <div>
        <label for="level">난이도</label>
        <input type="range" id = "level" value="1" min="1" max="3">
    </div>

    <div>
        <label for=""></label>
        <input type="text">
    </div>
</form>



</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>한 페이지 내에서 원하는 영역으로 이동하는 앵커</title>
    <style>
        h1 {
            font-size: 70px;
        }

        h2 {
            font-size: 58px;
        }

        p {
            font-size: 48px;
        }
    </style>
</head>
<body>
    <h1>앵커 만들기</h1>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <ul id="menu">
        <li>
            <!--해당 아이디의 영역으로 링크를 걸어줌-->
            <a href="#content1">내용1</a>
        </li>
        <li>
            <a href="#content2">내용2</a>
        </li>
        <li>
            <a href="#content3">내용3</a>
        </li>
    </ul>
    <!--영역의 아이디 지정-->
    <h2 id="content1">내용1</h2>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        <a href="#menu">메뉴로</a>
    </p>
    <h2 id="content2">내용2</h2>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        <a href="#menu">메뉴로</a>
    </p>
    <h2 id="content3">내용3</h2>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        웹 문서가 너무 긴 경우 필요한 곳마다 문서안에서 id를 부여하고 그 위치로 한 번에 이동할 수 있는 링크를 만들 수 있는데, 이 기능을 앵커라고 한다.
    </p>
    <p>
        <a href="#menu">메뉴로</a>
    </p>
</body>
</html>

 

id pw email tel  url submit

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input tag type 's sorts</title>
</head>
<body>

<form action="">
  <div><label for="userID"></label>
    <input type="text" id = "userId">
  </div>

  <div><label for="userpw"></label>
    <input type="password" id = "userpw">
  </div>

  <div><label for="useremail"></label>
    <input type="email" id ="useremail">
  </div>

  <div><label for="usertel"></label>
    <input type="tel" id = "usertel"
    pattern="[0-9]{3}-[0-9]{4}-[0-9"{4}"
    >
  </div>

  <div><label for="userhomp"></label>
    <input type="url" id ="userhomp">
  </div>

  <input type="submit" value = "전송하기">

</form>


</body>
</html>

 

 

 

 

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

    <style>
        ul{
            list-style: none;

        }

        li {
            margin : 20px;
        }

        li label{
            width: 80px;

        }
        fieldset {

            margin : 15px;
        }

    </style>

</head>
<body>

<form action="">
    <fieldset>
        <legend>주문자 정보</legend>
        <ul>

            <li>

                <label for ="userName">이름
                    <input type="text" id = "userName">
                </label>
                <li>
                <label for ="phonenumber">연락처
                    <input type="text" id = "phonenumber">
                </label>
            </li>

        </ul>


    </fieldset>
    <fieldset>

        <legend>배송지정보</legend>
        <ul>

            <li>

                <label for= "receivename">받는사람이름
                    <input type="text" id="receivename">
                </label>
            </li>
            <li>

                <label for = "adress">주소
                    <input type="text"
                    id = "adress">
                </label>
            </li>
        </ul>


    </fieldset>
</form>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>radio, checkbox, label</title>


    <style>
        ul {
            list-style : none;
        }
        li {
            margin : 20px;
        }

    </style>
</head>
<body>


<h3>프로그래밍 언어(복수선택)</h3>
<ul>
    <li>
        <label>
            <input type="checkbox" value="java">자바
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" value="c">
            씨언어
        </label>
    </li>
    <li>
        <input type="checkbox" value="python">파이썬
    </li>


</ul>
<h3></h3>
<ul>
    <li><label >
        <input type="radio" name = "db" value="oracle">오라클</label>
    </li>

    <li><label >
        <input type="radio" name = "db" value="oracle">마이sql</label>
    </li>

    <li><label >
        <input type="radio" name = "db" value="oracle">마리아디비</label>
    </li>
</ul>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style : none;
        }
        li{
            margin : 20px;
        }
        li label {
            width : 40px;
            font-size : 10px;
            font-weight : bold;
            line-height : 25px;

        }

    </style>

</head>
<body>

<form action="/user/login" method="post">
    <ul>
        <li>
            <label>아이디
                <input type="text">
            </label>

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

        </li>
        <li>
            <input type="submit" value="로그인">

        </li>


    </ul>
</form>


</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .a1{
      text-decoration: none;
      color: black;

    }


  </style>
</head>
<body>

<div>
  <h3>기본 하이퍼 링크 만들기</h3>
  <a href="http://www.naver.com" target="_blank">네이버</a></div>
<div>
  <h3>밑줄 제거 및 글자색 변경된 하이퍼링크</h3>
  <a class = "a1" a href="http://www.google.com" target="_self">구글</a></div>
<div>
  <h3>이미지로 링크 만들기</h3>
  <a href="http://www.bitcamp.co.kr">
    <img  alt = "비트캠프 로고" src="bit.jpg">

  </a></div>
</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>테이블의 구조를 잡아주는</title>

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;

        }

        th, td {
            width: 80px;
            height: 30px;
        }
thead, tfoot {

    background: lightgray;
}
    </style>
</head>
<body>
<table>



<!--    caption+thead+tbody+tfoot-->
        <caption>네이버 클라우드 과정 현황</caption>
        <thead>
        <tr>
        <th>구분</th>
        <th>신청인원</th>
        <th>재적인원</th>
        <th>현재인원</th>
        </tr>
        </thead>
        <tbody>

        <tr>
            <th>1기</th>
            <td>30</td>
            <td>2</td>
            <td>28</td>
        </tr>
        <tr>
            <th>2기</th>
            <td>30</td>
            <td>3</td>
            <td>27</td>
        </tr>
        <tr>
            <th>3기</th>
            <td>14</td>
            <td>3</td>
            <td>27</td>
        </tr>
        <tr>
            <th>4기</th>
            <td>3</td>
            <td>3</td>
            <td>27</td>
        </tr>
        <tr>
            <th>5기</th>
            <td>36</td>
            <td>3</td>
            <td>27</td>
        </tr>
<!--        tr>th+td*3-->


        </tbody>
        <tfoot>
        <tr>
            <th>합계</th>
            <td>150</td>
            <td>15</td>
            <td>135</td>
        </tr>


        </tfoot>


</table>



</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>테이블에 제목을 붙여주는 caption</title>

    <style>table, th, td {
        border: 1px solid black;
        border-collapse: collapse;


    }</style>
</head>
<body>

<figure>
    <figcaption>

        <p> 요즘 사용되는 <b>spa 언어</b></p>
    </figcaption>
    <table>

        <caption>
            <strong style="color: red">

                front end languages
            </strong>
            <p>요즘 사용되는 spa언어</p>
        </caption>
        <tr>

            <th>언어</th>
            <td>제조사</td>
            <td>개발일시</td>
        </tr>
        <tr>
            <th>리액트</th>
            <td>메타</td>
            <td>2013</td>


        </tr>
        <tr>
            <th>뷰</th>
            <td>메타</td>
            <td>2013</td>


        </tr>


    </table>
</figure>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>여러 열을 묶어서 스타일을 지정하는 colgroup, col</title>

  <style>table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }</style>
</head>
<body>
<table>
  <caption>
    <strong style="color: red">
      front end languages
    </strong>
    <p>요즘 사용되는 spa언어</p>
  </caption>
  <colgroup>
    <col style = "background-color: aqua;">
    <col style = "background-color: yellow;">
    <col style = "background-color: lightgreen;">

  </colgroup>
  <tr>

    <th>언어</th>
    <td>제조사</td>
    <td>개발일시</td>
  </tr>
  <tr>
    <th>리액트</th>
    <td>메타</td>
    <td>2013</td>


  </tr>
  <tr>
    <th>뷰</th>
    <td>메타</td>
    <td>2013</td>
  </tr>

</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>셀 병합해주는 colspan, rowspan 속성</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;

        }
        tr{
            height: 30px;

        }

        th, td {
            width: 30px;
            height: 15px;
        }

    </style>

</head>
<body>
<!--table>((tr>(th+td)*2)*2 + (tr>(th+td))*2)-->
<table>
    <tr>
        <th rowspan="2">이름</th>
        <td rowspan="2">고기천</td>
        <th rowspan="2">연락처</th>
        <td rowspan="2">01000000000</td>
    </tr>


    <tr>
        <th></th>
        <td></td>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th>주소</th>
        <td colspan="7">강남</td>
    </tr>

    <tr>
        <th> 자기소개</th>
        <td colspan="7"> 안녕하세요</td>

    </tr>
</table>

</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>😍프로그래밍언어</p>

    <ul>
        <li>자바
            <ol>
                <li>변수</li>
                <li>클래스</li>
                <li>스트림</li>
            </ol>
        </li>
        <li>html
            <ol>
                <li>택스트</li>
                <li>목록</li>

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



<ul>
    <li>프로그래밍언어

        <ul>
            <li>자바
                <ol>

                    <li>변수</li>
                    <li>변클래스</li>
                    <li>스트림</li>
                </ol>
            </li>
            <li>html
                <ol>
                    <li>텍스트</li>
                    <li>목록</li>


                </ol>

            </li>

        </ul>

    </li>
</ul>


</body>
</html>

 

 

 

댓글 영역

티스토리툴바