분류 전체보기 258

21.01.15 프로젝트#1 클릭한 좌표 구하기

축구 과제할 때 쓰려고 알아놓은 것인데 결국 못쓰고 프로젝트 때 쓰게 될 줄이야.. input 태그나 button태그에 onclick = "function()" 속성을 추가하여 클릭하면 함수를 호출하는 방법이 있다. 갑자기 마우스로 클릭한 좌표 값이 궁금할 때가 있다(?) 이때는 속성을 추가할 때 onclick = "function(event)" 로 event를 넣어준다. 함수를 호출할 때 전달되는 인자 값이 클릭하는 이벤트 자체가 되는 것이다. 그리고 함수 선언식에서 다음 사항을 넣어준다. function(event){ var x = event.clientX; var y = event.clientY; } 그렇게 되면 변수 x, y이 client(클릭한 사람)가 클릭한 좌표의 x, y 값으로 선언된다. ..

카테고리 없음 2021.01.16

21.01.13 프로젝트#1 영상 가져오는 법

✔ 웹페이지에 영상을 가져오는 일반적인 방법은 총 세가지다. 1. 직접 영상을 업로드하는 법 2. iframe으로 설정하는 법 : 인라인 프레임 요소 - HTML: Hypertext Markup Language | MDN (mozilla.org) 3. youtube 영상 코드로 설정하는 법 iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API (google.com) ✔ 일단 내가 선택한 방법은 1번이다. 2번 iframe은 브라우저에 따라 지원 상태가 다른 것 같은데 불안정해서 선택하지 않았고 3번 youtube 영상은 js 코드가 길어지고 홈 화면의 하위 레이어에 영상이 재생되는데 커서가 올라가면 control 화면이 계속 뜨기 때문에 ..

카테고리 없음 2021.01.14

21.01.13 프로젝트#1 햄버거 버튼

홈 화면의 전체 메뉴를 띄우고 숨기기 위한 햄버거 버튼을 추가했다. ✔ position 설정 애니메이션이 아닌 버튼 자체를 생성하는 것은 간단할 것이라 생각했지만 position 설정이 의외의 첫 번째 복병이었다. 이 버튼이 영상과 반투명 레이어에 가려지지 않아야 하고 반투명 레이어 기준의 position에 대해서 설정해야하기 때문에 생각해야할 것이 많았다. html 태그에서 부모 태그에 해당하는 반투명 레이어의 position : relative;로 설정하면 그 좌측 최상단이 자식 태그의 (0,0)으로 기준이 된다. position : absolute;와 position : relative;를 잘 설정하여 이 녀석이 예쁘게 자리를 잘 잡을 수 있게 만드는데 시간이 좀 걸렸다... ✔ z-index 설정..

CSS 2021.01.14

21.01.13 프로젝트#1 FlexboxFroggy

상현님께서 디스코드에 해보라고 올려주신 개구리 게임을 했다. 플렉스 박스로 제어 연습을 할 수 있는 귀여운 사이트였는데 이런 식으로 수업을 하면 참 쉽고 재밌고 좋을 것 같다... 사이트 주소는 https://flexboxfroggy.com 이다. 게임의 핵심은 display : flex; 로 설정했을 때 사용할 수 있는 명령어 총 8가지를 사용하여 개구리를 수련잎으로 돌려보내는 것이다. ✔ flex 요소들을 가로선 상에서 정렬시키는 justify-content 이의 vertical 개념인 align-items 는 flex 요소들을 세로선 상에 정렬한다. ✔ 그리고 방향을 정렬하는 flex-direction 과 특정 요소의 순서를 결정할 수 있는 order(값으로 지정), ✔ align-items는 요소..

CSS 2021.01.14

21.01.13 프로젝트#1 일정 및 계획

✔ 프로젝트 일정 : 21.01.13 ~ 21.01.19 (7일), 21.01.19 : 발표 준비로 빼놓기 ✔ 기억해야 할 것 : 나는 할 수 있다 중간에 계획대로 잘 안 풀려도 멘붕 금지!! 날짜 1/13 (수) 1/14 (목) 1/15 (금) 할 일 ◾JQuery 복습 ◾이미지 소스, 텍스트 확보 ◾홈 화면 시작 ◾ AIR BUSINESS 구현 시작 ◾ AIR NEWS 탭 추가해놓기 ◾ 중간 점검 ◾ AIR NEWS 구현 시작 ◾ 입사지원 탭 추가 날짜 1/16 (토) 1/17 (일) 1/18 (월) 할 일 ◾ 각 탭들 홈화면 연동 ◾ 애니메이션 다듬기 ◾ 중간 점검 ◾ 탭 마무리 ◾ 최종 점검 ◾ 점검 결과 판단 후 검색 및 주가 배너 추가

회고 및 기타 2021.01.13