영최의 개발켈로그

1. @keyframes란? - CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능이다. - 애니메이션의 중간 지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션을 조절하는 기능 - 키프레임을 변수에 선언하고 해당 변수를 CSS 에서 불러와서 사용할 수 있다. 2. @keyframes에서 설정되는 값 - to/ from - 0% ~ 100% 3.Animation의 속성? 1) animation-name(이름): keyframes로 지정한 애니메이션 이름 2) animation-duration(지속시간): 애니메이션 지속 시간 3) animation-delay(지연 시간): 애니메이션 시작 전 지연 시간 4) animation-iteration-count(반복횟수): 반복 횟수를 지정, 소수점 가능..

1. transition: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 - 사용 방법: transition: 속성명 지속시간 타이밍 함수 대기 시간; 순 - transition: transition-property, transition-duration, transition-timing-function, transition-delay 2.transition-property: 전환 효과를 사용할 속성 이름 지정 - transition-property: all - 모든 속성에 적용 - transition-property: 속성이름 - 전환 효과를 사용할 속성 이름 명시 3.transition-duration: 전환 효과의 지속시간을 지정 - transition-duration: 0s - 전환 효과 없음..

1. transform: 요소의 변환 효과 지정 - 사용 방법: transform: 원근법 이동 크기 회전 기울임 순 2. 2D 변환 함수 * px로 지정 - transform: translate(x,y) - 이동(x축, y축) - transform: translateX(x) - 이동(x축) - transform: translateY(y) - 이동(y축) * 없음(배수) - transform: scale(x,y) - 크기(x축, y축) - (transform: scale(x) - 크기(x축)) - (transform: scale(y) - 크기(y축)) * deg - transform: rotate(degree) - 회전(각도) - (transform: skew(x,y) - 기울임(x축, y축)) - tr..

1. display:flex:수평 정렬하게 한다. 2. flex-direction: 주축을 설정한다. - flex-direction:row - 행축(좌 > 우)로 정렬시킨다. - flex-direction:row-reverse - 행축(우 > 좌)로 정렬시킨다. / 순서가 반전됨 - flex-direction:column - 열축(위 > 아래)로 정렬시킨다. - flex-direction:column-reverse - 열축(아래 > 위)로 정렬시킨다. / 순서가 반전됨 3. flex-wrap: flex items 묶음(줄 바꿈) 여부 - flex-wrap:nowrap - 묶음(줄 바꿈) 없음. - flex-wrap:wrap - 줄바꿈 있음, 여러 줄로 묶음 - (flex-wrap:wrap-reverse ..

단계 번호 제목 코드 1 2557 Hello World print('Hello World!') Hello World!를 화면에 출력하는 문제 (예제 출력과 똑같이 출력해야 합니다.) 2 1000 A+B a, b = map(int,input().split()) print(a+b) 두 수를 입력받고 합을 출력하는 문제 3 1001 A-B a, b = map(int,input().split()) print(a-b) 두 수를 입력받고 뺄셈을 한 결과를 출력하는 문제 4 10998 A×B a, b = map(int,input().split()) print(a*b) 곱셈 문제 5 1008 A/B a, b = map(int,input().split()) print(a/b) 나눗셈 문제. 이 문제에는 "스페셜 저지" ..

선택자 및 테이블을 이용하여 달력 만들기 [내 실습 코드] 2023년 3월 , 달력 만들기1 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 [선생님이 올려주신 정답] 2023년 3월 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

1. CSS 작성법: 선택자 { 프로퍼티 : 값;}을 순서로 작성한다. p { color: red;} ● 선택자: - CSS는 HTML요소의 style을 정의해야 하므로 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다. - 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다. - 선택자로 HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의 가능하다. - 여러개의 프로퍼티를 연속해서 지정할 수 있으며 '세미콜론(;)'으로 구분 한다. p { color: red; padding: 5px;} ● 속성: - 속성(ex, color, padding)은 표준 스펙으로 이미 지정되어 있는 것을 사용하기때문에 사용자가 임의로 정의할 ..

#03_css_work.html 인라인 방식 내장 방식 링크 방식 import방식 내장방식 사용 #03_import.css span { background-color: orange; color: blue; } #03_link.css @import url(./03_import.css); p { background-color: red; color: white; } h3 { background-color: black; color: white; } 직접 css 참조 방식 import 방식을 포함한 4가지를 적용시켜보았다. 실제로 구현해보면서 참조의 우선순위를 확인할 수 있었다. css는 복잡한 코드를 더 간단하게 확인할 수 있게 해주는 것 같다.