본문 바로가기

Widely Design 바로가기

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

2021-06-06 (55일차) 포스터 발표준비 - 포스터 시안 2개 작업 완료 - 포스터 발표준비 2021. 6. 7.

2021-06-05 (54일차) 복습 - function 복습 - 매개변수 복습 - 매개변수 이용하여 팝업창 띄우고 닫기 연습 - 포스터 시안 2개 작업 2021. 6. 7.

2021-06-04 (53일차) 반응형 팝업창, visibility, 서서히 나타나는 효과, 위에서 아래로 내려오는 효과, 애니메이션 효과, 팝업창 2개 이상, 매개변수 사용하여 자바스크립트 내용 줄이기 26강~33강 - 반응형 팝업창 만들기 - visibility hidden, visible 총 두 가지 값이 있음 visibility:hidden과 opapcity:0의 차이점 : 보이지 않고, 클릭도 되지 않음 - 반응형 팝업창 애니메이션 1 팝업창이 서서히 모습이 나타나는 애니메이션 효과( 불투명 → 투명 ) ※ opacity와 visibility를 같이 줘야함 ※ display:none이 포함되어 있으면 애니메이션 효과 작동하지 않음 - 반응형 팝업창 애니메이션 1 팝업창이 위에서 아래로 내려오면서 서서히 나타나는 애니메이션 효과 transform : translate();를 사용 - 함수 매개변수 함수를 두 개 이상 쓸 때 사용 - 팝업창 두 개 띄우기 html - 위에서 만든 팝업창과 버튼을 각.. 2021. 6. 5.

2021-06-03 (52일차) 자바스크립트 - mouseenter, mouseleave, addClass, removeClass, hasClass, 색상변경버튼, 좌측에서 이미지 들어오는 애니메이션 21강~25강 - alert('내용'); 실행되는지 확인할 때 자주 이용됨 - .mouseover과 .mouseout은 사용 비추천 - .mouseenter 마우스가 닿으면 실행 - .mouseleave 마우스가 닿았다가 떨어지는 순간 실행 - .addClass, .removeClass 클래스 추가, 클래스 제거 사용하는 이유 : 기존까지 배워왔던 방식은 자바스크립트에서 모두 다 해냈지만(css값을 주는 등…) 기존의 방식은 자바스크립트 코드가 길어지기 때문에 실무에서 잘 사용하지 않음 → css에서 class를 이용해 먼저 값을 준 후, 자바스크립트에서 실행시킴 - 실행값에 함수를 합쳐 쓰는 방법 기존에는 함수를 지정하고 실행값에 함수를 넣어줬었다 하지만 함수 지정하지 않고 합쳐 쓸 수 있음 함수 이름.. 2021. 6. 5.

2021-06-02 (51일차) 팝업창복습, 웹사이트 리디자인 노트폴리오 업로드 팀회의 - 자바스크립트를 이용하여 팝업창 만들고 닫기 복습 - 팀 회의 대전라마다호텔 웹사이트 리디자인 노트폴리오 업로드에 관련 회의 수정사항 : 우리의 로고 제작하여 넣기 (리디자인으로 올리는 것보단 직접 디자인하여 올리는 게 더 좋기 때문) 계획 : 총 7페이지 ( 메인페이지 1페이지, 상세페이지 6페이지) 메인페이지 - 제작자, 작업기간, 사용프로그램, 타겟층, 목표, 포인트요소, 보완점 상세페이지 - 한 페이지당 디자인한 웹사이트의 일부분을 배치하고 설명 2021. 6. 2.

2021-06-01 (50일차) 버튼 클릭시 배경색 변경, 팝업창 생성, 팝업창 닫기, 모든 태그에게 일괄하여 값 주기 15강~20강 JAVASCRIPT - 버튼 클릭시 배경색 변경되는 효과 (방법1) 1단계 : console.clear(); 2단계 : 제이쿼리 불러오기 3단계 : 버튼 => changeBodyBackground() => console 실행됨 메세지 4단계 : changeBodyBackground() => 배경색 red 5단계 : no 변수 생성, 초기값 0, changeBodyBackground() => no 값 출력 6단계 : changeBodyBackground() => no 값 증가 7단계 : changeBodyBackground() => 배경색 변경 - 버튼 클릭시 배경색 변경되는 효과 (방법2) 1단계 : console.clear(); 2단계 : 제이쿼리 불러오기 3단계 : 버튼 => chang.. 2021. 6. 2.

2021-05-31 (49일차) html의 button, 자바스크립트 기호, if문, else if문, onclick, function, 버튼 누를 때마다 색 변경 10강~15강 1) 변수 2) 데이터 - 실행 가ㅇ능 : 함수 - 실행 불가능 : 숫자, 문장, 참or거짓, 객체 1) 조건문 2) 반복문 ※ True = 조건이 맞는다 ※ False = 조건이 맞지 않는다 ※ (조건)이 Truse라면 {실행값}을 실행한다. - if (조건) {실행값} if (조건)이 True라면 { }이 실행된다. if (조건)이 False라면 { }이 실행되지 않는다. - else if (조건) {실행값} 위의 if문이 False라면, 그 다음으로 바로 실행되는 if문이다. if문과 똑같이 true라면 실행되고, false라면 실행되지 않고 그 다음 else if문으로 간다. - else {실행값} 위의 if문과 else if문 모두 False라면, 마지막으로 실행되는.. 2021. 6. 1.

2021-05-30 (48일차) 복습, 기록 - 영상리뷰 자바스크립트의 역사와 현재 그리고 미래 영상 티스토리 리뷰 - 크몽 피그마 과제 마무리하기 - 포토웍스 3일차 정리 - 포토웍스 4일차 정리 2021. 5. 30.

2021-05-29 (47일차) 변수, 값, 변수이름, jquery제이쿼리, let, $().css(); 자바스크립트 5강~9강 JAVASCRIPT - 변수 : 값 저장소, 공간 ※ 변수에는 값이 무조건 1개 - 값 (데이터) : 문장, 숫자 - 변수 이미 존재하는 상태에서 하나를 더 만들기는 불가능 변수 이름은 영문 대소문자, 숫자, 언더바로 지정할 수 있음 한글도 넣을 수 있지만 자주 사용하지 않음 맨 앞에 숫자가 올 수 없음 띄어쓰기는 안됨 변수는 = 기호 좌측에서만 변수로 취급된다. - JQUERY 제이쿼리 기능 자바스크립트의 기본기능이 아닌, 편하게 이용하기 위한 추가 도구 codepen에서 실행하고 싶다면? ㄴ settings > JS > jquery 검색 후 클릭 > 링크 복사 > 붙여넣기 html에다가 : let divWidth = '100px'; let divHe.. 2021. 5. 30.

2021-05-28 (46일차) JAVASCRIPT 시작! - console.clear();, console.log("");, 문자와 숫자 출력 개념 자바스크립트 1강~4강 JAVASCRIPT - console.clear(); : 변수 선언, 생성, 초기화 console에는 출력할 내용이 나올 뿐만 아니라, 작업하는 과정까지 모두 나타내준다. 그래서 그 과정을 기록하지 않도록 하기 위해 처음에 적어주는 것이다. - console.log("출력할 내용"); console창에 내용을 띄우기 위해 사용한다. - 숫자 더하기 숫자 console.log(10 + 10); 결과 : 20 - 문장 더하기 문장 console.log("안" + "녕"); 결과 : 안녕 - 문장 더하기 숫자 console.log("안" + 10); 결과 : 안10 - 문장 더하기 숫자 더하기 숫자 console.log("안" + 10 + 20); 결과 : 안1020 - 문장 더하기 숫.. 2021. 5. 29.

2021-05-27 (45일차) flex-box, flex-shirink, flex-grow, min-height, 반응형 이미지, 배경이미지, 이미지 위에 글씨(텍스트), 미디어쿼리, @media, 반응형 상단바, position : fixed, overflow-x : auto 155강~160강 - 개구리 flex box 게임 - 디펜스 flex box 게임 - flex box playground 익히기 #문제. flex를 이용해서 성배 레이아웃 만들기 - flex-shirink flex-shirink : 0;을 넣어주면 화면이 아무리 작아져도 자신의 너비를 고정시키고 있음 기본값 : 1 - flex-grow flex-grow : 1; 을 주면 최대로 늘어난다 나란히 있는 태그들에 모두 flex-grow : 1;을 주면 일정한 비율로 나뉘어 늘어난다. 예외 ) 나란히 있는 태그들의 내용의 너비가 다르다면 (고유의 너비가 있는 상태) 남는 여백을 똑같이 나누어 갖는 것이기 때문에 일정한 비율로 나누어지지 않음 해결책 ) 태그들에게 width : 0;을 준 후 flex-grow :.. 2021. 5. 29.

2021-05-26 (44일차) CSS Diner 헷갈렸던 개념 정리하기 154강 - DSS Diner - A + B : 인접 형제 선택 ex) div + a => div를 직접 따르는 a (div동생의 a) - a ~ b : 앞의 태그를 따르는 모든 형제들 선택 ex) div ~ a => div의 뒤에 위치한 모든 a형제 ex) a ~ a => a의 뒤에 위치한 모든 a형제 - only-child : 유일한 하위 자식 선택 : 다른 요소의 내부에 있는 유일한 요소를 선택할 수 있음 span:only-child는 다른 요소의 유일한 자식인 span 요소를 선택합니다. ex) ul li:only-child => ul 안에 있는 유일한 li 선택 ex) section > p:only-child => section 안에 있는 유일한 태그 p 선택 ex) div:only-child .. 2021. 5. 28.

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

티스토리툴바