본문 바로가기

분류 전체보기228

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.
게슈탈트 이론으로 보는 와이어프레임 게슈탈트 이론으로 보는 와이어프레임 - 와이어프레임 골격, 간단한 모양을 사용해서 인터페이스를 시각화하는 것 - 기획자 - 디자이너 : 페이지, 기능, 콘텐츠 : 시각적 요소(레이아웃), 사용성 - gestalt 게슈탈트 이론 독일 심리학자 '막스 베르트하이머'가 기차여행을 하는 동안 영감을 얻어 주장한 이론 "우리의 뇌는 구성 요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다." 유사성의 원리 :색, 크기, 모양 등이 동일한 요소들을 하나의 관계로 묶어보려는 경향 근접성의 원리 : 서로 이웃해있는 요소들과 그렇지 않은 요소들을 구분하려는 경향 연속성의 원리 : 연속성을 띄는 배열을 관련성이 있다고 보는 경향 공통영역의 원리 : 박스 안에 있는 요소들을 같.. 2021. 5. 31.
웹디자인 그리드 시스템의 모든 것?! 웹디자인 그리드 시스템의 모든 것?! - pc&mobile 해상도의 차이 - 데스크탑 해상도는 정답이 없다 수많은 모니터와 수많은 스타일 사이트가 존재하기 때문 반응형 웹이기 때문 사용자 폭이 넓을 수록 작은 해상도에 맞추는 게 좋음 ex) 네이버 가로폭 : 1080px - breakpoint 테블릿, 모바일 등 사이즈에 따라 디자인 스타일이 크게 변해야 하는 구간 - 반응형 웹 디바이스 넓이에 따라 최적화된 디자인을 위해 특정 구간에 분기(breackpoint)를 설정해야 함 단을 너무 많이 쪼개면 반응형에 취약할 수 있음 - 그리드 시스템 기본 4요소 - 고정 - container 컨텐츠 폭 : 콘텐츠 영역의 가장 큰 폭의 기준 - columns 단의 수 - margin 마진값 - gutter 커터,.. 2021. 5. 31.
부트스트랩으로 웹 UI 컴포넌트 파악하기 부트스트랩으로 웹 UI 컴포넌트 파악하기 - Button - hover 마우스를 올렸을 때 - active 마우스를 눌렀을때 - disabled 비활성화상태를 표현 ex)투명도를 줘서 흐릿하게 하는 - form/input 이메일, 정보, 숫자 등 입력하는 칸 - checkbox □ - validation 폼 유효성 검사 (제대로 입력되지 않으면 알림) - dropdown 클릭했을 때 숨어져있는 하위메뉴 뜨게 하는 거 - navigation 링크를 모아놓는 곳 - 알약형(기본적) - 탭형 - 수직형 - navigation bar (=header) - breadcrumbles (헨젤과 그레텔의 빵 부스러기) 현위치를 알려주는 태그 현재 페이지는 클릭되지 않고 상위개념 페이지는 언제든지 이동 가능 - pagi.. 2021. 5. 31.
웹디자인 입문 강좌 - 2 이 용어 뭔지 아세요? - 웹디자인 입문 강좌 - UI (사용자 경험) 웹이나 앱, 제품을 사용하고 직감적으로 얻게되는 사용자의 경험 디자인의 의도와 다르게 사용자가 더 편한 방식으로 찾아서 사용 - UI (사용자 인터페이스) 상황에 맞는 화면 디자인 - responsive web 디바이스에 따라 최적화되게 사이즈가 저절로 맞게 화면을 보여주는 기술 - WSG (web style guide) bx(브랜드 경험)를 바탕으로 더 큰 개념으로 접근하는 것이 맞지만 하나의 사이트 내에 다양한 페이지, 일관성을 부여하기 위한 운영 및 관리지침 신속하고 효율적인 제작 가능, 매일 새롭게 디자인과 퍼블리싱을 하며 발생되는 손실 줄임 - affordance (행동 유도성) 심리학에서 출발한 개념으로 UI 디자인에 적용.. 2021. 5. 31.
웹디자인 입문 강좌 - 1 #1 지금 웹 디자인을 배우는 건 너무 늦었나? - 웹디자인 입문 강좌 https://www.youtube.com/watch?v=0q0tdEbNci4&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=1 ui는 대부분 스케치로 작업 이미지 편집, 그래픽은 포토샵으로 작업 web이란 무엇인가? - 소통을 위해서! - 미디어변화 (과거)일방향→(현재)쌍방향 - 단계 : 기획 > 디자인 > 개발 ㄴ(세분화) : 기획 > 웹디자인 > 웹프론트앤드개발 > 백앤드개발 > 운영 및 유지보수 2021. 5. 31.