김하영

vscode 팝업구현 폴더 코딩과정 : 코드펜 열기 코드를 구현하기 전에 내가 원하는 모션을 구체화해서 생각하고 정리하는 습관들이기 1. 원하는 구조 생각해보기 body-text안에 있는 텍스트 중에서 원하는 텍스트를 눌렀을 때 팝업창이 뜨도록 만들기. => 원하는 단어를 하나 골라 span태그를 달아주고 class 이름은 popup-open으로 설정. 2. popup-open class 커스텀해주기 popup-open에 마우스를 올렸을 때 글자가 살짝 투명해지도록 opacity 설정. transition : 기본상태에서 hover상태로 변화할 때, 변화하는 과정을 부드럽게 하기 위해서 애니메이션의 속도를 조절한다 => 마우스를 올렸을 때 투명해지는 데까지 걸리는 시간 0.3s [자바스크립트 코딩 - 팝..

코딩 과정 -> 코드펜 열기 vscode - 팝업구현 폴더 [팝업 창 만들기] popup-section안에 popup-content를 만들어준다. 위치를 옮겨주는 방법은? display: flex를 적어서 중앙정렬 코드를 사용하는 방법도 있고, left, top, right같은 위치 속성을 적어줄 수도 있겠지만 더욱 간단한 방법은 margin속성을 사용하는 것이다. 왼쪽에서 600만큼 위에서 150만큼 떨어뜨리고 싶을 때, 이렇게 margin값을 주면 일반적인 태그이기 때문에 이동한다. 선속성을 적용해서 더 명확하게 보일 수 있도록 해준다. [팝업 창 안에 구조잡기] 팝업창 안, 위쪽에는 타이틀과 아래쪽에는 본문을 적고, X버튼을 누르면 닫히고, 특정한 레이아웃을 클릭하면 열리도록 만들어줄 것이다. 그러..

[PT-CODE 폴더 만들어서 vscode 연결하기] html, css, js, 제이쿼리까지 파일을 만들어준다. 너무 널부러져있으니까 js폴더를 만들어준다. vscode에서 하는것보다 파일탐색기에서 만드는것이 훨씬 편하다. script와 제이쿼리를 클릭, 드래그해서 js파일 안에 넣어준다. vscode를 보면 저렇게 나와서 당황할 수 있는데, 파일이 삭제된게 아니라 경로가 이동된거라서 폴더를 열어서 파일을 다시 꺼내와주면 된다. js폴더 안에있는 자바스크립트와 제이쿼리 연결은 똑같이 script:src로 해주는데, /앞에 js폴더가 그 뒤에는 파일이 붙는다. [확인절차] 잘 연결 됐는지 확인하는 절차가 반드시 필요하고 그만큼 중요하다!! $ ( " 선택자 " ) . 이벤트 ( " 속성 " , " 속성값 ..

html, css, js 파일 만들기. css링크 연결, js script 연결 검색창에 제이쿼리 검색 -> 다운로드 누르기 제일 위에있는 파일 누르기 우클릭-> 다른 이름으로 저장 -> popup파일 안에 저장 저장하면 vscode에 자동으로 파일이 나온다. 제이쿼리 파일도 script연결해준다. 미리보기 화면을 확인해보면 실행되지 않는다. 이유는? 브라우저에는 html, css, js 가 있는데 그 중에서 html, css가 가장 먼저 불려가야한다. html과 css가 나오지도 않았는데 js에 동작을 넣어봤자 구조가 없기 때문에 실행되지 않는것이다. html과 css보다 늦게 나오도록 늦춰주려면 원래 script태그를 html 가장 밑에 써준다. 위에 적었을 때 해결 방법은 자바스크립트 파일 오른쪽에..

코드펜 열기 제이쿼리를 써줄거기 때문에 가장 먼저 html에 제이쿼리 연결을 해줘야한다. 젠코딩을 위해 script[src=" "]를 써주고 코드펜 내에 있는 제이쿼리 링크 연결을 해준다. 버튼은 한개만 만들거니까 button선택자에 텍스트 on/off를 써준다. 그리고 그 버튼은 누르면 배경색이 추가&제거가 될 수 있도록 만들어줄 것이다. JS에는 꼭 console.clear입력해주기. css에 active가 걸리면 body에 배경색이 추가되고, active가 빠지면 배경색이 제거가 되는 조건을 걸어주기 위해 적어주고 배경색까지 추가해준다. 이렇게만 적어주면 버튼을 눌렀을 때 배경색이 바뀌는가? active가 들어올 때까지 배경색은 변하지않는다. js에 click이벤트를 적어준다. (클릭하면 activ..

[addClass를 사용해야하는 이유] 코드펜 이동 이렇게 쓰면 실행이 되긴 하지만 몇십줄이 되는 css를 모두 저렇게 쓰는건 불가능하다. 용량이 너무 커진다. 그래서 사용하는 것이 addClass이다. [addClass 사용] 저 식의 의미는 " button이라는 태그에 active라는 class가 붙으면 밑에 있는 식이 실행된다 " html에 active가 없어서 실행이 될 수 없지만 "button을 클릭하면 함수가 실행되고, 함수가 실행되면 button에 active를 추가한다" 라는 조건을 적어놨기 때문에 실행된다. 코드펜 내에서 링크 가져와 연결하는 방법 코드펜에서 setting을 눌러주고, JS탭에서 cdnjs 검색창에 jquery 검색후 눌러서 링크 복사해주면 된다. [click이벤트] 코드..

** JS상단에는 늘 console.clear를 입력해 오류창이 남지 않도록 해주기 [제이쿼리 링크 연결하기] 라이브러리이기 때문에 연결을해야한다. => cdnjs에서 링크 가져와 연결하기 cdnjs 바로가기 - script tag가 아닌 url 링크를 복사해준다. => script tag를 만들어서 직접 연결해줘야함. - 코드펜으로 돌아서 html에 젠코딩을 해줘야하는데 sript만 써도되지만 src를 따로 써줘야하기 때문에 빠르게 하기위해서 script [src=""] 을 입력해주고 아까 복사한 url링크를 붙여넣어 tap을 눌러준다. [DOM] 자바스크립트는 html에서 직접적으로 뭔가를 움직이게 하는게 아니라 그 사이에 DOM이라는 장치가 있다. 자바스크립트가 DOM을 움직이게해서 html이 움직..

[else] - 코드펜 열기 if가 false이기 때문에 if실행이 안되면서 else가 실행된다. if가 true이기 때문에 if실행이 된다. [함수] 함수 선언 후 호출전까지 실행되지 않는다. - 코드펜 열기 ** 함수에는 이름을 붙여줘야한다. (init) function -> 함수 선언을 해주고 이름까지 붙여줬는데, 아무것도 안나오는 이유는 함수를 호출해줘야하기 때문이다. 함수호출까지 해줬더니 완벽하게 나온다. -함수의 용도- 1. 반복되는 식 저장 후 원하는 곳에 호출. 2. 특정한 이벤트가 일어났을 때 호출시켜서 이벤트가 일어나면 코드가 실행되도록 함. [제이쿼리] 덕지덕지 붙어있는 코드들을 한 단어로 정리해준다. => $ -장점- 제이쿼리는 라이브러리 개념으로, 간결하고 간단하게 정리가 가능하다..

[연산자와 피연산자] - 코드펜 열기 연산자를 제외한 것들은 피연산자라고 부른다. [사칙연산자] 더하기(+) 빼기(-) 곱하기(*) 나누기(/) [나머지연산자] -> 몫이 아닌 나머지 0 -> 짝수 1 -> 홀수 [대입연산자] (=) ㄴ오른쪽에 있는 데이터를 왼쪽에 있는 피연산자에 대입할때 사용한다. ex) let no(피연산자) =(대입연산자) 1(데이터); [연결연산자] (+) ex) "1" + 1 [복합대입연산자] += -= *= %= [비교연산자] 데이터 == 데이터 (같다) 데이터 > 데이터 (왼쪽에 있는 값보다 오른쪽에 있는 값이 작다.) 데이터 >= 데이터 (왼쪽에 있는 값보다 오른쪽에 있는 값이 작거나 같다.) 데이터

[관련 사이트 이동] - 피그마예제 이동 - 3월 시트 이동 - 챗GPT 이동 모작기록 : 블로그 정리 24.03.12 - 첫번째 수업 [자바스크립트 기초 / console창 기초] : 블로그 정리 - 자바스크립트 기초 1. 자바스크립트에서 문자는 " "안에 작성한다. 2. 자바스크립트에서 숫자는 " "없이 작성한다. 3. 자바스크립트 라는 언어는 위에서부터 한줄씩 실행된다. - console 1. console.log( ); 의 역할 => 실행되는 모습을 console창에 출력해준다. 2. console창의 역할 => 코드가 실행되는 모습이나 데이터를 눈으로 확인할 수 있게 해준다. 3. console.clear( ); 의 역할 => console창을 깨끗하게 사용할 수 있도록 해주는 코드이다. [변수..