728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 요소</title>
            <meta charset="UTF-8">
            <style>
                /*
                '태그 이름' {
                    '속성' : '값';
                    ...
                }
                */
                SPAN {
                    color: red;
                }
                DIV {
                    color: blue;
                }
            </style>
    </head>
    <body>
        <SPAN>ABC</SPAN>
        <DIV>123</DIV>
    </body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 그룹</title>
            <meta charset="UTF-8">
            <style>
                /*
                그룹 선택자 : 서로 다른 두 개 이상의 선택자에게 동일한 CSS 속성을 적용하기 위해 사용.
                '선택자 A', '선택자 B', '선택자 C', ... {
                    ...
                }
                */
                a, b, strong, sup, sub {
                    color: red;
                }
            </style>
    </head>
    <body>
        <a>I'm a.</a>
        <a>I'm b.</a>
        <strong>I'm strong.</strong>
        <sup>I'm sup.</sup>
        <sub>I'm sub.</sub>
    </body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
ul 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자</title>
        <meta charset="UTF-8">
        <style>
            /*
            <선택자(Selector)>{
                <속성(Property)>:<값>;
                <속성(Property)>:<값>;
                <속성(Property)>:<값>;
            }
            */
            /* 요소 선택자 (Element Selector)*/
            a {
                background-color: black;  
                /* 배경 색상 */
                color:red;
                 /* 글씨 색상*/
            }
            b {
                color:blue;
            }
            /* 자식 선택자 */
            /*
            '부모 선택자' > '자식 선택자' {
                ...
            }
            */
            body > a {
                font-size: 32px;
                /* 글씨 크기 */
            }


            body > b > a {
                text-decoration: underline;
            }
            /* 자손(후손) 선택자 (자식도 선택) */
            /*
            '선조' '자손(후손) 혹은 자식'{
                ...
            }
            */
            div a {
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- <a >Hello!</a>
        <b>
            Hi
            <A>child</A>
        </b>
        <a >ABCD</a>
        <div>
            <div>
                <b>
                    <a>
                        ??
                    </a>
                </b>
            </div>
        </div> -->
        <a>1</a>
        <div>
            <a>2</a>
            <div>
                <a>3</a>
                <span>
                    <a>4</a>
                </span>
            </div>
        </div>
        <a>5</a>


    </body>
</html>




<!-- /* */ -->
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

요소 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
ul 태그  (0) 2022.12.18
u 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">

<head>
    <title>화원가입</title>
    <meta charset="UTF-8">
</head>

<body>
    <form>
            <table border="1">          
                <caption>회원가입</caption>
                <thead>
                    <tr>
                        <th>이메일</th>
                        <td colspan="2"><input autofocus maxlength="50" placeholder="이메일" name="email" type="email"></td>
                    </tr>
                    <tr>
                        <th>비밀번호</th>
                        <td colspan="2"><input maxlength="100" placeholder="비밀번호" name="password" type="password"></td>
                        </th>
                    </tr>
                    <tr>
                        <th>비밀번호 확인</th>
                        <td colspan="2"><input maxlength="100" placeholder="비밀번호 재입력" name="passwordCheck" type="password"></td>
                    </tr>
                    <tr>
                        <th>닉네임</th>
                        <td colspan="2"><input maxlength="10" placeholder="닉네임" name="nickname" type="test"></td>
                    </tr>
                    <tr>
                        <th>통신사</th>
                        <td colspan="2">
                        <label><input name="telecom" type="radio">KT</label>
                        <label><input name="telecom" type="radio">SKT</label>
                        <label><input name="telecom" type="radio">LGU+</td></label>
                       
                    </tr>
                    <tr>
                        <th>연락처</th>
                        <td colspan="2"><input maxlength="11" placeholder="연락처" name="contact" type="tel"></td>
                    </tr>
                    <tr>
                        <th rowspan="2">약관</th>
                        <td colspan="2">어쩌고 약관<br>
                        <label>
                        <input colspan="2" value="checkbox" type="checkbox">위 약관을 읽어보았고 동의합니다.
                        </label>
                    </td>
                    </tr>

                </thead>
                <tbody>
                    <tr>
                        <label>
                        <th colspan="3"><input type="submit" value="돌아가기">
                        <input type="reset" value="다시 입력">
                        <input type="submit" value="회원가입"></th>
                    </label>
                    </tr>
                </tbody>
                <tfoot>
                </tfoot>
            </table>
    </form>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

그룹 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
ul 태그  (0) 2022.12.18
u 태그  (0) 2022.12.18
test 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>UL, OL</title>
            <meta charset="UTF-8">
    </head>
    <body>
        <ul>
            <!-- UL 태그 : Unordered List, 순서와 관계 없는 목록.(메뉴) 5/5 -->
            <!-- LI 태그 : List Item, 목록의 함목 UL과 OL 둘다 사용 5/5 -->
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
        <ol>
            <!-- OL 태그 : Ordered List, 순서와 관계가 있는 목록.(목차) 2/5 -->
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ol>
    </body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
u 태그  (0) 2022.12.18
test 태그  (0) 2022.12.18
table 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>U 태그</title>
        <meta charset="UTF-8">
    </head>

    <body>
        <u>밑줄</u>
        <!-- U 태그 : Underline, 밑줄 긋기 3/5 -->
        <ins>밑줄2</ins>
        <!-- INS 태그 : Inserted, 밑줄 긋기. 단, 해당 내용이 작성 후에 추가되었음을 나타낸다. 1/5 -->
    </body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

태그활용(회원가입창만들기)  (0) 2022.12.19
ul 태그  (0) 2022.12.18
test 태그  (0) 2022.12.18
table 태그  (0) 2022.12.18
sub 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>test</title>
            <meta charset="UTF-8">
    </head>
    <body>
        <table border="1">
                <thead>
                    <tr>
                    <td rowspan="3"><b>시·도별(1)</b></td>
                    <td colspan="6"><b>2021</b></td>
                   
                </tr>
                <tr>
                    <td colspan="2"><b>총인구(명)</td>
                    <td colspan="2"><b>남(명)</b></td>
                    <td colspan="2"><b>여(명)</b></td>
                </tr>
                <tr>
                    <td><b>원데이터</b></td>
                    <td><b>전년 대비 증감<br>(증감률)</b></td>
                    <td><b>원데이터</b></td>
                    <td><b>전년 대비 증감<br>(증감률)</b></td>
                    <td><b>원데이터</b></td>
                    <td><b>전년 대비 증감<br>(증감률)</b></td>
                </tr>
                <tr>
            </thead>
            <tbody>
                <tr>
                    <td>한국</td>
                    <td>52,739,009</td>
                    <td>-241,952(-0.5)</td>
                    <td>26,360,035</td>
                    <td>-135,230(-0.5)</td>
                    <td>26,378,974</td>
                    <td>-106,722(-0.4)</td>
                </tr>
                <tr>
                    <td>경기</td>
                    <td>13,925,862</td>
                    <td>118,704(0.9)</td>
                    <td>7,038,296</td>
                    <td>56,365(0.8)</td>
                    <td>6,887,566</td>
                    <td>62,339(0.9)</td>
                </tr>
                <tr>
                    <td>서울</td>
                    <td>9,736,027</td>
                    <td>-175,061(-1.8)</td>
                    <td>4,721,977</td>
                    <td>-94,545(-2.0)</td>
                    <td>5,014,050</td>
                    <td>-80,516(-1.6)</td>
                </tr>
                <tr>
                    <td>부산</td>
                    <td>3,396,109</td>
                    <td>-42,601(-1.2)</td>
                    <td>1,663,619</td>
                    <td>-22,793(-1.4)</td>
                    <td>1,732,490</td>
                    <td>-19,808(-1.1)</td>
                </tr>
                <tr>
                    <td>경남</td>
                    <td>3,377,331</td>
                    <td>-30,124(-0.9)</td>
                    <td>1,709,989</td>
                    <td>-16,564(-1.0)</td>
                    <td>1,667,342</td>
                    <td>-13,560(-0.8)</td>
                </tr>
                <tr>
                    <td>인천</td>
                    <td>3,014,739</td>
                    <td>4,263(0.1)</td>
                    <td>1,513,277</td>
                    <td>1,182(0.1)</td>
                    <td>1,501,462</td>
                    <td>3,081(0.2)</td>
                </tr>
                <tr>
                    <td>경북</td>
                    <td>2,677,709</td>
                    <td>-14,182(-0.5)</td>
                    <td>1,355,128</td>
                    <td>-6,779(-0.5)</td>
                    <td>1,322,581</td>
                    <td>-7,403(-0.6)</td>
                </tr>
                <tr>
                    <td>대구</td>
                    <td>2,412,642</td>
                    <td>-33,502(-1.4)</td>
                    <td>1,189,901</td>
                    <td>-18,119(-1.5)</td>
                    <td>1,222,741</td>
                    <td>-15,383(-1.2)</td>
                </tr>

            </tbody>
            <tfoot>

            </tfoot>

    </body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

ul 태그  (0) 2022.12.18
u 태그  (0) 2022.12.18
table 태그  (0) 2022.12.18
sub 태그  (0) 2022.12.18
s 태그  (0) 2022.12.18
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title></title>
            <meta charset="UTF-8">
    </head>
    <body>
        <table border="1">
            <!-- border 테두리 속성 -->
            <caption>표 제목</caption>
            <!-- CAPTION : 표의 제목 (선택) -->
            <thead>
                <!-- THEAD : 표의 테이터가 아닌 열 이름 등을 담을 때 사용. (선택사항) -->
                <tr>
                    <!-- TR : Table Row, 하나의 행 -->
                    <th rowspan="2">코드</th>
                    <!-- TH : Table Heading, 열 이름을 담는 셀(칸) -->
                    <th rowspan="2">이름</th>
                    <th colspan="2">인구(만)</th>
                    <th rowspan="2">면적(km<sup>2</sup>)</th>
                </tr>
                <tr>
                    <th>2021</th>
                    <th>2022</th>
                </tr>
            </thead>
            <tbody>
                <!-- TBODY : 표의 데이터를 담을 때 사용.(필수) -->
                <tr>
                    <td>KR</td>
                    <td>대한민국</td>
                    <td>5078</td>
                    <td>5178</td>
                    <td>100210</td>
                </tr>
                <tr>
                    <td>US</td>
                    <td>미국</td>
                    <td>32850</td>
                    <td>32950</td>
                    <td>9834000</td>
                </tr>
                <tr>
                    <td>JP</td>
                    <td>일본</td>
                    <td>12480</td>
                    <td>12580</td>
                    <td>377975</td>
                </tr>
                <tr>
                    <td>DE</td>
                    <td>독일</td>
                    <td>8224</td>
                    <td>8324</td>
                    <td>357588</td>
                </tr>
                <tr>
                    <td>FR</td>
                    <td>프랑스</td>
                    <td>6639</td>
                    <td>6739</td>
                    <td>543940</td>
                </tr>
                <tr>
                    <td>GB</td>
                    <td>영국</td>
                    <td>6622</td>
                    <td>6722</td>
                    <td>243610</td>
                </tr>
            </tbody>
                <tr>
                    <th colspan="2">평균</th>
                    <!-- COLSPAN 속성 : 가로(가로) 방향으로 통합시킬 셀 개수(본 셀 포함)-->
                    <td>11982.16667</td>
                    <td>12082.16667</td>
                    <td>1909553.833</td>
                </tr>
            <tfoot>
                <!-- TFOOT : 표의 데이터에 대한 통계(평균, 합 들) 등을 담을 때 사용. (선택) -->
            </tfoot>
        </table>
    </body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

u 태그  (0) 2022.12.18
test 태그  (0) 2022.12.18
sub 태그  (0) 2022.12.18
s 태그  (0) 2022.12.18
p 태그  (0) 2022.12.18

+ Recent posts

728x90
반응형
">