20.11.26-4日

56049 ワード
CSS テキストリンク
この授業からCSSを勉強します!
www.w3schools

😻CSSとは?

  • Cascading Style Sheets
  • HTML要素が画面、紙、または他のメディアにどのように表示されるか
    • .
  • は、多くの作業を節約します.複数のウェブページを同時に制御可能なレイアウト
  • 外部スタイルシートはCSSファイルに
    • 格納.

    😻シンタックス


  • CSSルールセットはセレクタと宣言ブロックからなる
  • セレクタは、スタイルを指定するHTML要素
    • を指す.
  • 宣言ブロックは、セミコロンで区切られた1つ以上の宣言を含む.
  • 各宣言は、コロンで区切られたCSS属性名と値
    • を含む.
  • 複数のCSS宣言はセミコロンで区切られ、宣言ブロックは括弧で囲まれている

    • 😻セレクタ


    セレクタ(Selector):タグの意味を指す
    📌「タグ」(Tag)を使用します.

    📌idの使用方法
    -同じid名を繰り返さないで!👉JavaScript制御タグの使用中に問題が発生

    📌classの使用方法
    -同じクラス名を使用可能
    -同じまたは異なるラベルに同じ効果を適用します.

    ✔All CSS simple Selectors

    😻CSS How to


    👇htmlにcssを適用する方法👇
    📌External CSS
  • ファイルを1つ変更するだけで、Webサイト全体の外観を変更できます.
  • この表は、任意のテキストエディタで作成できます.css拡張子で保存する必要があります.
  • 外部.cssファイルにはHTMLタグ
    • がない必要があります.
    📌Internal CSS

    📌Inline CSS

    😻CSS Comments(注釈)/**/

    /*내용*/

    😻Opticity/transparency(不透明度/透明度)


  • 不透明度属性指定要素の不透明度/透明度
  • 200-1.0の値
  • の値が低いほど、透明度は
    • 高くなります.

    😻リファレンス


    w3schools

    😉課題


    会員の養子縁組式を作って、うまくやったかどうか分かりませんが、
    <!DOCTYPE html>
<html>
    <head>
        <style>
        table, td {
          border: 1px solid black;
          border-collapse: collapse;
          text-align: left;
        }
        </style>
        </head>
    <body>
       <form action="/action_page.php">
           <table>
         <tr>
            <td style="background-color: indianred;"> 
                <label for="name">✔이름</lable>
            </td>
            <td>
               <input type="text" id="name" name="name">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="아이디">✔아이디</label>
            </td>
            <td>
                <input type="text" id="아이디">
                <input type="button" value="✔아이디중복확인" onclick="Idcheck">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="psword">✔비밀번호</label>
            </td>
            <td>
                <input type="password" id="psword" name="psword">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="pswcheck">✔비밀번호 확인</label>
            </td>
            <td>
                <input type="password" id=pswcheck name="pswcheck">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="birthday">✔생년월일/성별</label>
            </td>
            <td>
                <input type="date" id="birthday" name="birthday">
                 <label for="male">남자</label>
                 <input type="radio" id="male" name="gender" value="male">
                 <lable for="female">여자</lable>
                 <input type="radio" id="female" name="gender" value="female">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;"> 
                <label for="email">✔이메일</label>
            </td>
            <td>
                <input type="email" id="email" name="email">@<input type="email" id="email" name="email">
                <select id="email" name="emailselect">
                    <option value="네이버">네이버</option>
                    <option value="다음">다음</option>
                    <option value="구글">구글</option>
                    <option value="기타">기타</option>
                   </select>
                <input type="button" value="✔인증코드 발송" onclick="emailsend"><br>
                <input type="email" id="email" name="email">
                <input type="button" value="✔인증확인" onclick="emailcheck"><br>
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="phone">✔연락처</label>
            </td>
            <td>
                휴대전화  <select id="phone" name="phoneN">
                    <option value="선택">선택</option>
                    <option value="010">010</option>
                    <option value="011">011</option>
                   </select>-
                   <input type="text" id="phone1" name="phone" maxlength="4">-
                   <input type="text" id="phone2" name="phone" maxlength="4">
                   <br>일반전화  <select id="call" name="callN">
                    <option value="선택">선택</option>
                    <option value="02">02</option>
                    <option value="031">031</option>
                    <option value="051">051</option>
                   </select>-
                   <input type="text" id="call1" name="phone" maxlength="4">-
                   <input type="text" id="call2" name="phone" maxlength="4">
             </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="zipcode">✔우편번호</label>
            </td>
            <td>
                <input type="text" id="zipcode">
                <input type="button" value="주소검색" onclick="adresssh">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <label for="adress">✔주소</label>
            </td>
            <td>
                <input type="text" id="adress"><br>
                <input type="text" id="adress">
            </td>
        </tr>
        <tr>
            <td style="background-color: indianred;">
                <lable for="event">정보수신 여부</label>
            </td>
            <td>
               서비스 및 이벤트 소식을
            <input type="checkbox" id="event1" name="event1">
            <lable for="event1">Email로 수신하겠습니다.</lable>
            <input type="checkbox" id="event2" name="event2">
            <lable for="event1">SMS로 수신하겠습니다.</lable>
            </td>
        </tr><br>
        </table>
        <br><br><input type="submit" value="저장">
        <input type="reset" value="취소">
        </form>
    </body>
</html>
    UVA 213(文字入力＋符号化)
    [Programmers](Weekly Challenge)第2週-JAVA