컴퓨터 엑셀 워드 포토숍 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Previous Post 일본어 키보드와 특수문자 / 한글 자판으로 일어 입력 / Japanese Keyboard[일본어 학습] 々 는 무슨 기호인가요? 한자인가요?IE로 웹페이지를 저장하려고 하면, '선택한 위치에 웹 페이지를 저장할 수 없습니다'라는 ...[QnA] 파일 압축 프로그램의 종류는?정규식 / 정규표현식 (Regular Expressions; Regex) 이란?도스(DOS) 환경변수 보기 [컴퓨터 초보자를 위한 강좌][C언어] COLOR 명령 확장: 명령프롬프트 글자색 변경 유틸리티 setclr.exe 만...[C언어] printf() / puts() / cprintf() 함수의 차이점[C언어/C++] 비주얼C로 콘솔 글자 색깔 변경, 볼랜드C++의 textcolor() 함...[HTML-CSS] 테이블 td 태그의 바탕색 한꺼번에 변경/ 테두리 색 지정 / 테두리 ...

[HTML-CSS] DIV 태그로 간단한 박스(Box) 그리기 예제

Wednesday, June 14, 2006

div 태그에, 가령 이런 스타일을 적용해 주어야 합니다:

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>





그냥 인라인으로 스타일 정의


<div style="border:1px solid; padding:10px;">
저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.
</div>





결과:

저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.




점선으로 나타낸 결과:

저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.




border:2px solid red; padding:10px;
로 색깔을 지정해 준 결과:

저 버스 표지판에 적힌 지명들은 이 세상에 존재하지 않는 곳이거나 누구도 갈 수 없는 곳인 양 여겨지고 있다. 저 약재상과 이불 가게의 진열창을 침수시킨 어둠은 내가 항시 보던 어둠과 전혀 달라 어떤 탐미적 이질감마저 느껴지고 있다.

상점 안에 보이는 저 상인들조차도 단순히 뭔가를 팔고 있는 것이 아니라, 인생이라는 우울한 사건을 꾸미러 온 정체 불명의 존재들처럼 여겨지고 있다.





▶▶ [HTML-CSS] DIV 태그에 테두리 만들고 색깔 변경 / 상하좌우 다른 테두리 만들기 - border


▶▶ HTML-CSS] DIV 태그/테이블(TABLE, TD)태그에, 점선 테두리 만들기

☞ HTML/CSS/JavaScript

1 Comments:
At 9:54 AM, Blogger Korean Translator said...

This comment has been removed by the author.

 

Post a Comment

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Categories
Previous Posts
Monthly Archives
Top