border-radius
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
border-radius 는 모서리 부분을 둥그렇게 만들어 줍니다.
예제 1
모서리를 둥글게 만들어 준 모습
보기
border-radius : 5px;
border-radius : 10px;
border-radius : 20px;
border-radius : 10px;
border-radius : 20px;
소스
<style type="text/css">
.css_test span {
background : #e2e2e2;
padding : 10px;
}
</style>
<div class="css_test">
<span style="border-radius:5px;">border-radius : 5px;</span><br><br>
<span style="border-radius:10px;">border-radius : 10px;</span><br><br>
<span style="border-radius:20px;">border-radius : 20px;</span>
</div>
.css_test span {
background : #e2e2e2;
padding : 10px;
}
</style>
<div class="css_test">
<span style="border-radius:5px;">border-radius : 5px;</span><br><br>
<span style="border-radius:10px;">border-radius : 10px;</span><br><br>
<span style="border-radius:20px;">border-radius : 20px;</span>
</div>
예제 2
실습 - 이미지에 적용 해보기 (px 단위)
보기
설명
슬라이더를 움직여 보세요 ^^
예제 3
실습 - 여러 이미지에 적용 해보기 (% 단위)
보기
설명
- 50% 가 최대값 입니다.
- 대상이 정사각형 이라면 50% 적용시 "원" 이 됩니다.
- 종류별로 이미지를 준비해 보았습니다.
- 대상이 정사각형 이라면 50% 적용시 "원" 이 됩니다.
- 종류별로 이미지를 준비해 보았습니다.
예제 4
실습 - 여러 이미지에 적용 해보기 (px 단위)
보기
설명
- px 단위는 모서리만 둥글게 만들고 싶을때 사용하면 좋습니다. % 단위 와 비교해 보세요 ^^
예제 5
실습 - 2개의 속성으로 왼쪽위,오른쪽아래 와 오른쪽위,왼쪽아래 조절하기
보기
예제 6
실습 - 각 모서리 개별적으로 조절하기
보기
설명
- border-radius : ↖ ↗ ↘ ↙ (왼쪽위 부터 시계방향으로 각 모서리)
예제 7
실습 - / (슬래시) 를 이용한 모서리 둥굴기 조절
보기
연구 1
그렇다면 이런걸 어떨까요? ㄷㄷㄷ
보기
설명
- / (슬래시) 를 이용한 각각의 모서리 둥굴기 조절해보기
연구 2
스타일로 꾸며보기 - 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>
<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>
연구 3
CSS 로 꾸며보기
보기
CSS 공작소
소스
<style type="text/css">
.css_test {
background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
border-radius : 10px;
border : 5px solid #006464;
box-shadow : 0 0 5px black, 0 0 7px white inset;
font-size : 12pt;
margin : 0 auto;
padding : 30px;
text-align : center;
width : 490px;
}
.css_test span {
color : white;
font-size : 55pt !important;
font-weight : bold;
line-height : 308px;
text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
}
</style>
<div class="css_test">
<span>CSS 공작소</span>
</div>
.css_test {
background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
border-radius : 10px;
border : 5px solid #006464;
box-shadow : 0 0 5px black, 0 0 7px white inset;
font-size : 12pt;
margin : 0 auto;
padding : 30px;
text-align : center;
width : 490px;
}
.css_test span {
color : white;
font-size : 55pt !important;
font-weight : bold;
line-height : 308px;
text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
}
</style>
<div class="css_test">
<span>CSS 공작소</span>
</div>
사용된 CSS (클릭시 보기) :
background-imageborderborder-radiusbox-shadowcolorfont-sizefont-weightline-heightmarginpaddingtext-aligntext-shadowwidth
설명
- text-shadow 와 box-shadow 를 다중으로 사용하였습니다. (컴마로 구분하여 사용)
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;
+ 관련 CSS +
- border테두리를 설정합니다
- border-bottomborder 에서 아래쪽 설정만 특화된 것입니다
- border-bottom-color테두리 아래쪽의 색을 지정합니다
- border-bottom-left-radius테두리 왼쪽 아래의 둥굴기를 설정합니다
- border-bottom-right-radius테두리 오른쪽 아래의 둥굴기를 설정합니다
- border-bottom-style아래쪽 테두리의 종류를 지정합니다
- border-bottom-width아래쪽 테두리의 두께를 지정합니다
- border-collapsetable 요소의 인접한 셀의 테두리 표시 방법을 지정합니다.
- border-color테두리 컬러만 설정합니다
- border-image이미지를 이용하여 테두리를 만듭니다
- border-leftborder 에서 왼쪽 설정만 특화된 것입니다
- border-left-color테두리 왼쪽의 색을 지정합니다
- border-left-style왼쪽 테두리의 종류를 지정합니다
- border-left-width왼쪽 테두리의 두께를 지정합니다
- border-radius모서리를 둥글게 만들어 줍니다
- border-rightborder 에서 오른쪽 설정만 특화된 것입니다
- border-right-color테두리 오른쪽의 색을 지정합니다
- border-right-style오른쪽 테두리의 종류를 지정합니다
- border-right-width오른쪽 테두리의 두께를 지정합니다.
- border-spacingtable 요소의 셀 간격을 지정합니다
- border-style테두리선의 종류를 지정합니다
- border-topborder 에서 위쪽 설정만 특화된 것입니다.
- border-top-color테두리 위쪽의 색을 지정합니다
- border-top-left-radius테두리 왼쪽 위의 둥굴기를 설정합니다
- border-top-right-radius테두리 오른쪽 위의 둥굴기를 설정합니다
- border-top-style위쪽 테두리의 종류를 지정합니다
- border-top-width아래쪽 테두리의 두께를 지정합니다
- border-width테두리의 두께를 지정합니다