[패스트캠퍼스] 웹개발 강의 4주차 두번째 후기

4주 차 두 번째 수업 내용

추가강의에 가까운 내용인 듯

지난 강의에서 만들었던 모바일 청첩장에 여러 기능 추가

아코디언(Arccordion)

 

#내일 배움 카드 #국비지원교육

---

1.  Accordion 아코디언

흔히 아코디언이라는 악기를 떠올리면 이해가 쉽다. 접었다 폈다 할 수 있는 메뉴 창 같은 것.

부트스트랩에서 제공하고 있기 때문에 복붙만 하면 된다.

https://getbootstrap.com/docs/4.6/components/collapse/

Collapse

Documentation > Components > Collapse 클릭 후 내리다 보면 있음

전에 작성했던 청첩장 html 파일에 들어가서 원하는 부분에 div 태그 만들고 복사한 코드 붙여 넣기

이때 들여 쓰기가 맞지 않는 경우 Ctrl+A 눌러서 전체 선택 후 Shift+Alt+F 눌러서 자동 줄맞춤 하면 된다

물론 이것만 하면 당연히 적용 안되고 css랑 javascript 코드도 복사 붙여 넣기 해야 된다(css랑 bundle 복사)

 

*부트스트랩으로 코드 가져올 때 주의사항

부트스트랩에서 사용 중인 클래스 명과 내가 작성한 클래스 명이 안 겹치게 주의해야 함

 

---

2. 눈 내리는 효과

https://github.com/hyperstown/pure-snow.js

GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in

깃허브에 공개되어 있는 코드를 사용

코드들 중 javascipt파일 선택 후 Raw 버튼 누르면 코드들을 확인할 수 있는데 이걸 복사해서 사용할 수 있다

Raw 버튼 안 누르고 그냥 복사도 되는 것 같음

 

새로 static 폴더 안에 복붙 한 js 파일을 저장했으면 깃허브 페이지의 css 파일을 본다

맨 아래 snowflake 클래스만 복사해 원래 작성했던 styles.css파일의 맨 아래에 붙여 넣는다.

이 snowflake 클래스를 활용하기 위해서 원작자가 어떻게 사용했는지 깃허브의 index.html 코드를 보며 확인해 볼 수 있다.

이 코드의 한 가지 특이한 점은 스크립트 파일을 body 하단에 추가한다는 점.

예시 코드처럼  눈이 내리는 효과가 들어갔으면 하는 부분에 <div id="snow"></div>로 위치를 정해주고

body태그 닫기 직전에 puresnow.js 코드를 연결해 주면 끝

 

---

3. 지도 표시 넣기

 

별도의 인증 과정 없이 사용할 수 있는 다음카카오 지도를 넣어 보는 과정

https://map.kakao.com/

카카오맵

웹페이지 안에 넣기를 원하는 장소를 검색 후 공유하기 버튼을 누르고 HTML 태그 복사 버튼을 눌러

소스 생성 버튼을 누르면 주소를 가져올 수 있다.

지도가 들어갔으면 좋겠는 부분에 div를 만들고 코드를 붙여 넣기 한 후 들여 쓰기 간격을 잘 맞추면 된다

지도의 가로세로 사이즈는 직접 픽셀 단위로 수정할 수도 있지만 css로 수정할 수도 있다.

 

기본으로 제공하는 사이즈가 가로 640픽셀이고 이를 100% 넓이로 수정하고 싶을 때, 

css에서 해당 클래스 이름으로 100%를 설정하면 간단하지만 이 경우 기본 설정 사이즈와 충돌이 발생한다. 

이럴 땐 내가 원하는 사이즈 뒤에! important를 쓰면 우선순위를 더 높게 설정할 수 있다.

 

 

---

4. 이미지 슬라이드

 

슬라이드 형태의 갤러리 만들기

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

다양한 예시들이 있다. (한 장씩 넘기기, 세장씩 넘기기 등등)

get in now 버튼을 눌러 내려보면 CDN 코드가 있는데, 바로 사용하면 안 된다고 한다

slick과 slick-theme 두 가지 CDN이 모두 있어야 하는데, CSS의 CDN을 복사 후 두 번 붙여 넣고 하나는 파일이름을 slick-theme.css로 수정하면 된다.  둘 다 복사할 수 있게 하면 좋을 텐데 여기는 왜 이렇게 하는 거지..?

 

(중요)

지금까지 사용했던 jQuery는 slim버전의 CDN을 사용했는데 slick은 slim버전으로 사용할 수 없다.

따라서 jQuery cdn 사이트에 접속해 minified 버전을 선택해 cdn을 복사해야 한다.

 

그다음에 자바스크립트 코드까지 붙여 넣으면 설치 완료

이러면 사용할 준비는 다 됐고 그 후 과정은 다음과 같음

1) 갤러리가 들어가길 원하는 부분에 div를 만든다

2) 1의 div 내부에 이미지들을 가져오는 div를 따로 만든다

3) head 태그로 다시 올라가서 자바스크립트 코드를 작성한다.

<script>
	$(document).ready(function () {
    	$(".gallery").slick({
        	adaptiveHeight: true
        });
    });
</script>

위 코드에서 gallery 클래스는 이미지들을 가져온 div에 클래스 이름이고 adaptiveHeight:true는 이미지의 세로 길이가 각자 다른 경우 이를 억지로 늘리지 않고 본래 사이즈로 유지하기 위해 넣는 코드이다. 이 코드를 넣을 경우 div의 세로 길이가 현재 띄워진 이미지 크기에 따라 유동적으로 변하게 된다. 만약 이 코드를 사용했는데도 이미지 세로 길이가 정상적이지 않고 억지로 늘려져서 깨지는 현상이 발생한다면 css를 수정해 각각의 이미지들의 세로 길이를

height: auto !important; 와 같이 자동적으로 변하도록 하는 속성값을 추가해줘야 한다.

 

---

5. 이미지 원본 보기

 

modal을 활용해 이미지 클릭 시 팝업으로 원본 사진을 띄우는 기능 만들기

부트스트랩에 있는 modal 코드를 복사해 와서 이전에 만들었던 것처럼 $(document).ready 안에 작성하면 된다.

하나 다른 점은 이미지가 여러 개인 만큼 변수를 생성해서 어떤 이미지를 선택해도 같은 과정을 거치도록 하는 것

 

+)

작성하고 있는 홈페이지에 들어가서 개발자 도구를 선택하고 Elements 탭에서

원하는 요소를 선택한 후 아래 Styles탭에서 elemnts.style에서 직접 보면서 CSS를 수정할 수도 있다

바로바로 보면서 수정할 수 있다는 점이 매우 편한 것 같다.

 

---

7. 텍스트 편집기

 

방명록 작성 시 이름과 내용을 작성할 수 있었던 입력 창 textarea를 편집할 수 있다

여기서 말하는 텍스트 편집이란 볼드, 기울기, 밑줄 뭐 이런 메모장 기본기능을 말한다.

https://quilljs.com/

Quill - Your powerful rich text editor

css코드를 복사해서 head에 추가하고 내용 부분은 원하는 위치에 넣는다

이때 편집기를 추가하면 기본 textarea태그와 다르게 적용되기 때문에

form으로 전달할 때 편집기의 내용을 textarea 태그에 따로 추가하는 동작이 별도로 필요하다. 

 

이 말이 처음에 이해가 잘 안 됐는데 내 방식대로 이해해 보자면,

내가 작성한 텍스트의 볼드체, 기울기 등의 유무 정보까지 포함해서 전달하기 위해서는 추가적인 정보까지 포함해야 된다는 말인 것 같다(아님 말고)

 

 

---

4주 차 두 번째 수업 후기

 

사실 웹페이지를 작성하는 데 있어 엄청 중요하진 않지만 퀄리티를 높이는 다양한 기능들에 대해 배웠다.

점점 그럴듯한 웹페이지를 만드는 것 같아서 뿌듯했고 쉽고 빠른 복사 붙여 넣기가 많아서 어렵지 않았다

어려운 점이라면 여기저기서 코드를 복사해 오고 CDN 복사해오고 하면서  뭘 어디서 가져온 건지 헷갈리는 정도?

그리고 당당 마켓 코드는 작성하다가 어려워서 여러 번 들었는데도 확실히 개념이 잡히지 않아서 나중에 따로 듣고 내용을 추가할 예정.. 코드 오류가 갑자기 나왔는데 왜 나온 건지 이해가 안 된다; 몽고 DB랑 연동 문제인 것 같긴 한데 몇 번 더 해보고 해결이 안 되면 실습코치님한테 질문드려야지(사실 질문 한 번도 안 해봄ㅋ...)

 

하나 발견한 단점 : 갑자기 자막이 안 나오는 영상이 몇 개 있어서 불편했다. 새삼 자막이 진짜 편리한 거구나 생각함