Wednesday, June 14, 2006
HTML-CSS : DIV 태그로 간단한 박스(Box) 그리기 예제 + 박스 모서리 둥글게
div 태그에, 가령 이런 스타일을 적용해 주어야 합니다:
border:1px solid;
박스를 그리기 위해서는, border 속성으로 테두리를 만들어 주면 됩니다. 위의 예에서, 굵기는 1픽셀로 지정되어 있고 solid 는 그냥 단순한 직선을 의미합니다. dashed 로 지정하면 점선으로 나옵니다.
border:1px solid; padding:10px;
박스를 그리면, 안의 내용물과 테두리가 찰싹 달라붙어 있습니다. 안쪽으로 여백을 약간 주기 위해서는 padding:10px; 정도를 지정하면 적당합니다.
아래에 실용적인 예제 소스가 있습니다:
결과:
border:1px dashed; padding:10px;
로 점선으로 나타낸 결과:
border:2px solid red; padding:10px;
로 색깔을 지정해 준 결과:
업데이트:
border-radius:15px;
라는 속성을 추가해 주면 박스 모서리가 둥그스름하게 됩니다. 아래 예제와 같습니다.
위의 둥근 박스를 그린 HTML/CSS 소스는 아래와 같습니다:
<div style="border:1px solid; padding:10px; border-radius:15px;">
...내용...
</div>
border-radius 는 CSS2 가 아닌 CSS3 버전의 속성이기에, 아주 오래된 구형 웹브라우저에서는 박스 모서리가 둥글게 안 나오고, 즉, '모깍기'가 안 되고 그냥 전통적인 보통 DIV 박스처럼 날카롭게 나옵니다.
▶▶ [HTML-CSS] DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기 - border
▶▶ HTML-CSS] DIV 태그/테이블(TABLE, TD)태그에, 점선 테두리 만들기
border:1px solid;
박스를 그리기 위해서는, border 속성으로 테두리를 만들어 주면 됩니다. 위의 예에서, 굵기는 1픽셀로 지정되어 있고 solid 는 그냥 단순한 직선을 의미합니다. dashed 로 지정하면 점선으로 나옵니다.
border:1px solid; padding:10px;
박스를 그리면, 안의 내용물과 테두리가 찰싹 달라붙어 있습니다. 안쪽으로 여백을 약간 주기 위해서는 padding:10px; 정도를 지정하면 적당합니다.
아래에 실용적인 예제 소스가 있습니다:
헤더에 클래스를 정의하여
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함<html>
<head>
<style type="text/css">
.my-box { border:1px solid; padding:10px; }
</style>
</head>
<body>
<div class="my-box">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>
</body>
</html>
<head>
<style type="text/css">
.my-box { border:1px solid; padding:10px; }
</style>
</head>
<body>
<div class="my-box">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>
</body>
</html>
그냥 인라인으로 스타일 정의
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함<div style="border:1px solid; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>
결과:
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
border:1px dashed; padding:10px;
로 점선으로 나타낸 결과:
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
border:2px solid red; padding:10px;
로 색깔을 지정해 준 결과:
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
업데이트:
DIV 박스 모서리 둥글게 라운딩 처리하기
border-radius:15px;
라는 속성을 추가해 주면 박스 모서리가 둥그스름하게 됩니다. 아래 예제와 같습니다.
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
위의 둥근 박스를 그린 HTML/CSS 소스는 아래와 같습니다:
<div style="border:1px solid; padding:10px; border-radius:15px;">
...내용...
</div>
border-radius 는 CSS2 가 아닌 CSS3 버전의 속성이기에, 아주 오래된 구형 웹브라우저에서는 박스 모서리가 둥글게 안 나오고, 즉, '모깍기'가 안 되고 그냥 전통적인 보통 DIV 박스처럼 날카롭게 나옵니다.
▶▶ [HTML-CSS] DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기 - border
▶▶ HTML-CSS] DIV 태그/테이블(TABLE, TD)태그에, 점선 테두리 만들기
tag: html
HTML | CSS | 자바스크립트 JavaScript
This comment has been removed by the author.
<< Home