글래스모피즘 css 글래스모피즘: 뒷 이미지는 투명하고 일부만 불투명하게 하는 기능 .클래스명 { display: inline-block; background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px; .. 프로젝트로 배운 공부/팀프로젝트 2024.07.19
자바스크립트로 캐러셀(슬라이드) 만들기 2 (scss) /* 노말라이즈 */* { margin: 0; padding: 0; list-style:none; box-sizing: 0; } /* 전체 슬라이드 */.slide-div {display: flex; flex-direction: column; align-items: center; justify-content: center; top: 50%; background-image: url(./background_image.jpg); background-size: cove.. 프로젝트로 배운 공부/팀프로젝트 2024.07.19
자바스크립트로 캐러셀(슬라이드) 만들기 1 (html, js) 1 / 5 첫번째 페이지에요. 2 / 5 두번째 페이지에요. 3 / 5 세번째 페이지에요. 4 / 5 네번째 페이지에요. 4 / 5 마지막 페이지에요. ❮ '모양 버튼 --> & #10095; 카테고리 없음 2024.07.19
가운데 정렬이 안될 때, 부모에 text align: center 주는 것 내가 알고있는 태그를 가운데 정렬하는 방법첫번째는, margin: 0 auto;두번째는,부모 를 하나 더 생성해서 text-align:center; 두번째 방법은 문제가 생기지 않을까?싶었지만 지금까지 문제 없었고,제일 쉬운 방법이어서 그냥 써왔다. 마침 튜터님께 질문 하다가 생각나서사용해도 문제가 되지 않냐고 여쭤보았다.내가 생각하는 그대로였다.코딩은 정답이 없어서 맞다, 틀리다, 해도 된다, 안 된다, 라고 해줄 수 없다고 하셨다. = 상관없음 하지만 부모 를 text-align:center;로 설정하면,텍스트 외 inline요소도 가운데 정렬이 되기 때문에 자식의 텍스트도 신경을 써줘야 한다고 하셨다. 질문 2024.07.18
SCSS 기초 @mixin해당 스타일 시트 내부에서 얼마든지 재사용이 가능내부에서 '&'나 또 다른 셀렉터를 포함할 수 있음 @include@mixin을 사용하기 위해 선언하는 구문셀렉터 지정 후, 내부에 @include로 @mixin을 불러오면 됨@include뒤 '( )'는 생략 가능 @mixins재사용이 가능한 스타일을 정의하는데 사용@mixin과 @include를 합쳐서 부름재사용이 가능한 스타일을 정의하는데 사용 /* html */ /* scss */@mixin test { color: red; margin: 0; } div { @ include test;} 믹스인 응용하기 (IE 지원 X)line-clamp: 몇 줄 뒤에 컨텐츠를 자를지box-or.. SCSS(sass) 2024.07.17
Git 협업 프로세스 간단 세션 git휴대폰 갤러리 github클라우드, n드라이브, 구글 드라이브, iCloud repository폴더 push업로드 git add:'트레킹 할거야.'※ 대부분 git add 파일명 이렇게 안쓰고, git add . 라고 씀 commit: '저장할거야.' VSC에서 내 github를 등록하는 방법git remote and origin https://github.com ~ 을 터미널에 복붙(origin을 변수라고 생각/ origin에 https://라는 걸 담는다고 생각) git remote -v: 어떤 값에 어떤 값이 들어있는지볼 수 있는 명령어 git이랑 친해지기,, 2024.07.16
git&github * VSC → Terminal → New Terminalpwd(print wording directory): 현재 작업폴더를 보여달라는 명령어 Home:데스크탑보다 상위 폴더바탕화면보다 Home이 상위폴더 ls(list): 폴더 안에 있는 폴더랑 파일 내역을 보여달라 ls -a (list all): 숨겨진 파일(보통.로 시작)을 모두 볼 수 있는 명령어 cd 폴더명 (change directory):데스크탑 안에 있는 다른 폴더로 이동 가능* 폴더명/폴더명으로 입력해서 더 상위폴더로 이동할 수 있음 mkdir 폴더명 (make directory): 현재 경로에서 폴더를 생성하는 명령어 touch 파일명:현재 경로에서 파일을 생성하는 명령어 * 정확히는 파일의 생성과 파일의 날짜, 시간을 변경하는 명령.. git이랑 친해지기,, 2024.07.15
리액트 (출처: 코딩애플) 오늘 공부한 범위:[ ] ‘React 배우기 전에 쓰는 이유부터 알아야’[ ] 자바스크립트 변수, 함수, if, for, array, object 복습[ ] ‘리액트 React 설치와 개발환경 셋팅’ -리액트 파일 만드는 방법shift키 + 마우스 우클릭→ 열린 터미널 창에npx create-react- app 프로젝트명 입력 미리보기: Terminal→ new Terminal→ npm start 입력 src폴더: 코드짜는 페이지node_modules: 라이브러리 코드 보관함public: static 파일 모아놓는곳app.js: 메인 페이지package.json: 프로젝트 정보 유튜브 2024.07.11
자바스크립트 (출처: 코딩애플) ‘변수, 사칙연산 실력향상 과제’‘변수문법과 Dark mode 버튼만들기'‘변수 심화학습시간 & 저번시간 숙제’ 변수길고 복잡한 자료들을 저장 가능특정 값을 저장 가능선언 → 할당 변수의 선언(= 변수를 만들어 쓰겠습니다)var dog; 변수의 할당var dog = 'maltese'; var 변수명 = 자료;var name = 'eundong'; var gender = 'female'; var age = 5; var 변수 = document.getElementById();ex) var color = document.getElementById('#title); var legs = document.getElementByClassName('.how_many'); var letco.. 유튜브 2024.07.11
개발 용어 정리 (10 ~ 19번) 10. API (Application Programming Interface)소프트웨어 시스템들이 서로 통신하고데이터를 주고받을 수 있도록 도와주는 규칙이나 도구기상청 소프트웨어 시스템에는 일일 기상 데이터가 있다.휴대폰의 날씨 앱은 API를 통해 이 시스템과 ‘대화’하여최신 날씨 정보를 표시한다.11. 예외처리프로그램에서 발생하는 예외적인 상황을 처리하여프로그램이 계속 실행될 수 있도록 하는 기법12. 라이브러리 (Library)자주 사용하는 기능들을 모아놓은 집합13. 프레임워크 (Framework)기능을 빠르고 쉽게 구현할 수 있도록 환경을 제공해 주는 것14. 컴파일(Compile)사람이 입력한 코드를 컴퓨터가 이해할 수 있는 코드로 한 번에 번역하는 작업 방식우리가 C, C++, Java로 작성.. 내일배움캠프/React 사전캠프 2024.07.03