습관제작소

22-06-16 Smart HTML/CSS 본문

SMHRD or ITSchool/HTML and CSS

22-06-16 Smart HTML/CSS

KUDO 2022. 6. 11. 14:20

CSS

- 기본 구조

 <!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>Document</title>
    <style>
        span{
            color :blue;
        }
        p{
            color : yellow;
        }
    </style>

    </head>
<body>
    <p>정형</P>
    <span>박수현</span>
</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>Document</title>
    <style>
        span{
            color :blue;
            /* 글꼴 변경 = font-family  */
            font-family: "굴림체";  /*글씨체*/
            font-size: 100px;       /*글씨 크기. 기본 16px*/  
            font-weight: bold;      /*글씨 굵기*/
            font-style: italic;     /*글씨 기울기  or  이미지 불러오기*/
        }
        p{
            color : yellow;

        }
    </style>

    </head>
<body>
    <p>정형</P>
    <span>박수현</span>
</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>Document</title>

    <style>
        /* 전체선택자(*) : 모든 태그들에게 적용할 때 사용 */
        *{
            color: blue;
        }

        /* 태그선택자(태그이름) : 특정 태그이름에게 적용할 때 사용 */
        P{
            color: red;
        }

        /* 클래스선택자(.클래스명) : 특정 클래스들에게 적용할 때 사용 */
        .txt{
            color: yellow;
        }

        /* ID선택자(#ID명) : 특정 아이디에게 적용할 때 사용 */
        #sp{
            color:green;
        }
    </style>
</head>
<body>
    <p>빅테이터</p>
    <p class="txt">인공지능</p>
    <span class="txt" id="sp">IoT</span>
    <span class="txt" id="sp">IoT</span>
    <span>Web</span>


</body>
</html>

- CSS 코드 활용하여 회원가입 만들기

<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>Document</title>

    <style>
        table{
            width: 400px;
        }
        .txt1{
            background-color: gray;
            height: 50px;

        }
        .txt1{
            background-color: whitesmoke; 
            height:35px;
        }
        #id{
            background-color: whitesmoke;
            text-align:center;
        }

    </style>

</head>

<body>
    <table>

        <!-- 1.아이디/비번 -->

        <tr class="txt1">
            <!-- 설명이 들어가는 칸 (제목) -->
            <th colspan="2">Step 1 : 아이디/비번 입력</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr class="txt2">
            <!-- 아이디 입력 칸 -->
            <td>아이디 : </td>
            <td><input type="text"></td>
        </tr>
        <tr class="txt2">
            <!-- 비밀번호 입력 칸 -->
            <td>비밀번호 : </td>
            <td><input type="password"></td>
        </tr>
        <tr class="txt2">
            <!-- 비밀번호를 확인하는 칸 -->
            <td>비밀번호 확인 : </td>
            <td><input type="password"></td>
        </tr>

        <!--2.개인정보 -->

        <tr class="txt1">
            <!-- 제목-->
            <th colspan="2">Step 2 : 개인정보</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr class="txt2">
            <!-- 성별 -->
            <td>성별 : </td>
            <td>
                <span>남</span><input type="radio" name="gender">
                <span>여</span><input type="radio" name="gender">
            </td>
        </tr>
        <tr class="txt2">
            <!-- 혈액형 -->
            <td>혈액형 : </td>
            <td>
                <select>
                    <option value="A형">A형</option>
                    <option value="B형">B형</option>
                    <option value="O형">O형</option>
                    <option value="AB형">AB형</option>
                </select>
            </td>
        </tr>
        <tr class="txt2">
            <!-- 생일 -->
            <td>생일 : </td>
            <td><input type="date"></td>
        </tr>

        <!-- 3.선호도 -->

        <tr class="txt1">
            <!--  (제목) -->
            <th colspan="2">Step 3 : 선호도</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr class="txt2">
            <!-- 취미 -->
            <td>취미 : </td>
            <td>
                <span>축구</span><input type="checkbox" name="hobby">
                <span>야구</span><input type="checkbox" name="hobby">
                <span>농구</span><input type="checkbox" name="hobby">
            </td>
        </tr>
        <tr class="txt2">
            <!--색깔 -->
            <td>좋아하는 색깔 : </td>
            <td><input type="color"></td>
        </tr>

        <!--4.적고싶은말 -->
        <tr class="txt1">
            <!--  (제목) -->
            <th colspan="2">Step 4 :적고 싶은 말</th>
            <!-- colspan 가로 합치기, rowspan 세로 합치기 -->
        </tr>
        <tr class="txt2">
            <td colspan="2">
                <textarea cols='60' rows="3">

                </textarea>
            </td>
        </tr>
        <td clas ="txt1" id="id" colspan="2" ><input type="submit"> <input type="reset"></td>
    </table>


</body>

</html>

'SMHRD or ITSchool > HTML and CSS' 카테고리의 다른 글

22-06-15 Smart HTML/CSS  (0) 2022.06.15
22-06-14 Smart HTML/CSS  (0) 2022.06.14
22-06-10 Smart HTML/CSS  (0) 2022.06.11
22-06-09 Smart HTML/CSS  (0) 2022.06.09
22-06-08 Smart HTML/CSS  (0) 2022.06.08
'SMHRD or ITSchool/HTML and CSS' Related Articles more
Comments