웹표준/Styling (4) 썸네일형 리스트형 4. text-overflow / 웹폰트 / text-decoration text-overflow 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성. 아래 2가지 조건을 충족할 경우에만 적용됨. 더보기 1. overflow속성값이 hidden, scroll, auto일때 2. white-space : nowrap 또는 텍스트가 다음 줄로 이동하지 않는 경우 overflow : hidden; white-space : nowrap; - text-overflow : clip / ellipsis / "-" 1. clip(기본값) : 텍스트를 자름 2. ellipsis : 잘린 텍스트를 생략 부호로 표시. 3. string : 잘린 텍스트를 지정한 문자열로 표시. (브라우저 지원 확인 필요) hyphens fdw @font-face 웹 브라우저에게 다운받을 서체의 이름.. 3. animation CSS로 자바스크립트없이 간단한 애니메이션 구현. 1. animation-delay = 요소가 로드되고나서 딜레이 되는 시간 2. animation-direction = 애니메이션이 종료되고 정방향으로 시작할건지 역방향으로 시작할건지 3. animation-name = @keyframe을 사용하여 애니메이션의 중간상태를 지정 4. animation-iteration-count = 애니메이션이 몇번 반복될지 설정. infinite를 지정하여 무한반복 5. animation-play-state : 애니메이션을 멈추거나 다시 시작 6. animation-timing-function : 중간 상태전환을 어떤 시간간격으로 진행할지 지정 7. animation-fill-mode : 애니메이션이 시작되기 전이나 끝나.. 2. border-image / border-radius border-image 요소의 테두리에 이미지를 그림 - border-image : source, slice, width, outset, repeat; 1. source : url(이미지 경로) 2. slice : 이미지를 구역별로 나눌 떄 사용할 슬라이스 크기 3. width : 테두리 이미지의 너비 4. outset : 이미지와 요소 외곽의 거리 5. repeat : 이미지를 테두리의 크기에 맞출때 모서리 조정방법 코드쳐보기 1. box-shadow / background / filter box-shadow 요소의 테두리를 감싸는 그림자 효과를 낼 수 있음. box-shadow : x, y, blur, spread, color, initial / inset / inherit - inset = 요소 안쪽에 그림자를 생성한다. 포지션값이 음수이면 right/bottom부터 시작한다. box-shadow: inset 10px 10px 5px gold; box-shadow: inset -10px -10px 5px gold; - 멀티 shadow box-shadow: 3px 3px red, -1em 0 .4em olive; Multi-background 하나의 선택자에 여러개의 background를 지정 할 수있다. .multi-bg-example { width: 100%; height: 400p.. 이전 1 다음
