영최의 개발켈로그

1. 반응형 vs 적응형 - 반응형이란? 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되는 웹페이지이다. - 적응형이란? pc용 사이트와 모바일용 사이트를 별도로 제공하는 방식을 말한다. 2. 반응형 웹을 위한 CSS의 Media query - Media query란? 반응형 레이아웃을 구성하게 해주는 CSS문법이다. - 사용 방법 @media and (미디어 조건) {} (1) 미디어 유형 : all(모든 미디어 장치), screen(화면을 출력하는 디스플레이가 있는 기기), print(인쇄 화면) (2) 미디어 조건 : A.width : 뷰포트 너비 - min-width/ max-width B.height: 뷰포트 높이 - min-height/ max-height C.orientation: 가..

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)은 표준 스펙으로 이미 지정되어 있는 것을 사용하기때문에 사용자가 임의로 정의할 ..