영최의 개발켈로그

1. JavaScript란? 객체 기반의 스크립트 프로그래밍 언어이다. 웹페이지에 생동감을 부여한다. 2. JavaScript 참조 방식? - 내장 방식과 링크 방식이 존재한다. - 내장 방식: 위치는 어디서나 사용이 가능하다. - 링크 방식: 위치는 어디서나 사용이 가능하다. - 장단점 내장 방식 링크 방식 장점 - 간단함, - 특정 페이지에서만 작동할 경우 내장방식으로만 구현이 가능함 - 코드 양이 많아질때 파일로 관리하는 것이 편리함 - 재사용 가능 - 유지 보수의 용이성 단점 - 재사용 불가 - 복잡한 코드일 때 사용하지 않음 3. JavaScript 표기법 - 띄어쓰기를 '-' 로 표기하는 dash-case방법이나, '_'로 표현하는 snake_case 방법은 JavaScript에서 사용되지 않..

1. 먼저 깃을 설치한다. A. 윈도우: https://git-scm.com/ a. 위 페이지에서 비트에 맞게 설치 b. git --version 쳐서 잘 깔렸는지 확인 B. mac: macOS 용 패키지 관리자 — Homebrew a. 위에 있는 걸 복사해서 커맨드 창에 복붙한다. b. brew install git 친다. c. 근데 M1은 오류가 날 수 있다. 그러면 eval 치고 다음 brew install git 쳐준다. d. git --version 쳐서 잘 깔렸는지 확인 2. 깃을 세팅한다. #1.공통 git config --global init.defaultBranch main #2 #윈도우만 git config --global core.autocrlf true #맥만 git config -..

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 ..

선택자 및 테이블을 이용하여 달력 만들기 [내 실습 코드] 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)은 표준 스펙으로 이미 지정되어 있는 것을 사용하기때문에 사용자가 임의로 정의할 ..