728x90 BOOK/HTML510 background background 하나의 영역에 백그라운드 이미지를 중복해서 사용할 수 있도록 기능이 추가 확장되었다. 속성의 값을 ',' 로 나열하여 백 그라운드 이미지 형태를 반복해서 표현 가능. background: url(이미지) 속성, url(이미지) 속성, ... ; [예제] 3개의 이미지를 서로 다른 속성으로 하나의 영역에 지정해 보자. [실행결과] 2021. 8. 10. border-radius border-radius 외각선의 모양을 둥글게 만드는 속성. 지정된 값은 둥글게 모양을 만들 원의 반경을 의미함. 지정될 값은 px 단위나 %단위로 지정할 수 있음. 속성 설명 border-radius: 좌우상하 모든 부분의 모양 지정. border-left-top-radius 왼쪽 상단의 모양 지정 border-right-top-radius 오른쪽 상단의 모양 지정 border-left-bottom-radius 왼쪽 하단의 모양 지정 border-right-bottom-radius 오른쪽 하단의 모양 지정 [예제 1] 4면 모두 둥글게 [예제 2] 반경을 100%를 사용하여 원을 표현 [예제 3] 그림자 효과를 같이 [예제 4] 상단 모서리만 효과 [예제 5] 상하좌우를 한번에 각기 다른 모양으로 2021. 8. 9. box-shadow box-shadow 영역의 외각 그림자의 특징을 정의함. [구조] box-shadow : 그림자시작 x 위치 그림자시작 y 위치 그림자 퍼짐값 그림자색 [예제1] [예제2] 그림자 퍼짐을 지정하지 않은 경우 [예제3] 그림자 시작 위치를 지정하지 않은 경우 2021. 8. 8. word-wrap word-wrap 문자사이에 공백이 없으면 강제 개행되지 않는것이 일반적인 특징이다. 그러나 break-word 옵션을 사용하여 공백이 없더라도 특정 영역 밖으로 문자가 나가지 않도록 개행해 준다. 옵션 : - normal : 일반적인 특징을 따름. - break-word : 강제로 개행해 줌. 2021. 8. 7. 이전 1 2 3 다음 728x90 LIST
