border

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

border 는 테두리를 설정합니다.

예제 1
테두리의 두께와 컬러
보기
1px solid silver
2px solid red
3px solid blue
2px solid #891EFF
소스
<div style="border:1px solid silver;">1px solid silver</div>
<div style="border:2px solid red;">2px solid red</div>
<div style="border:3px solid blue;">3px solid blue</div>
<div style="border:2px solid #891EFF;">2px solid #891EFF</div>
<img src="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" style="border:1px solid black;">
사용된 CSS (클릭시 보기) : borderhttps
설명

border : 두께 선종류 컬러; 로 사용합니다.


CSS 에서의 컬러값 도 참고해 보세요.
예제 2
실습 - 이미지에 테두리 적용해 보기
보기
border :
1px
border : 1px solid black
CSS 공작소
설명
슬라이더를 움직여 보세요 ^^
- 테두리 적용시 테두리 만큼 사이즈가 늘어납니다. 이것을 감안해서 크기를 적용해야 합니다.
예제 3
테두리 종류
보기
solid
dotted
dashed

double
groove
ridge
inset
outset
소스
<div style="border:1px solid gray;">solid</div>
<div style="border:1px dotted gray;">dotted</div>
<div style="border:1px dashed gray;">dashed</div>
<br>
<div style="border:3px double gray;">double</div>
<div style="border:4px groove gray;">groove</div>
<div style="border:4px ridge gray;">ridge</div>
<div style="border:4px inset gray;">inset</div>
<div style="border:4px outset gray;">outset</div>
사용된 CSS (클릭시 보기) : border
설명
- double 이하는 두께를 최소 3px 이상으로 설정해야 제대로 보입니다.
예제 4
border-radius 와 조합하기
보기
border-radius 와 같이 사용하면 보기좋습니다
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 1px solid silver;
    }
</style>

<div class="css_test">border-radius 와 같이 사용하면 보기좋습니다</div>
사용된 CSS (클릭시 보기) : borderborder-radius
설명
- border-radius 는 모서리를 둥글게 만들어 줍니다.
연구 1
테두리 선 종류 inset 과 outset 의 느낌비교
보기
inset 은 오목한 느낌의 테두리

outset 은 볼록한 느낌의 테두리
소스
<div style="background:#FFC1C1; padding:50px;">
    <div style="border:10px inset red; padding:30px; background:#FF8888;">inset 은 오목한 느낌의 테두리</div>
</div>
<br>
<div style="background:#FFC1C1; padding:50px;">
    <div style="border:10px outset red; padding:30px; background:#FFD2D2;">outset 은 볼록한 느낌의 테두리</div>
</div>
사용된 CSS (클릭시 보기) : backgroundborderpadding
설명
※ 브라우저 마다 조금씩 색감이 다릅니다.
연구 2
중첩하여 무지개 테두리 만들기
보기
무지개 칼라 파워 !
소스
<div style="border:10px ridge red;">
    <div style="border:10px ridge orange;">
        <div style="border:10px ridge yellow;">
            <div style="border:10px ridge green;">
                <div style="border:10px ridge blue;">
                    <div style="border:10px ridge navy;">
                        <div style="border:10px ridge purple;">
                            무지개 칼라 파워 !
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
사용된 CSS (클릭시 보기) : border
설명
※ 브라우저 마다 조금씩 색감이 다릅니다.
※ 참고자료 : 컬러 영어 이름 정리표
연구 3
사진에 테두리 효과내기
보기
소스
<style type="text/css">
    .css_test {
        border : 1px solid silver;
        box-shadow : 0 0 7px silver;/* 그림자 만들기 */
        padding : 6px;
    }
</style>

<img src="http://s26.postimg.org/62yxa8bc9/2_MP4_005075092.jpg" class="css_test">
사용된 CSS (클릭시 보기) : borderbox-shadowpadding
설명
테두리 + 그림자 효과로 포토샵의 사진 테두리 효과처럼 보이게 합니다(?)

※ 영구와 땡칠이의 마지막 장면입니다.
연구 4
306 보충대대 표지판 흉내내기
보기
306보충대대
→
 
소스
<style type="text/css">
    .css_test {
        background : #006600;
        border : 15px ridge #ddd;
        color : white;
        font-size : 34pt !important;
        font-weight : bold;
        padding : 20px;
        text-align : center;
    }

    .css_test_ {
        border-left : 15px ridge #ddd;
        border-right : 15px ridge #ddd;
        height : 100px;
    }
</style>

<div class="css_test">306보충대대<br>→</div>
<div class="css_test_">&nbsp;</div>
사용된 CSS (클릭시 보기) : backgroundborderborder-leftborder-rightcolorfont-sizefont-weightheightpaddingtext-align
설명
- 두개의 DIV 로 표지판과 기둥 모양을 만들어 보았습니다.

※ 추억의 306(삼공육) - 저도 306 ... ^^;
※ 306보충대는 2014년 12월 31일에 해체되었습니다.
연구 5
테두리 수치가 무지막지하게 크다면?
보기
100px solid red
300px 아주클경우
어이쿠
어이쿠
소스
<div style="border:100px solid red;">100px solid red</div>
<div style="border:300px solid blue;">300px 아주클경우</div>
<div style="border:30px dotted silver;">어이쿠</div>
<div style="border:30px dashed black;">어이쿠</div>
사용된 CSS (클릭시 보기) : border
연구 6
DIV 의 진화과정(?)을 살펴봅시다
보기
DIV 로 기본틀을 만듭니다.
배경을 넣어줍니다.
테두리를 만들어줍니다.
테두리를 좀 더 보기 좋게 바꾸어 줍니다.
모서리를 깎아줍니다.
그림자를 만들어 줍니다.
안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.
글자에 그림자 효과를 줍니다.
CSS 공작소에 오신것을 환영합니다
소스
<div style="padding:20px;">DIV 로 기본틀을 만듭니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png');">배경을 넣어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px solid #BC8D01;">테두리를 만들어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01;">테두리를 좀 더 보기 좋게 바꾸어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px;">모서리를 깎아줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver;">그림자를 만들어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset;">안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white;">글자에 그림자 효과를 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white; font-weight:bold; font-size:16pt;">CSS 공작소에 오신것을 환영합니다</div>
사용된 CSS (클릭시 보기) : background-imageborderborder-radiusbox-shadowfont-sizefont-weightpaddingtext-shadow
+ 관련 CSS +
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소