이진욱의코딩

html의 테두리에 대해 알아봅시다. 본문

HTML

html의 테두리에 대해 알아봅시다.

Crucifi 2019. 10. 2. 00:58

이번 시간은 여러 가지 테두리 사용법과 background적용에 대해서 알아보도록 하겠습니다.

 

테두리라고 하면 border을 말하는 것쯤은 알고 있을 거라고 생각합니다.

보통 border값을 정할때는  

 

 border: 10px solid pink;

이런 식으로 solid를 많이 쓰지만 이번 시간에는 여러 가지 선종류에 대해서 알려드리겠습니다.

 

선종류로는 solid, dotted, dashed, double

                 ridge, groove, inset, outset 등이 존재합니다. 하나씩 입력해보시면서 변화를 보시면

좋을 겁니다.

 

그리고 한번 응용도 해보도록 하겠습니다.

우리가 이번에 만들 것을 먼저 보도록 하지요.

 

 

결과물입니다. 이것을 앞서 배웠던 내용을 바탕으로 한번 만들어보세요!!

 

 

결과 코드는 밑에 적어놓겠습니다.

'

'

'

'

'

'

'

'

'

'

'

'

'

'

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>document</title>
    <style type="text/css">
        table { border-collapse: collapse;
                border-top: 5px solid black;
                border-bottom: 3px solid black;
        }
        td { width: 300px; height: 150px; 
             border-bottom: 1px solid black;
        }
       
        .ttt { border-right: 1px solid black; }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="ttt">1행1열</td>
            <td>1행2열</td>
        </tr>
        <tr>
            <td class="ttt">2행1열</td>
            <td>2행2열</td>
        </tr>
    </table>
</body>
</html>

 

어때요 한번 해보셨나요?? 혹시 안 되시는 부분이 있거나 이해가 안되시는 부분 있으면 댓글 달아주시면 

설명해드리겠습니다.

 

여기까지는 직선으로 무엇인가를 만들었는데 이번에는 곡선으로도 한번 만들어 봅시다.

핵심코드는 border-radius입니다. 이것을 사용하면 곡선을 만들 수 있늗데여 이 곡선들을 

서로 인접하게 이으면 둥근원을 만들 수도 있습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 둥근 테두리속성을 적용 */
        div {width: 500px; height:500px;
             /* border: 1px solid red; */
             /* border-top-left-radius: 100px;
             border-bottom-left-radius: 100px;
             border-top-right-radius: 100px;
             border-bottom-right-radius: 100px; */

             /* border-radius: 100px 100px 100px 100px; */
             /* 대각선으로 값이 같으면 두자리만 적으면됩니다. */

             
             }
             div h1 { width: 500px; height: 500px; 
                      background: green; margin: 0;
                      border-radius: 500%;}
                      /* %라고 적어도됨 */
    
    </style>
</head>
<body>
    <div>
        <h1></h1>
    </div>
</body>
</html>

 

 

개구리 얼굴입니다.

 

이렇게 타원의 형태까지 만들 수가 있습니다.

 

 

'HTML' 카테고리의 다른 글

(HTML,CSS)핀터레스트 스타일 레이아웃 만들기  (0) 2019.10.03
html의 box-sizing, display, visibility속성에 대해 알아봅시다.  (0) 2019.10.02
css속성에 대해 알아봅시다.  (0) 2019.09.27
섹션(section)요소에 대해 알아봅시다.  (0) 2019.09.22
오디오, 비디오태그, 기타택스트관련태그, 특수기호에 대해 알아봅시다.  (0) 2019.09.19
'HTML' Related Articles more