본문 바로가기

전체 글228

2021-06-15 (64일차) 그레이브 문법, 아코디언 만들기, this, 변수명$포함, 자바스크립트 51강~53강 - 그레이브 문법 $` { } ` 사용하기 - 클릭하면 안의 내용이 나오는 방식 1) 해당영역 클릭시 배경색이 바뀌는 구조 만들기 - 보다 더 짧고 간단한 방법 - this를 사용한 6가지 방법 ● $이 포함된 변수명을 보고 어떠한 함수인지 대략 추측할 수 있어야 한다. (실무자들의 관례) ● 한 번만 사용될 변수라면 굳이 만들 필요 없다. ● this를 쓰고 싶다면 첫 번째 줄에 let $this = $(this);를 넣어주고 시작하는 편이 좋다. ※ this라는 특수한 식별자는 자바스크립트뿐만 아니라 다른 언어에서도 많이 등장하는 개념 함수 호출 방식 this 바인딩 일반 함수 호출 전역 객체 메서드 호출 메서드를 호출한 객체 생성자 함수 호출 생성자 함수가 생성할 인스턴스.. 2021. 6. 16.
01Typography Typography 1 화면크기의 사각형을 만들고 검은색을 채워준다. 매쉬툴을 이용하여 색상을 곳곳에 넣어준다. 2 'NEON'글씨를 쓴 후, 색상을 밝은 회색으로 대략 정해준다. effect > 3d > extrude&bevel 효과를 준다. 1에서 만든 메쉬배경 위에 올려놓고 텍스트에 블랜딩모드 color dodge효과 주기 3 텍스트를 하나 복사해서 그대로 모양확장(expand appearance)시켜주기 그룹을 3번 풀어준다. 가장 앞면만 남겨준 후, 그룹화 해주기 글씨 만들어진 거 화면 확대해서 앞에 맞춰주기 transparency > 블랜딩모드-color dodge color > grayscale로 빛의 세기 조절 작업 편리를 위해, 모두 레이어 잠금 시켜주기 4 원형 만들기 원형 그라디언트 .. 2021. 6. 15.
켄타우로스 - 6일차 켄타우로스 1 배경사진을 하나 더 복제하기 복제한 레이어에게 filter > blur > lens blur faster > shape-triangle , radius-21, 나머지 기본값 레이어마스크를 씌우고 말이 위치하게 될 장소만 검정색으로 칠해서 숨겨주기 channel mixer > output channel-red, red-110%, green-5%, blue-40%, constant-30% levels > 0, 1.00 , 220 2 라인 딴 성 사진을 최상단으로 가져와 알맞게 배치하기 클리핑마스크 color balance > midtones, red+50, magenta-20 클리핑마스크 levels > output levels 0, 150 ㄴ 레이어마스크로 빛 받는 외각 부분 지워주기 레이어.. 2021. 6. 15.
스텝업 네온사인 - 5일차 스텝업 네온사인 1 콘크리트 배경 복제 복제한 레이어에 블랜딩모드 multiply adjustment layer > solid color - 검정색 넣어주기 보정레이어에서 검정색 부드러운 브러쉬로 가운데 지워주기 보정레이어 자연스럽게 하기 위해 opacity를 낮춰줌 2 'DANCER' > layer style값 주기 ㄴ color overlay > reset후 > 색상-#ffdd23 drop shadow > reset후 > 블랜딩모드-multiply, color-black, opacity-100%, angle-90˚, distance-5, spread-30, size-4, contour-leaner bevel&emboss > reset후 > style-pillow emboss, technique-smo.. 2021. 6. 15.
2021-06-14 (63일차) 팝업을 추가될 때, CSS 추가를 안하도록 구조 변경, 팝업 헤더의 높이를 CSS에 직접 적지 않는 구조 변경 자바스크립트 48강~50강 - 팝업을 늘릴 때 마다, CSS 추가를 안하도록 구조 변경하기 : 기존의 방식은 팝업 개수에 맞춰 html의 스크롤바를 없애주는 css를 추가해줘야 했다. ㄴ 문제점 : 팝업이 추가되면 css도 점점 늘어났다. ↓ ↓ ↓ ↓ ↓ ㄴ 나딴애가 생각해낸 해결방안 : css를 하나로 합쳐서 쓰고 자바스크립트에서 실행했다. ㄴ 이에 따라온 문제점 : 화면을 키자 마자 두 개의 팝업창 모두 실행이 잘 되지만, 팝업 하나에만 적용이 된다. (처음 팝업의 html은 스크롤바가 없이 정상작동 됬지만, 두번째 팝업에서 스크롤바가 다시 활성화되는 문제점) ↓ ↓ ↓ ↓ ↓ 해결방안 ↓ ↓ ↓ ↓ ↓ ㄴ Good! ※ overflow-y : auto는 특정한 높이가 정해져있어야 한다. 특정한 높.. 2021. 6. 15.
2021-06-13 (62일차) 웹사이트 모작, 복습 - 'LG Energy Solution'웹사이트 모작 진행 ㄴ 메뉴 전체 내려오기 해결 (숙달은 아직,,) - 프론티엔드와 백엔드 차이점 영상 시청 - 스와이퍼 슬라이드 영상 보고 복습하기 2021. 6. 14.
2021-06-12 (61일차) absolte, fixed, 2차메뉴 전체 내려오기, 아이템 아래 이미지 넣기 - '네이버 웨일 상단바 레이아웃 모작'영상 보고 2차메뉴 전체 내려오는 거 연습하기 ㄴ 메뉴 뒤에 배경이 내려올 태그를 하나 더 만드는 방법이였음 (absolute) ㄴ height : 0 > height : 100px 로 변경되게 하고 transition 넣어주면 애니메이션 효과 완성 - 'fendi 상단바 레이아웃 모작'영상 시청 ㄴ 이미지 로고 사이즈 조절방법 ㄴ 2차메뉴 아이템 아래 이미지 넣는 방법 .. 어려워서 나중에 다시 보고 따라하기로.. - '농협60주년 상단바 레이아웃 모작'영상 시청 ㄴ 2차메뉴 전체 내려오는 거 (웨일과는 다른 방법이던데) - absolute와 fixed 공통점 : 너비가 최소한으로 줄어들기 때문에 width:100%를 줘야함 차이점 : absolute는 위치 고정.. 2021. 6. 12.
2021-06-11 (60일차) 슬라이드 2개 만들기, 테일윈드, 슬라이드 화면에 꽉 차게 하는 방법, 슬라이더 한 화면에 여러개 스와이퍼 3강~5강 - 슬라이드 2개 만드는 방법 : 복사 붙이기 한 후, 클래스 이름 알맞게 바꿔주기 : 자바스크립트도 똑같이 해주면 됨 ㄴ 깔끔하게 하기 위해 function으로 묶어서 정리해줌 - 테일윈드 사용방법 - html에 소스코드 가져와서 적을 때 순서 1) jquary 2) tailwind 3) swiper - 슬라이드를 화면에 꽉 차게 하는 방법 : 자식이 부모 높이를 따라가게 만든 후, 부모에게 최소높이를 100vh를 준다.(내용이 늘어나면 저절로 크기가 커질 수 있게) 부모 ㄴ min-height : 100vh; + height : 0; 자식 ㄴ height : 100%; ※ 부모에게 height : 0;을 주는 이유는 아무리 봐도 모르겠음 그냥 외우기,,~! - 첫 슬라이더는 한 화.. 2021. 6. 12.
2021-06-10 (59일차) 객체+함수+변수, 스와이퍼 사용방법 자바스크립트 45강~47강 스와이퍼 1강~2강 - 함수의 2대 제어 1) 조건문 2) 반복문 - 함수의 2대 구성요소 1) 변수 2) 값 - 함수 (기능 : 유일한 실행가능) - 숫자 - 문장 - true/false - 객체 (기능 : 묶음) (≒folder) - 변수에는 오직 하나의 값만 들어갈 수 있음 결과 : 가장 아래에 온 23이라는 값만 출력됨 - 객체 사용하여 출력 a사람1 : 폴더 .이름 : 파일 홍길동 : 내용 - 객체 쓰는 방식 세가지 유형 (결과는 위와 같음) - 객체에 함수 적용하기 - 방법 1 - 방법 2 - 방법 3 - 객체 + 함수 + 변수 사용하기 변수를 사용하여 이름을 바꿔주고 다른 값을 도출해낼 수 있음 사실 아직 잘 이해 안 감 스와이퍼 - 대표적인 라이브러리 : 스와이퍼.. 2021. 6. 11.
2021-06-09 (58일차) 팝업창 처음부터 열려있게 하는 방법, popup__show, popup__hide 44강 - 팝업이 처음부터 사이트에 띄워져있게 하는 방법 $('.popup').addClass('active'} - 가장 좋은 방법 popup__show, popup__hide 함수 사용 ㄴ 처음부터 팝업창 2개가 뜨고, 버튼을 눌러도 팝업창이 뜬다. - 노트폴리오 회의 2021. 6. 10.
2021-06-08 (57일차) 스크롤바 끄는 방법, 버튼 클릭시 스크롤바 꺼지게 하기 42강~43강 - 스크롤바 끄고 켜는 방법 (addClass, removeClass 사용) overflow : hidden이 들어간 클래스를 만들고, 자바스크립트에서 적용 ↓ 응용 ↓ - 팝업창 버튼을 클릭하면 html의 스크롤바는 나타나지 않게 하기 평상시 : max-height(calc(100% - 팝업헤드높이); overflow-y : auto; 버튼 클릭시 : overflow-y : hidden; 사용 (하는이유 : 팝업창이 내용이 많다고 가정하에, 화면의 크기가 줄어들면 스크롤바가 생기는데 html의 스크롤바, popup 의 스크롤바가 두 개 생기기 때문에 하나를 없애주는 것이다.) 2021. 6. 8.
2021-06-07 (56일차) event, preventDefault, return false, alert, confirm, input, stopPropagation, 배경클릭시 팝업닫힘 34강~41강 #문제. 팝업2 구현, 팝업 2개, 함수 1개로, 단계적 구현 (저번시간에 배운 거 복습) 1단계 : 정답에서 HTML 복사(제이쿼리 불러오기) 2단계 : 정답에서 CSS 복사 3단계 : console.clear(); 4단계 : Popup__init 함수 만들고 실행 5단계 : .btn-popup-1 클릭 이벤트 6단계 : .btn-popup-1 클릭시 팝업1 뜸 7단계 : .popup-1 .popup__btn-close 의 닫기 버튼 클릭시 팝업1 닫기 8단계 : 팝업 열기 no 변수 적용 9단계 : 팝업 닫기 no 변수 적용 10단계 : no를 매개변수 화 11단계 : popup-3 구현 - event : 자바스크립트에서 마우스 클릭, 마우스 이동, 키보드 입력 모두 사건으로 본다. -.. 2021. 6. 8.

티스토리툴바