예전에 테이블에 부여했던 테두리를 자세히 설명한다.


테두리는 기본적으로 border 키워드를 사용


border-width, border-style, border-color 세가지가 있고,


세가지를 합친 border: [width style color] 키워드도 있다.


또한 border-[top/bottom/left/right]-attr(속성)을 통해


테두리의 각 부분의 속성을 컨트롤 할 수 있다.


사용법과 예시를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>Input</title>
        <link rel="icon" href = "btn.png">
        <style>
            /*border-width, border-style, border-color 세가지를 합친*/
            /*border: [width style color]을 사용한 것.*/
            /*또한 border-[top/bottom/left/right]-attr(속성)을 통해*/
            /*테두리의 각 부분의 속성을 컨트롤 할 수 있다.*/

            .one{
                border: 5px solid red;
            }

            .two{
                border-style: dashed;
                border-width: thin;
                border-color: brown;
            }

            .three{
                border-bottom-style: dotted;
                border-top-style: double;
                border-right-style: solid;
                border-left-style: solid;
                border-left-color: aquamarine;
                /*선이 없을 경우, 색깔만 줘도 아무 변화 없다.*/
            }

            .four{
                border-bottom-style:groove;
                border-top-style: groove;

                border-right-style: ridge;
                border-left-style: ridge;
            }

            .five{
                /*한번에 주는 방법*/
                /*12-3-6-9, 시계방향*/
                border-style: double solid dotted dashed; 
            }
        </style>
        <!--스타일이 많으면 로딩이 느려질 수 있다.-->
        <!--아이디가 # 클래스가 . 태그는 p-->
    </head>
    <body>
        <p class="one">This is content</p>
        <p class="two">This is content</p>
        <p class="three">This is content</p>
        <p class="four">This is content</p>
        <p class="five">This is content</p>
    </body>

</html>



실행 화면







테이블에 적용 예시


마진 기능을 추가하여 좀 더 이쁘게 자리잡았다. 


<html>
    <head>
        <meta charset="UTF-8">
        <title>로그인 박스</title>
        <style>
            table, th, td{
                border: 1px solid black;
                border-collapse: collapse;
            }
            th{
                width: 50px;
                padding: 3px;
            }
            td{
                width: 50px;
                padding: 3px;
            }
            </style>
    </head>
    <body>
        <h2>로그인</h2>
        <hr/>
        <form action="" method="GET">
            <fieldset>
            <table>
                <tr><!--행(row)선언-->
                    <th><b>ID</b></th>
                    <th><input type="text" name = "UserID" value=""placeholder = "아이디를 입력 해주세요."/></th>
                    <th rowspan="2"><input type="submit" value="로그인"/></th>
                </tr>
                <tr><!--행(row)선언-->
                    <th><b>PW</b></th>
                    <th><input type="password" name = "UserPW" value=""placeholder = "비밀번호를 입력 해주세요."/></th>
                </tr>
                <tr><!--행(row)선언-->
                    <th colspan="3"><input type="button" value="회원가입"/> <input type="button" value="아이디/비번 찾기"></th>
                </tr>
            </table>
            </fieldset>
        </form>

    </body>
</html>





<html>
    <head>
        <meta charset="UTF-8">
        <title>회원가입 페이지</title>
        <style>
            table, th, td{
                border: 1px solid black;
                border-collapse: collapse;
            }
            th, td{
                padding: 3px;
            }
        </style>
    </head>
    <body>
        <fieldset>
        <h2>회원가입</h2>
        <hr/>
        <form action="" method="GET">
        <table>
            <tr>
                <th>아이디</th>
                <td><input type="text" name = "UserID" value=""/></td>
            </tr>
            <tr>
                <th>비밀번호</th>
                <td><input type="text" name = "UserPW" value=""/></td>
            </tr>
            <tr>
                <th>비밀번호 확인</th>
                <td><input type="text" name = "ReUserPW" value=""/></td>
            </tr>
            <tr>
                <th>이름</th>
                <td><input type="text" name = "Name" value=""/></td>
            </tr>
            <tr>
                <th>이메일</th>
                <td><input type="email" name="mail" required/></td>
            </tr>
            <tr>
                <th>생년월일</th>
                <td>
                    <select name="year">
                        <option value="1995">1995</option>
                        <option value="1996"d>1996</option>
                        <option value="1997" selected>1997</option>
                        <option value="1998">1998</option>
                        <option value="1999">1999</option>
                        <option value="2000">2000</option>
                    </select>
                    <select name="month">
                        <option value="01" selected>01</option>
                    </select>
                    <select name="day">
                        <option value="01" selected>01</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>성별</th>
                <td>
                    <input type="radio" name="gender" value="male"/> 남자
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="gender" value="female"/> 여자
                </td>
            </tr>
            <tr>
                <th>취미</th>
                <td>
                    <input type="checkbox" name="hobby" value="드라이브"/>드라이브
                    <input type="checkbox" name="hobby" value="스포츠"/>스포츠
                    <input type="checkbox" name="hobby" value="게임"/>게임
                    <input type="checkbox" name="hobby" value="낚시"/>낚시
                </td>
            </tr>
            <tr>
                <th>나이</th>
                <td><input type="number" name="age" min="1" max="200" value="20"/></td>
            </tr>
            <tr>
                <th>보안등급</th>
                <td><input type="range" name="security" min="0" max="100" value="0" step="20"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="회원가입"/>
                </td>
            </tr>
        </table>
        </form>
        </fieldset>
    </body>
</html>










저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글

[CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인  (0) 2018.10.17
[CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기  (0) 2018.10.17
[CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제  (0) 2018.10.17
[CSS]03-03.background, 배경화면  (0) 2018.10.17
[CSS]03-01.CSS, Style, 선택자  (0) 2018.10.16

+ Recent posts

티스토리툴바