Chap2 HTML

87506 단어 htmlhtml

HTML

  • HTML
    • Tag table

      • tr과 td를 이용하여 table 구축

        <!DOCTYPE html>
<html lang="ko">
<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>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            border: 1px solid blue;
            padding : 10px;
        }
    </style>
</head>
<body>
    <table border="1">
        <!-- border의 숫자의 크기가 커질수록 선이 굵어짐 -->
        <!-- tr*7>td*3 7행 3열을 빠르게 적을 수 있는 것-->
        <!-- tr이 행이고 td가 열이며 colspan은 열을 병합(가로병합)을 뜻하네 
             행을 기준으로 안에 열의 값을 넣어주는 것으로 진행하네-->
        <caption>공연 시간과 요금 정보</caption> 
        <!-- caption은 table 태그 안에서 사용할 수 있는 태그이며 제목느낌  -->
        <tr>
            <td colspan="3">공연요금</td>
        </tr>
        <tr>
            <td>구분</td>
            <td>S석</td>
            <td>VIP</td>
        </tr>
        <tr>
            <td>성인</td>
            <td>50,000</td>
            <td>70,000</td>
        </tr>
        <tr>
            <td>청소년</td>
            <td>40,000</td>
            <td>60,000</td>
            
        </tr>
        <tr>
            <td>소인</td>
            <td colspan="2">미취학 아동 일반 요금의 50%</td>
            <!-- 소인은 2개의 열이 병합되어 있으므로 하나의 td를 지우고 병합  -->
        </tr>
        <tr>
            <td rowspan="2">공연시간</td>
            <td>1회</td>
            <td>13:00 - 15:00</td>
        </tr>
        <tr>
            <td>2회</td>
            <td>17:00 - 19:00</td>
        </tr>
    </table>
</body>
</html>
    • Tag Input form

      • 사용자가 입력한 정보를 다른 곳에 전송할 수 있음

        <!DOCTYPE html>
<html lang="ko">
<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>Document</title>
    <style>
        form{
            font-size: 30px;
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 폼이라는 태그를 사용하면 다른 곳으로 정보를 전송할 수 있음 
         서버에 보내기 위해 사용하는 것이라고 생각 -->
    <form action="#" method="post" autocomplete="off">
        <!-- action : 전송할 정보를 처리할 페이지의 url 입력 
             method : get이 default이고 post는 주소에 묻어서 정보를 전송하지 않음 
             autocomplete : 자동완성기능을 키거나 끄는 것-->
        아이디 : <input type="text" name="id" value="해위~"><br>
        <!-- input 타입은 text이다. 라는 뜻 -->
        <!-- value는 사용자가 입력 전 기본값을 지정해주는 것이며 아이디 기억하기에 사용할 수 있음 -->

        비밀번호 : <input type="password" name="pw" required><br>
        <!-- 비밀번호는 노출되면 안되는 정보이므로 type을 password로 지정  
             required : 사용자가 비밀번호를 입력하지 않으면 전송이 안되도록 설정하는 것 -->

        성별 <br>
        <input type="radio" name="gender" value="male"> 남 
        <input type="radio" name="gender" value="female"> 여 <br>
        <!-- 둘 중 하나를 선택할 수 있는 라디오 버튼을 생성 
             라디오 버튼을 생성하기 위해서는 name을 똑같이 생성해야함  
             버튼을 눌렀을때 보내야할 value를 지정해야함 -->

        취미 <br>
        <input type="checkbox" name = "hobby" value="독서"> 독서
        <input type="checkbox" name = "hobby" value="영화"> 영화
        <input type="checkbox" name = "hobby" value="운동"> 운동
        <input type="checkbox" name = "hobby" value="수면"> 수면 
        <input type="checkbox" name = "hobby" value="게임"> 게임<br>
        <!-- 여러개를 동시에 선택할 수 있는 체크박스 생성  -->
             
        <!-- 당연히 체크박스도 name을 똑같이 생성할 수 있음 
             버튼을 눌렀을때 어디에 값을 보내야하므로 value를 지정 -->

        자기소개 <br>
        <textarea name="introduce" cols="30" rows="10">작성해주세요.</textarea><br>
        
        <input type="emaul" name="mail" placeholder="이메일을 입력하세요."><br>
        <!-- placeholder를 넣으면 사용자가 선택하기 전 텍스트가 표시됨 (가이드 라인)-->

        <input type="file" name="upload"><br>
        <!-- type을 file로 지정하면 페이지에 파일을 업로드할 수 있는 기능  -->

        <input type="number" name="age" min="1" max="150" placeholder="나이를 입력하세요."><br>
        <!-- 숫자만 입력하고 조건을 걸어줄 수 있는 기능  -->

        <input type="range" min="0" max="10" step="1" value="3"><br>
        <!-- 범위를 지정하여 그래프를 조정할 수 있는 range바를 만들어주며 value는 초기값이 무엇인지 알려주는 것  -->

        <input type="submit" value="전송">
        <!-- 전송 버튼을 생성할 수 있음 -->

        <!-- http://127.0.0.1:5500/Java_Web/Front_end/HTML/6_InputForm/Chap1_FormBasic.html?id=%ED%95%B4%EC%9C%84%7E&pw=werwer&gender=male&hobby=%EC%98%81%ED%99%94&hobby=%EC%9A%B4%EB%8F%99&hobby=%EC%88%98%EB%A9%B4&introduce=%EC%9E%91%EC%84%B1%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94.&mail=werwre%40werwer.cpone&upload=&age=# 
             이렇게 값이 저장되어서 보내짐
             form에서 method를 get으로 하면 주소에 정보가 저장되어 보내짐
             form에서 method를 post로 하면 주소에 정보가 저장되지 않고 숨겨져서 보내짐-->
    </form>
</body>
</html>
    • Tag Label
      • 체크박스와 텍스트를 함께 묶을 수 있는 tag
        <!DOCTYPE html>
<html lang="ko">
<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>Label</title>
    <style>
        form label{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <form action="#">

        <label>
            <input type="checkbox" name="auto-login">자동 로그인
        </label><br>
        <!-- 사용자가 체크박스를 클릭하지 않아도 자동 로그인을 선택해도 클릭이 되도록 label로 묶음 -->

        <input type="checkbox" name="auto-login2" id="auto">
        <label for="auto">자동로그인2</label>
        <!-- label의 for를 통해 input에서 만든 체크박스와 연동 
             위의 것과 똑같이 기능하는 것을 확인할 수 있음 -->
    </form>
</body>
</html>
    • Tag fieldset
      • 구역을 나눌 수 있는 tag
        <!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>

    <form action="#">
        <fieldset>
            <legend>
                <!-- 그룹화한 양식의 주제를 작성 -->
                Coffee Size
            </legend>
            <input type="radio" name="size"> Tall
            <input type="radio" name="size"> Grande
            <input type="radio" name="size"> Venti
        </fieldset>
    </form>
    
</body>
</html>
    • Select & Option
      • 바를 통해서 선택한 옵션을 지정할 수 있음
      • 추가적으로 datalist를 통해서 사용자가 입력하여 자동 완성도 가능
      • select 태그를 사용하게 되면 option 태그도 함께 사용
        <!DOCTYPE html>
<html lang="ko">
<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>SelectOption</title>
    <style>
        form select{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <form action="#">
        <select name="Drink">
            <optgroup label = "Coffee">
                <option value="am">Americano</option>
                <option value="es">Espresso</option>
                <option value="cl">Caffe Latte</option>
                <option value="cc">Cappuccino</option>
                <option value="vl">Vanila Latte</option>
                <!-- value를 적지 않으면 적은 내용이 그대로 전송됨
                     하지만 서버로 보낼 값을 다르게 하고 싶으면 value에 따로 적어줌 -->
            </optgroup>

            <optgroup label = "Juice">
                <option >Orange juice</option>
                <option >Grape juice</option>
            </optgroup>
            <!-- f1을 통해서 그룹을 지정하여 하나의 select에서 옵션을 그룹화하여 진행할 수 있음  -->

        </select><br>

        <select name="Car" id="">
            <option value="">Car1</option>
            <option value="">Car2</option>
            <option value="">Car3</option>

        </select><br>

        <br><br><br>

        <input type="text" list="fruits">
        <datalist id="fruits">
            <option>Apple</option>
            <option>Orange</option>
            <option>Mango</option>
            <option>Pineapple</option>
            <option>Grape</option>
        </datalist>
        <!-- input의 list를 통해서 datalist와 연동을 진행 
             datalist는 바에 직접 입력을 하여 자동완성도 가능 -->
    </form>
</body>
</html>
    • 전역 속성
      • 모든 HTML 요소에서 공통적으로 사용 가능한 속성
      • 대표적으로 class와 id가 있음
      • class 속성은 요소의 별칭을 지정하고 CSS나 JS의 요소 선택기를 통해 요소를 제어할 때 사용하며 중복으로 설정 가능
      • id 속성은 문서에서 고유한 식별자를 정의하며 유일하게 설정
      • class와 id는 모든 tag에 사용할 수 있으며 이것들은 보통 지목(Select)을 위해 사용
        <!DOCTYPE html>
<html lang="ko">
<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>class_id</title>
    <style>
        .btn {
            height: 50px;
            background: #eee linear-gradient(to bottom, #fcfcfc, #eee);
            border: 2px solid #d5d5d5;
            border-radius: 5px;
            display: flex;
            align-items: center;
            padding: 0 12px;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.5;
            cursor: pointer;
            box-sizing: border-box;
            position: relative;
            color: #333;
        }

        .btn-primary {
            border: 1px solid #65b836;
            color: #fff;
            background: #55a532 linear-gradient(#91dd70, #55ae2e);
        }

        .btn:hover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.07);
        }

        .btn-pink {
            border: 1px solid #f060d1;

            color: #fff;
            background: #f060d1 linear-gradient(#f3baf0, #de56f0);
        }
    </style>
</head>
<body>
    <button id="join-btn" class="btn">Join</button>
    <!-- 클래스에 btn을 넣으면 style에서 지정한 btn과 같은 디자인 
         여러개의 버튼을 만들어도 btn과 같은 디자인으로 만들어짐 -->
    <!-- id 이름을 준 순간 다른 곳에서는 동일한 id이름을 줄 수 없음 -->

    <button class="btn btn-primary">Login</button>
    <!-- 디자인을 두개 적용할 수 있음  -->

    <button class="btn btn-pink">바튼</button>

    <script>
        document.getElementById("join-btn").onclick = function(){
            alert("회원 가입 버튼이 클릭.")
        }
    </script>
    <!-- JS를 이용하여 특정 버튼을 클릭하게 되면 이벤트를 발생시키는 것 
         id가 동일해야함 -->
</body>
</html>
    • style, title, data-*
      • style : 요소에 직접 스타일을 지정할 때 사용
      • title : 요소에 마우스를 포커스 했을 때 설명을 지정
      • data-* : 사용자 정의 데이터 속성을 지정 HTML에 JS에서 이용할 수 있는 데이터를 저장하는 용도
        <!DOCTYPE html>
<html lang="ko">
<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>style_title</title>
</head>
<body>
    <h1 title="정말신나?" style="color : blue; width : fit-content; background : red;">신난다 재미난다 점심시간~</h1>
    <!-- 해당 태그에만 style을 적용할 수 있도록 css를 통해서 style 적용
         아까 js와 다르게 재활용이 안되서 별로 안쓸듯 -->
    <!-- title : 마우스를 h1에 올렸을때 tooltip이 나오는 기능  -->
</body>
</html>
        <!DOCTYPE html>
<html lang="ko">
<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>
        p {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>
        Hello                                                 World!<br>
    </p>
    <!-- 아무리 가로 공백을 줘도 표시되지 않음  -->
    
    <p>
        Hello &nbsp;&nbsp;&nbsp; World! <br>
    </p>
    <!-- &nbsp : 가로 공백 한칸을 해주는 명령어 -->
    <p>
        Hello &nbsp;&ensp;&emsp;&emsp; World! <br>
        &quot;&lt;div&gt;&quot; 태그는 아무 의미가 없는 블록 영역을 구성
    </p>
    <!-- &ensp : 가로 공백 두 칸을 해주는 명령어 
         &emsp : 가로 공백 3칸을 해주는 명령어 
         &quot : "를 표현하는 명령어  
         &lt : <을 표현하는 명령어 
         &gt : >을 표현하는 명령어
        "<div>"를  표한하기 위해 &quot;&lt;div&gt;&quot; 사용-->
</body>
</html>
배포 과정에서 발생했던 issue 모음
[모던 리액트] 6장. 리덕스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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