Wednesday, June 14, 2006
HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제
div 태그에, 가령 이런 스타일을 적용해 주어야 합니다:
border:1px solid;
박스를 그리기 위해서는, border 속성으로 테두리를 만들어 주면 됩니다. 위의 예에서, 굵기는 1픽셀로 지정되어 있고 solid 는 그냥 단순한 직선을 의미합니다. dashed 로 지정하면 점선으로 나옵니다.
border:1px solid; padding:10px;
박스를 그리면, 안의 내용물과 테두리가 찰싹 달라붙어 있습니다. 안쪽으로 여백을 약간 주기 위해서는 padding:10px; 정도를 지정하면 적당합니다.
결과:
점선으로 나타낸 결과:
border:2px solid red; padding:10px;
로 색깔을 지정해 준 결과:
▶▶ [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:2px solid red; padding:10px;
로 색깔을 지정해 준 결과:
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
▶▶ [HTML-CSS] DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기 - border
▶▶ HTML-CSS] DIV 태그/테이블(TABLE, TD)태그에, 점선 테두리 만들기
tag: html
HTML | CSS | 자바스크립트 JavaScript
This comment has been removed by the author.
Post a Comment
<< Home