전체 글 139

글래스모피즘 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;                        ..

자바스크립트로 캐러셀(슬라이드) 만들기 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..

자바스크립트로 캐러셀(슬라이드) 만들기 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&github

* VSC → Terminal → New Terminalpwd(print wording directory): 현재 작업폴더를 보여달라는 명령어   Home:데스크탑보다 상위 폴더바탕화면보다 Home이 상위폴더 ls(list): 폴더 안에 있는 폴더랑 파일 내역을 보여달라 ls -a (list all): 숨겨진 파일(보통.로 시작)을 모두 볼 수 있는 명령어 cd 폴더명 (change directory):데스크탑 안에 있는 다른 폴더로 이동 가능* 폴더명/폴더명으로 입력해서 더 상위폴더로 이동할 수 있음 mkdir 폴더명 (make directory): 현재 경로에서 폴더를 생성하는 명령어 touch 파일명:현재 경로에서 파일을 생성하는 명령어 * 정확히는 파일의 생성과 파일의 날짜, 시간을 변경하는 명령..

리액트 (출처: 코딩애플)

오늘 공부한 범위:[ ] ‘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로 작성..