윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 70강 - 연습 방법 기본 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 70강 - 연습 방법 기본

페이지 정보

조회: 1,058

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 임원 3반 7 식당

되겠고요
이번 강의에서는 지금까지 배웠던 내용을 어떠한 식으로 공부하면 되는지에
대해서 살펴보도록 하겠습니다
일단 이전에 언급했던 것처럼 도구의 사용 방법을 알아도 그걸로 뭔가를
만드는 것은 약간 다른 문제인데요
우리가 지금까지 제이쿼리 라는 도구에 대해서 살펴 보았지만 이걸로 무엇을
만들 수 있고 그걸 어떻게 연습하는 지는 약간 다른 문제라고 할 수
있습니다
그래서 기본적인 연습 방법에 대해서 알아볼텐데요 일단 필요한 것이 있다면
포토샵과 두번째로 여러분이 원하는 자주 들어가는 사이트 입니다
일단 간단하게 항상 강의에서 나오는 요 유튜브 페이지를 사용해보도록
할게요 엄
일단 여기에서 뭔가 자바스크립트로 조작되는 것이 있을 텐데요
예를 들어서 왼쪽 위에 있는 메뉴 버튼을 누르게 되면 지금 화면과 같이
왼쪽의 메뉴 바가 나오게 되고 이 메뉴바에서 다양한 녀석들을 클릭할 수
있게 됩니다 그럼 1대 2 메뉴바 이 특징을 계속해서 알아보는게 일단
첫번째 방법이라고 할 수 있겠는데요 이녀석은 요 왼쪽에서 마우스 가
벗어나도 그대로 유지가 되고 이 내부에서 무언가 * 올릴 때 이렇게 껌은
화면도 나오게 되고 클릭 한 번을 다시 하면 다시 들어간다 라는 모습
같은 것도 볼 수 있습니다
추가적으로 뒤에 그림자도 나오는 모습을 볼 수 있고요
스크롤을 했을 때 왼쪽에 있는 녀석은 스크롤이 되지 않고 오른쪽에 있는
여성 난 스크롤이 되고 조금 더 알아보니 뭐
더보기를 누르면 더보기 가서 나온다
요러한 다양한 상들을 파악하실 수 있을 겁니다
일단 최대한 많은 특징을 추출 하시는게 가장 중요하다고 할 수 있구요
두번째는 이게 자바스크립트로 구현 된건지
css 로 구현 된건지 확인 하는 것입니다
예를 들어서 현재 마우스를 각각의 요소 위에 올려 놨을 때 색이 변하는
것은 사실 자바스크립트가 아니라 일반적으로 css 로 구현 하는 거거든요
그래서 이걸 확인하기 위해서는 마우스 오른쪽 클릭하고 검사를 눌러 보시면
됩니다
css 로 구현이 됐다면 딱히 클래스 변화가 발생하지 않을 거고요
만약에 자바스크립트로 구현이 됐다면 지금 이 화면에 있는 문서 객체
모델의 변화가 발생할 겁니다
일단 올려놓게 되면 딱히 변화 없죠 그래서 요 녀석은 문서 객체 모델
조작을 자바스크립트로 하는게 아니라 css 로 작성된 녀석이라는 걸
확인할 수 있습니다
이걸 추가적으로 알고 싶으면 각각의 요소를 더 확인을 해 보면서 css
적으로 그런 게 있지 않은지 하나하나 타고 올라가면서 확인해보면 됩니다
사실 처음에는 이 자체가 굉장히 귀찮은 작업이기 때문에 힘드실 수
있는데요
몇 번 살펴보다 보면 항상 이용되는 녀석이 이용되기 때문에 금방 찾으실수
있을겁니다
어쨌거나 요 녀석을 한번 클릭해서 어떠한 변화가 있는지 확인해 보도록
하겠는데요
클릭을 했을때
변화가 나는 부분을 찾아 주시면 됩니다
변화가 나는 부분은 화면의 색이 바뀌기 때문에 그걸 봐주시면 되겠구요
사이트 발을 한번 요소 검사를 하고 뭐 왼쪽 위에 있는 걸 클릭을 하시고
요렇게 잡으시면 해당 위치로 이동 되기도 합니다
요녀석을 잡은 상태에서 이 버튼을 눌러 보면서 어떠한 변화가 있는지
확인을 해보게 되면 그 변화 와 관련된 내용을 추적할 수 있게 됩니다
일단 화면이 작아서 보기 힘드니까 키우고 설명하도록 할께용
일단 저도 이 유튜브 크리에이터 스튜디오 페이지는 처음 보기 때문에 같이
한번 분석을 해 보도록 하겠는데요
이녀석을 클릭을 하게되면 오른쪽에 바뀌는 부분이 생길 겁니다
일단 가장 기본적으로 색이 표시 되서 바뀌는 부분 부터 보도록 할게요
그냥 상태에서는 html 에 클래스가 노 포커 쌓아온 라인인데
요녀석을 클릭을 하게되면 노 포커 싸운 라인과 쇼 가이드 라는 녀석이
추가되는 모습을 볼 수 있습니다
추가적으로 아래쪽에 아리아 익스 펜디 라는 녀석의 나오는데요 닫혀 있을
때는 x 펜디 드 상태가 펄스 이고 클릭을 했을 때는 익스 펜디 드
상태가 트로 로 바뀌는 모습도 볼 수 있습니다
참고로 이런 아리아 속성 같은 경우에는 음성 웹브라우저를 지원하는 속성
이기 때문에 일단 우리 연습 단계에서는 생략하도록 하겠습니다
어쨌거나 이렇게 클래스가 변경되는 사실을 알 수 있는데요
클래스가 병정이 되서 화면에 어떤 변화가 나길래 이제 변화가 나는지 조금
더 살펴보도록 하겠습니다
다시 한번 요녀석을 정확하게 클릭해 보도록 하겠 꾸 요 자 피정 그
상태에서 버튼을 끄고 켤 때 가장 오른쪽에 있는 패널인 css 패널의
스타일을 확인해 보도록 하겠습니다
일단 보일 때와
껐을 때 인데요 약간의 변화가 나는 모습을 보실 수 있을 겁니다 정확하게
다시 보게 되면 클리 그럴 때는 쇼 가이드에 점 에 빠 가이드 메뉴
레이아웃의 빚어 빌리 티가 그 11로 나오는 모습을 볼 수 있구요
이 녀석을 다시 끄게 되면 아까 쇼 가이드 라는 녀석이 를 추가 했었는데
이 녀석이 빠지면서 점 에 빠의 가이드 메뉴 레이아웃의 비 쥬 얼 리
티가 히든 으로 변경되면서 보이고 안보이고 현상이 일어난다는 걸 찾을 수
있습니다
보이고 안 보이는 것의 차이점을 찾았다면 이제 그걸 실제로 코드로 구현을
해서 증명을 해 보면 되겠는데요 일단 화면에 스크린캡쳐 를 찍도록
하겠습니다
크롬 같은 경우에는 크롬 앱 스토어나 구글에서 크롬 풀스크린 이라고 치
시계 되면 풀스크린 페이지 캡처 앱이 나올 겁니다
그 녀석을 다운받아서 클릭을 해 주게 되면 지금 화면과 같이 캡쳐가 된
다음에 화면에 캡처 모습을 출력을 할 텐데요
요녀석을 저장을 하고 활용하도록 하겠습니다
이어서 이렇게 찍은 녀석을 포토샵에서 열도록 하겠구요 짤라 보도록
하겠습니다
일단 html 레이아웃을 공부 할 때랑 비슷한 되요
적당한 위치를 잘라주시면 됩니다 사실 지금 html 강 이란 찍었죠
이후에 올라가면 그 때 참고를 해주시면 되겠구요
일단 지금 화면과 같이 자르게 되면 위쪽과 아래쪽의 메뉴바가 나뉘게
됩니다
이어서 래쪽에 있는 녀석은 그냥 사용하도록 할게요
왜냐면 지금 구현할 때 중요한 거는 요 버튼을 클릭할 때 왼쪽에서 나오냐
안나오냐 니까요
그리고 이어서
요 쪽에 있는 메뉴바 도 약간 잘라 보도록 하겠는데요
버튼을 우리가 활용할 것이기 때문에 버튼 위치는 짤라 주도록 하겠습니다
그래서 이러한 식으로 3개의 영역으로 9분 을 했는데요
뭐 더 필요하실 때는 어떤 영역이 있을 때는 그 영역을 또 잘라서 활용을
해 주시면 되겠습니다
요번 강의 이외에 다음 강의에서도 다시 한번 요런 것을 해 보도록 할
테니까 그때 다시 이야기를 해보도록 할게요
참고적으로 이 도구 같은 경우에는 분할 영역 도구 라고 말을 하고요
일반적으로는 자르기 도구 로 선택이 되 있을 거예요
요 녀석을 한번 클릭을 해 주신 다음에 요녀석을 선택을 해 주시게 되면
분할 영역 도구 로 바뀌게 되고 방금처럼 분할할 수 있게 됩니다
참고로 2분 할 도구가 굉장히 기능이 많아서 모른 쪽 누르고
분할 영역 나누기를 하게 되면 수평으로 뭐 6개를 나눈다 그러면 지금
화면처럼 6개가 이렇게 나눠 지기도 하고 수직으로 나눈다 라고 그러면
요렇게 6개 도 나눌 수 있고
요런 형태로 레이아웃을 연습할 때 굉장히 활용할 수 있거든요 이와 관련된
설명은 또 다음 강의에 하도록 하고요
다 잘라 쓰면 저장을 해 보도록 하겠는데요 파일에서
내보내기 영어로는 익스포트 게 점 그리고 웹용으로 저장
뭐 세이브 포의 빙과 로 되어있을 거에요 요녀석을 선택을 하고 좀 작게
만든 다음에 전부다 선택해주시고
원하는 형식을 지정하고 뭐 jpg 로 저장을 해 볼게요
저장을 누르고 적당한 위치에 저장을 해 주시게 되면 이 녀석들이 분할
되어서 저장됩니다
현재 바탕화면에 저장을 했는데요 바탕화면에 이미지 스 라는 폴더를 보시게
되면 1 2개 세계로 분할이 제대로 된 모습을 확인할 수 있습니다
그럼 이제 이 녀석을 html 페이지에서 읽어서 대충 화면을 구성해
보도록 하겠습니다
이어서 간단하게 지금 화면과 같이 스타일을 작성을 했습니다
일단 맞은 제로 패딩 제로 먹여서 모든 마 증가 패딩을 제거를 하고 용
div 태그를 그냥 더 서 이미지를 때려 바꿔 준 다음에 너비와 높이를
설정을 하고 슬론 레스트 플롬 라이트에서 왼쪽 오른쪽 받고 백그라운드
사이즈의 뭐 컨테이 나 백그라운드를 이 핏을 적용을 해 가지고 뭐 이
녀석이 반복되면서 나오는 이상하게 보임을 막고 너비 주고 마진 제로 워터
중앙 정렬 하고 뭐 여러가지를 사용을 해서 지금 화면과 같이 간단한
페이지를 구성을 했습니다
여기에 유튜브 페이지가 아니라 그냥 이미지로 구성되어 있는 페이지 입니다
참고적으로 이미지의 뭐 도피 라던지 너비를 알고 싶으실 때는 이미지
클릭하고 마우스 오른쪽 에서 속속 누르고 자세히 해서 사진의 크기를
보시면 됩니다
사실 제 컴퓨터가 지금 아이맥 오케이 라서 화면에 배울 변환이 있어서요
변환이 약한 있는데요
그 변환 배울 만큼 5 축소를 하시거나 확대를 하셔서 사용하시면 됩니다
어쨌건 뭐 이런 저런 식으로 화면을 구성하면서 사실 해보시면 요기 쌓이게
되면 더 포트폴리오가 되기 때문에 뭐 좋을 거라고 생각을 합니다
일단 클릭하는 녀석에게 알기를 대충 버튼 이라고 넣도록 하겠구요
스타일에서 이제
div 태그가 아니죠 # 버튼을 클릭했을 때 그리고
여기에다가
지난 강의에서 언급했던 도큐먼트 점
레디 를 넣어야 겠죠
넣어주시고 안에다가 넣었을 때 일단 간단하게
경고창이 뜨는 지 확인을 해보도록 하겠습니다
음 으
참구 일본화 키보드가 먹어서 30
경고창을 출력을 하고 저장을 하신 다음에
실행을 해 볼 수 있게 됐을 때 요녀석을 클릭을 하게되면 경고창이 뜨는
모습을 볼 수 있습니다
이어서
요 버튼을 클릭했을 때 표시되는 녀석을 가지고 왔구요
뭐 표시자 같은거 표시를 한 다음에
좀 감축 키로 쓸게요 적당한 위치에서
녀석을 잘라 주게 되면
격자 는 꼭 9 5
자르고
짜르고
짤라 주시면 사실 포토샵의 사용 방법에 익숙하지 않으시면 이 자체가
어려우실 수 있는데요
뭐 사실 이 짜르고 하는 내용들은 그냥 쉽게 이해하실 수 있기 때문에
조금 사용해보시면 좋을 거라고 생각을 합니다
어쨌거나 이렇게 요 버튼을 클릭했을때 나오는 부분 추출을 했고요
마찬가지로 내보내기 를 사용해서 웹용으로 저장 을 하도록 하겠습니다
jpg 로
그냥 바탕화면에 다가 추출을 하도록 하겠구요
추출이 완료가 되면 지금 화면처럼 나오게 되는데 여기에서 요 두 번째
녀석이죠
요 두 번째 녀석을 가지고 와서 또 div 태그를 만들도록 하겠습니다
4점 jpg 라는 이름으로 저장을 하도록 하겠구요 div 태그를 적당한
위치에 붙여 놓도록 하겠습니다
뭐 4점 jpg 주면 되겠고 너비 한 번 확인해 보도록 하겠 고용 너비가
성공적으로 너비가 459 픽셀 인데 제 디스플레이 설정을 보시게 되면
팍 때 배율이 200 이거든요 그래서 반을 나눠 주셔야지 저기에서
출력하는 화면 크기가 됩니다
따라서 다시 키 9 너비를
220 9 정도로 주면 되겠구요
도 피는 587 넣도록 하겠습니다
587 넣게 되면 클릭을 했을때 아래쪽에 요렇게 출력되는 모습을 볼수
있구요
이 상태에서 이 녀석의 포지션을 앱솔루트 로 주고
뭐 사실 정확하게 까지 구현 하실 필요는 당연히 없고 화면에 출력을 하고
자바스크립트로 어떻게 조정할 것이냐가 문제이기 때문에 적당하게 화면을
구성 을 하시면 되겠습니다
탑을 47 픽셀의 스트를 채로 픽셀 을 조가 주고 다시 한번 살펴보게
되면 지금 화면을 실행을 했을 때 왼쪽에 요 메뉴가 들어가는 모습을 볼
수 있습니다
추가적으로 박스 섀도우 도 한번 곳 빅스 ro 픽셀 뭐 픽셀 블랙을 줘
보도록 하겠습니다
이렇게 저장하고 실행을 해 주시게 되면 지금 화면과 같이 그림자가
간단하게 나오는 모습을 볼 수 있는데요
블랙이 너무 쎈거 같은데 마법의 cs 쓰자 라고 하는 18 18 18 을
입력을 해서 실행을 해보면 적당하게 걸리는 모습을 볼 수 있습니다
어쨌건 이 상태에서 요걸 클릭했을때 저걸 보이게 하고 안보이게 만 구현을
하면 될텐데요
유튜브에서 사용을 했던 것처럼 한번 html 에다가 클래스를 먹여서
적용을 해 보도록 하겠습니다
일단 래쪽에 있는 녀석에게 클래스 이름을 주도록 하겠는데요
클래스 로 테스트 라는 이름을 주도록 하겠습니다
뭐 정확하게 테스트 패널이 라는 이름을 주고 있구요
스타일을 사용해서 점
클릭 저상태에서
테스트 패널의 비 쥬 얼 리 티가
히든 으로 보이게 만들도록 하겠구요
클릭 되어 상태가 아닐 때는 빚어 빌리 티를 히든 으로 보이지 않은 게
아니고
참고적으로 밝혔죠 위에가 시드니 고
아래쪽이
비즈 불로 바꿔야 겠네요 어쨌거나 이렇게 입력을 하고
html 을 클릭을 했을때
토글 클래스 라는 녀석을 저번에 잠시 언급을 했었죠
토글 클래스 로 클릭 때 를 켜고 끄게 만들어 보도록 하겠습니다
이렇게 코드를 저장을 하고 실행을 하게 되면
처음 상태에서 이렇게 나오게 되고 왼쪽 위에 있는 버튼을 클릭했을때
나오고 없어지고 하는 모습을 확인할 수 있습니다
이렇게 기능들을 구현을 해 보면서 하나하나 만들어 보시면 좋은 경험이 될
거라고 생각을 합니다
사실 뭐 요거 그냥 껐다 키고 하는거는 코드가 요 위에 게 전부지만
요트를 만듦으로써 뭔가 내가 뭔가 이루었다는 느낌 같은 것도 줄 수도
있고 추가적으로 요 위에 있는 요소 만니라 다른 요소들도 조금 부터
구현을 했을 때 예를 들어서 요 위에 올리게 되면 은 실제 유튜브에서 는
요런 드롭다운 메뉴가 나오죠 그래서 요런 것을 띄운다 던가 아니면 뭐
옆에 있는건 아 뭐 요렇게 되어 있는 녀석들을 클릭을 했을 때 화면이
옮겨 가는 모습 같은 것을 구현을 해 보시게 된다면 그런 여러가지 구현
들을 했을 때 조금 더 포트폴리오 같은 느낌도 낼 수 있고 여러분이
이후에 취직 같은 데도 활용할 수 있을 거라고 생각을 합니다
어쨌거나 요러한 식으로 연습을 계속 해주시면 되겠구요
다음 강의에서도 요렇게 비슷한 방법으로 사이트 하나의 기능을 모방 하는
방법에 대해서 알아보도록 하겠습니다
어쨌건 여 그럼 오늘 강의는 여기까지 되겠구요
다음 강의에서 뵙도록 하겠습니다 감사합니다.