프론트엔드공부(40)
-
css 애니메이션(1)
CSS 애니메이션 첫 걸음 -transition ● transiton: 어떤 속성이 변할 때 얼마만큼의 시간을 사용할지 설정가능 ● ease-in: 천천히 가다가 빠르게 감 ● ease-ont: 빠르게 가다가 천천히 감 ● ease-in-out: 천천히 가다가 빠르게 가다가 천천히 감 HTML에서 Javascript 사용하기 ● 로 영역 만들어주기 ● console.log(); 로 콘솔 창에 출력하기 JavaScript로 선택하는 HTML 태그 ● js는 태초부터 웹 ui를 제어하기 위한 언어였음 ● js로 제어하고 싶은 html 태그를 선택 ● 어떤 이벤트가 발생했을 때 제어할 것인지 선택 ● css 변경 ● . 을 ~으, ~에 로 해석 ● var, let, const 로 변수 만들기 addEventL..
2023.03.13 -
SASS
CSS도 계층적으로! SASS ● SASS(SCSS): CSS의 확장언어 ○ CSS보다 조금 더 높은 자유도를 개발자들에게 부여함 ○ 자유도가 높다는건 지켜야할 문법들이 많다는 것이므로 주의해야함 ○ 변수, 반복문, 가정문도 사용할 수 있음 ● 브라우저가 읽을 수 있는 언어: HTML, CSS , JS ○ SASS를 CSS로 컴파일 할 수 있어야함 ○ VSCode에서 live sass compiler 확장자 설치 ○ 파일 > 기본 설정 > 설정> 설정 열기 > "liveSassCompile.settings.generateMap": false 입력해서 map파일 안생기게 하기 SASS에서 다루는 CSS-nesting구조 ● html의 계층적인 구조에 맞게 코딩 SASS에서 다루는 CSS-기초문법 ●한 줄 ..
2023.03.12 -
에어비앤비 클론코딩
코로나19 대응 방안에 대한 최신 정보를 확인하세요 숙소 체험 온라인체험 호스트 되기 위치 어디로 여행가세요? 체크인 날짜 입력 체크아웃 날짜 입력 인원 게스트 추가 10만 명에 달하는 우크라이나 피란민에게 임시 숙소를 제공해주세요 자세히 알아보기 호기심을 자극하는 숙소로 떠나보세요 유연한 검색 설레는 다음 여행을 위한 아이디어 서울 1km 거리 대구 239km 거리 대전 141km 거리 수원시 32km 거리 .wrap { background-color: white; width: 80%; max-width: 1920px; margin: 0 auto; overflow: hidden; } @media screen and (max-width: 767px) { .wrap { width: 90%; } } .bla..
2023.03.12 -
컴퓨터 구조(Computer Science)(2)
플립플롭과 메모리 동작이해 ● NOR 게이트 2개를 조합해서 만들어 볼 수 있음 ● flip-flop(플리플롭): 데이터를 저장하는 조합논리 회로 ○ 첫 번째 스위치를 키면 불이 켜지고, 스위치를 꺼도 불은 켜진채로 지속됨 ○ 두 번째 스위치를 끄면 불이 꺼지고, 스위치를 꺼도 불은 꺼진채로 지속됨 ● 스위치를 키고 끄고를 저장할 수 있음 ○ 불이 켜져 있다: 최근에 첫 번쨰 스위치가 켜졌었다. ○ 불이 꺼져 있다: 최근에 두 번째 스위치가 켜졌었다. ※ 전기를 전에 켰다 라는 사실을 기억할 수 있게 되었음 ● RS플립플롭 ○ Q는 output, Q'는 Q의 반대값 ○ 단, S와 R이 1인 상태는 피하도록 설계 (Q와 Q'가 둘 다 0이 되므로) ● Level -triggered flip-flop ○ R..
2023.03.11 -
Git 설치
Git 설치(window) ① Git SCM 접속해 설치파일 다운로드 (https://git-scm.com/) ② 설치파일 클릭해 설치 ③ 시작프로그램에서 Git Bash 실행 ④ Config 설정 ⑤ 설치완료 Git 설치(Mac) ● 사전준비. Homebrew설치 (https://brew.sh/index_ko) ○ Homebrew는 Mac환경에서 제공하지 않는 유용한 패키지를 설치할 수 있도록 도와주는 패키지 관리자 ① 터미널 실행 ② brew install git 입력 ③ git - version 입력해 확인 ④ Config 설정 ⑤ 설치 완료
2023.03.09 -
Git 시작하기
Git이란 ● 형상관리도구 중 하나 ○ 형상관리도구는 다른말로 버전관리 시스템이라고도 함 ○ Git은 프로젝트 소스코드를 효과적으로 관리할 수 있는 시스템임 ● 효과적 관리란? ○ 여러 명이 동시에 작업하더라도 문제 없도록 함 ○ 소프트웨어의 여러 버전을 동시에 관리 할 수 있음 ○ 프로젝트 진행의 모든 로그를 볼 수 있으며 해당 시점으로 되돌리는 것도 가능함 Git을 사용하는 이유 ● 프로젝트 시 어떤 기능을 빼고 더하고 고치고 수정하는 과정은 필수 ● 기능을 되돌리게 될 수도 있고, 서로 다른 기능의 버전을 유지해야 하는 경우도 있음 ● 코드 관리 측면 ○ 변경된 이력 확인 ○ 이전 이력으로 되돌리기 ○ 다른 기능의 버전 코드 유지 ○ 현재 최종이 어느 시점인지 표현할 수 있음 ● 협업의 측면 ○ 각..
2023.03.09