box 2-2
이미지 border
. 방법 : border-image: url("") 간격 옵션;
- round : edge 이미지 반복배치
- repeat:
- stretch:
. 이미지 준비
size : 30x30
<style type="text/css">
p{
background: yellow;
width: 200px;
height: 60px;
padding: 10px;
border: 20px solid lightgray;
}
#round{border-image: url("img/123.png") 30 round;}
#repeat{border-image: url("img/123.png") 30 repeat;}
#stretch{border-image: url("img/123.png") 30 stretch;}
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
다음은 원본 이미지 입니다<br>
<img src="img/border.png" alt="">
<hr>
<p id="round">round 스타일 이미지 테두리</p>
<p id="repeat">round 스타일 이미지 테두리</p>
<p id="stretch">round 스타일 이미지 테두리</p>
</body>
Overflow
; 내용이 영역안에 모두 들어가지 않을 경우의 표기지정
. visible : 넘치는 내용을 보이게 설정
. hidden : 넘치는 내용을 안보이게 설정
. scroll : 스크롤되게 설정
. auto : 브라우저의 기본값으로 설정
white-space
; 공백을 어떻게 처리할 것인지의 속성. 공백-탭문자, 띄어쓰기, 줄바꿈문자
. normal : 연속된 공백과 줄바꿈은 공백1개로 대체됨
. nowrap : 자동 줄바꿈 처리를 하지 않게 할때, 연속된 공백과 줄바꿈은 공백1개로 처리
. pre : 자동 줄바꿈 처리는 하지 않는데 연속된 공백과 줄바꿈을 그대로 표현
. pre-wrap: 자동 줄바꿈
<style type="text/css">
div{
margin: 20px;
border: #0033cc solid 1px;
background-color: #568379;
box-shadow: 2px 2px 4px black;
width: 500px;
height: 120px;
white-space: nowrap;
overflow-x: scroll; /* x축 스크롤바 표시 */
overflow-y: scroll; /* y축 스크롤바 표시 */
resize: both; /* 사이즈를 바꿀 수 있음 */
}
</style>
</head>
<body>
<div>
<h3>문서의 레이아웃</h3>
<p>문서의 레이아웃이나 디자인을 정의하는 스타일 시트중, HTML문서나 XHTML등에서
이용되는 사양이 CSS(Cascading Style Sheet)입니다.<br>
이전의 HTML문서에서는 "문서의 구조를 나타내는 부분"과 "모양을 나타내는 부분이"
둘다 HTML의 요소로 지정되어 같이 섞어서 사용하였습니다.</p>
</div>
</body>
박스의 width를 설정하는 방법
box-sizing
. content-box : 기존에 알고있는 width
. border-box : border를 포함하는 width
<style type="text/css">
/* 초기화 */
*{margin: 0; padding: 0}
/* 공통 */
div{
width: 200px; height: 200px;
margin: 10px; padding: 10px;
text-align: center;
vertical-align: middle;
}
.content-box{
background-color: green;
box-sizing: content-box;
border: 5px solid black;
}
.border-box{
background-color: red;
box-sizing: border-box;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="content-box">기본박스(content박스)</div>
<div class="border-box">border박스</div>
</body>
box 중앙에 배치
box{width: 값, margin: 값 auto;}
<style type="text/css">
*{margin:0; padding:0}
.a{width: 100px; height: 100px; background: blue; text-align: center; color:white;}
.b{width: 100px; height: 100px; margin: 50px auto; background: yellow; text-align: center;}
.c{width: 100px; height: 100px; position: absolute; right: 0; background: red;}
</style>
</head>
<body>
<div class="a">좌측에 배치</div>
<div class="b">중앙에 배치</div>
<div class="c">우측에 배치</div>
</body>