Front-end58 CSS - 속성 - 애니메이션 & 다단 1. 애니메이션 개요 : 요소에 애니메이션을 설정/제어 값 의미 기본값 animation-name @keyframse규칙의 이름을 지정 none animation-duration 애니메이션의 지속 시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 0s animation-iteration-count 애니메이션의 반복 횟수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal animation-fill-mode 애니메이션의 전후 상태(위치) 설정 none animation-play-state 애니메이션의 재생과 정지 설정 running animation: 애니메이션이름 지속시간 [.. 2021. 2. 11. CSS속성 - 전환 & 변환 1. 전환(Transitions) : CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정(타이밍 함수란?) ease transition-delay 전환 효과의 대기시간 설정 0s -1) transition-property : 전환 효과를 사용할 속성 이름을 설정 값 의미 기본값 all 모든 속성에 적용 all 속성이름 전환 효과를 사용할 속성이름 -2) transition-duration : 전환 효과의 지속시간을 설정 (1s = 1000ms) 값 의미 기본값 시간 .. 2021. 2. 11. CSS - 배경 1. background : 요소의 배경을 설정 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll background: 색상 이미지경로 반복 위치 스크롤특성; .box1{ /*색상 이미지경로 반복 위치 스크롤특성*/ background: red url("../ing/image.jpg") no-repeat left top scroll; } .box2{ /*이미지경로 반복 위치*/ background: ur.. 2021. 2. 11. CSS - 띄움(정렬), 위치 1. float : 요소를 좌우 방향으로 띄움(수평 정렬), 적용된 요소 주변으로 문자가 흐르는 형태 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 - float 해제 : float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야 1. 형제요소에 clear: (left,right,both) 추가하여 해제 : float 속성이 추가된 요소의 다음 형제요소에 clear 속성 추가 1 2 3 .box { width: 150px; height: 100px; background: tomato; color: white; font-size: 30px; margin: 10px; float: left; /*왼쪽 --> .. 2021. 2. 7. CSS - 글꼴,문자 1. font, font-style : 글자 관련 속성들을 지정(단축속성) 값 의미 기본값 font-style 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(간격) 지정 normal(Reset.css적용시 1) font-family 글꼴 지정 운영체제(브라우저)에 따라 달라짐 - 단축 속성을 사용하여면 font-size, font-family는 필수 입력 font: 기울기 두께 크기 / 줄높이 글꼴; .box{ font: italic bold 20px / 1.5 "Arial" , sans-serif; } .box{ font: 30px / 1.5; /*ERROR*/ font: bold;.. 2021. 2. 2. CSS - 박스모델 1. width, height -1) width : 요소의 가로 너비를 지정 값 의미 기본값 auto 브라우저가 너비를 계산 auto 단위 px, em, cm 등 단위로 지정 -2) height : 요소의 세로 너비를 지정 값 의미 기본값 auto 브라우저가 너비를 계산 auto 단위 px, em, cm 등 단위로 지정 블록요소와 인라인요소의 기본값 div { width: auto; /* 100% */ height: auto; /* 0 */ } span { width: auto; /* 0 */ height: auto; /* 0 */ } 2. max-width, min-width, max-height, min-height -1) max-width : 요소의 최대 가로 너비를 지정 -2) min-width .. 2021. 2. 2. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
