본문 바로가기

Widely Design 바로가기

💚 UIUX 웹퍼블리셔 과정(6개월)175

2021-06-18 (67일차) 반응형 모바일메뉴 만들기 연습 자바스크립트 67강~69강 - BEM의 기본구조 - 반응형 모바일메뉴 만들기 2021. 6. 19.

2021-06-17 (66일차) 반응형 웹사이트 만들기 (다음 주 시험 대비) 자바스크립트 64강~66강 top-bar 평소 >>> display : none → md가 되면 → display : block mobile-top-bar 평소 >>> display : block → md가 되면 → display : none ※ md : 992px이하가 되면~ - 그라디언트배경 주는 방법 (gradient background) 2021. 6. 17.

2021-06-16 (65일차) 제이쿼리(jquery)의 본질, 자바스크립트와 제이쿼리 문법차이, 제이쿼리 장점, next, prev, mouseenter, this, dblclick parent, children, find, siblings 자바스크립트 54강~63강 - 기존에 사용하던 javascript의 문법 문제점 : css에서 일괄로 디자인을 처리하던 디자이너들이 이에 대해 불편함을 느낌 ↓ 해결방법 : 제이쿼리를 불러옴 ↓ .prev( ) : 인접 형을 가리킴 .next( ) : 인접 동생을 가리킴 .parent( ) : 부모를 가리킴 .children( ) : 자식을 가리킴 .find( ) : 후손을 가리킴 .siblings( ) : 형제을 가리킴 .mouseenter : 마우스가 닿으면 반응함 .dblclick : 더블클릭시 반응함 - 클릭하면 배경색 변경, 한 번 더 클릭시 배경색 제거 : if, else, hasClass 사용 - 클릭하면 클릭 구간의 좌우 배경색 변경 : next, pr.. 2021. 6. 17.

2021-06-15 (64일차) 그레이브 문법, 아코디언 만들기, this, 변수명$포함, 자바스크립트 51강~53강 - 그레이브 문법 $` { } ` 사용하기 - 클릭하면 안의 내용이 나오는 방식 1) 해당영역 클릭시 배경색이 바뀌는 구조 만들기 - 보다 더 짧고 간단한 방법 - this를 사용한 6가지 방법 ● $이 포함된 변수명을 보고 어떠한 함수인지 대략 추측할 수 있어야 한다. (실무자들의 관례) ● 한 번만 사용될 변수라면 굳이 만들 필요 없다. ● this를 쓰고 싶다면 첫 번째 줄에 let $this = $(this);를 넣어주고 시작하는 편이 좋다. ※ this라는 특수한 식별자는 자바스크립트뿐만 아니라 다른 언어에서도 많이 등장하는 개념 함수 호출 방식 this 바인딩 일반 함수 호출 전역 객체 메서드 호출 메서드를 호출한 객체 생성자 함수 호출 생성자 함수가 생성할 인스턴스.. 2021. 6. 16.

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.

이전 1 ··· 7 8 9 10 11 12 13 ··· 15 다음

티스토리툴바