CSS3의 새로운 스타일 1

* 크기를 변경할 수 있는 박스 만들기

- resize 프로퍼티를 사용하면 크기를 조정할 수 있는 박스를 만들 수 있음.

 

[HTML]
<div class="myResize">유미나의 방</div>
 
[CSS]
.myResize {
    width:200px;
    height:40px;
    border:solid black 2px;
    overflow:auto;
    resize:both;
}

 

1) resize 프로퍼티

none : 크기 변경 불가    // 초기값

horizontal : 폭만 변경 가능

both : 폭/높이 변경 가능

vertical : 높이만 변경 가능

 

 

* 박스에 그림자 효과 주기

- box-shadow 프로퍼티를 사용하면 박스에 여러 가지 그림자 효과를 줄 수 있음.

 

[HTML]
<div class="myBoxShadow">유미나의 방</div>
 
[CSS]
.myBoxShadow {
    width:200px;
    height:40px;
    border:solid black 2px;
    box-shadow: #ff8080 3px 3px 2px;
}

 

1) box-shadow 프로퍼티

- none(음영 없음)     // 초기값

  또는 아래 파라미터를 지정함. (가로 위치와 세로 위치만 필수이고 나머지는 생략 가능)

 

위치와 크기	'가로 위치, 세로 위치, 불투명, 확대 반지름'순으로 지정함.
inset	지정하면 그림자를 박스 안쪽에 표시함. (지정하지 않을 때는 바깥쪽)
색	그림자의 색

 

* 문자열에 그림자 효과 주기

- text-shadow 프로퍼티를 사용하면 문자열에 그림자 효과를 줄 수 있음.

 

[HTML]
<div class="myTextShadow">유미나의 방</div>
 
[CSS]
.myTextShadow {
    test-shadow: #ff8080 3px 3px 2px;
}

 

1) text-shadow 프로퍼티

- none(음영 없음)    // 초기값

  또는 아래 파라미터를 지정함. (가로 위치와 세로 위치만 필수이고 나머지는 생략 가능)

 

위치와 크기	'가로 위치, 세로 위치, 불투명, 확대 반지름'순으로 지정함.
색	그림자의 색

 

 

* 문자 줄바꿈 처리

- word-wrap 프로퍼티를 사용하면 텍스트를 줄바꿈하는 방법을 지정할 수 있음.

 

word-wrap: normal;

- 줄을 바꿀 수 없는 부분이 없는 경우, 줄바꿈을 하지 않고 표시함.

- 스페이스 등 줄바꿈이 가능한 부분이 있으면 그 부분에서 줄을 바꿈.

 

word-wrap: break-word

- 줄을 바꿀 수 있는 부분이 없는 경우. 단어 중간에서 줄바꿈을 함.

 

 

* 세로 쓰기 표시하기

- writing-mode 프로퍼티를 사용하면 문자를 세로 쓰기로 표시할 수 있음.

- 문자 방향은 direction 프로퍼티에 의존함.

 

writing-mode: vertical-rl;

- horizontal-tb (위쪽(top)->아래쪽(bottom))     // IE에서는 'tb-rl'이라는 쓰기도 가능함.

- vertical-lr (왼쪽(left)->오른쪽(right))

- vertical-rl (오른쪽(right)->왼쪽(left))

 

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
resize	X	O	X	O	O
box-shadow	O	O	O	O	O
text-shadow	X	O	O	O	O
word-wrap	O	O	O	O	O
writing-mode	-ms-	X	X	-webkit-	-webkit-

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)