원래는 5주차 강의를 듣고 있었지만,
결국 서버에서 배포하는 것이기에 이전에 있던 프로젝트를 다듬기로 했다.
01. <모바일 청첩장> 메인 이미지에 눈 내리는 효과
: 눈 내리는 방법은 여러 가지인데 (눈 내리는 영상 자체를 띄우는 방법 등)
그 중에서 CSS와 Java SCript를 이용한 방법을 활용한다.
깃허브에 이미 있는 코드 활용 (https://github.com/hyperstown/puresnowjs)
코드에서 만드는 <눈이 내리는 원리>는?
: 동그라미를 태그 하나로 만들고, 그 다음 Java Script로 여러 개를 생성하고,
이를 랜덤으로 떨어지게 만드는 것 (속도, 위치 다르게해서 바꾸기)
코드를 적용해보기
1. JS 파일
1) 깃허브의 js 파일을 들어가서, raw 버튼을 누르면 브라우저에서 파일을 열어볼 수 있다.
2) ctrl A해서 코드 전체 복사하기
3) static 폴더에 pureSnow.js 파일 만들고, 코드 붙여넣기
2. CSS 파일
1) styles.css 파일로 들어가서 코드를 활용한다.
2) snowflake를 직접 여는 코드는,
snowflake라는 class 속성을 가진 태그를 만들어서 랜덤으로 배치하게 되는 것이다.
3) snowflake가 있는 곳만 복사해서 가져오기
4) 우리 styles.css 하단에 붙여넣기
- gradient란 여러 색을 보여주는 형태
- filter : drop-shadow 는
그림자를 만드는 것
- border-radius 값에 50%를 넣으면
: 원이 된다 (= 원을 만드는 코드)
3. html 파일 살펴보기
코드가 어떻게 활용되는지 살펴보기 위해 index.html 파일을 본다.
1) body 부분의 div 태그를 잘 살펴보면
<div id="snow"></div>
이 영역에 눈이 만들어진다는 것을 알 수 있다.
2) 하단의 js 파일
<script src="./pureSnow.js"></script>
이렇게 추가하여 보도록 한다.
TIP🤖 스크립트 파일 추가 위치
스크립트 파일을 추가할 때, 코드에 따라body 태그 제일 하단에 추가해야하는 경우가 있다.
3) 우리 html 코드로 돌아와서, overlay 공간에 div 태그 추가
4) 순서에 따라, body 닫기 직전에 script 태그 넣기
5) 코드를 실행해보자
: 오버레이 바깥에 있기 때문에, 잘 안보이므로 다시 적용 (오버레이보다 잘 보이게 위에 올려놓자)
오버레이와 눈을 같은 선상에 놓았더니, 계층이 쌓이게 되는데
둘 중에 더 높은 계층에 있는 콘텐츠가 먼저 나와서 눈 부분이 잘 안보였던 것이다.
따라서, overlay 안에 넣으면 그 위에 올라올 것이다.
6) 계층 변경
<div class="overlay">
<div id="snow"></div>
브라우저로 가보면, 아까보다 훨씬 잘 보인다.
#눈내리는 효과 완성!
02. <모바일 청첩장> 지도 개발하기
이때, 다음 카카오 지도(kakao map) 사용해서 하기
본래 지도를 사용하는 경우 app key와 같은 인증과정이 필요하지만 카카오는 그렇게 하지 않아도 사용 가능하다.
1) kakao map에 접속
1-1) 설정할 위치 검색하기
1-2) 검색 결과에서 나온 공유 중에서 html 태그 복사 누르기
1-3) 이때 태그 복사 창이 뜨면서 어떻게 보여줄 지 '위치조정'도 가능하고, '아이콘 변경'이 가능하다.
1-4) 다 했으면, 소스 생성하기를 눌러 코드를 복사한다
2) 코드로 돌아오기
2-1) html에서 행 하나를 새로 추가해서 지도를 만들기
이전 행이 끝나는 div 태그 밑에 새 row 만들기
2-2) div 안에 복사한 지도 코드 붙여넣기
행이 안 맞으므로, Ctrl A 누르고 Shift Alt F 를 눌러서 전체 자동 들여쓰기 해주자.
3) 브라우저에서 살펴보니 크기가 안 맞는다.
그런데 크기가 고정으로 되어 있는 경우에는 어떻게 값을 조정할까?
: 우리가 보는 화면에 따라 크기가 달라진다.
코드를 살펴보면, div 안에 긴 id 값이 있고 class 도 있다.
이 div안이 내부의 java script에 의해서 지도가 생성되는 것
: 따라서 우리는 div 태그 안의 속성을 변경한다.
3-1) class 속성 첫 번째 값을 복사하여 css로 넘어가기 (root_daum_roughmap)
3-2) 속성값을 지정하는데, 가로 100%로 끝이 아님
width : 100% !important;
뒤에 !important를 붙이는 이유는?
이미 JS에 의해 만들어진 고정값 640으로 고정됨
BUT 이를 무시하고 우선순위를 부여하기 위해 사용
3-3) 다시 브라우저로 가면, 잘 적용되었다!
4) 간단한 제목 추가하기
4-1) html 태그에서 div class 바로 밑에 <h4>태그 사용해서 제목 넣기
브라우저에서 확인해보면, 잘 추가되었다!
여기서 사실 배경색이 없어야하는데, 이는 추후 수정
04. <모바일 청첩장> 이미지 슬라이드 개발하기
갤러리를 #슬라이드 형태로 만들기
슬라이드를 구현하는 library는 많은데, 그 중 slick이라는 library 사용하기
TIP🤖 Slick (html에 css, js 붙여넣기)
1) slick 웹사이트 접속하기
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io
2) 아래로 스크롤, 시작용 태그 (getting started)
2-1) HEAD 부분
기본 CSS와 theme을 볼 수 있다.
2-2) get it now로 가면 CDN을 이용해서 제공 중이다.
: 우리는 기본 css와 theme 두 개가 필요하므로 css 부분만 가져오는게 아니라, slick theme도 추가해야 한다.
2-3) 우리가 만든 css 밑에 slick css 추가
2-4) slick-theme의 경우, 앞에 붙였던 css 뒤에 theme만 추가하면 된다
그 이유는?
주소창에 아까 가져온 css를 붙여넣으면
같은 경로에 slick-theme css 파일이 들어있기 때문이다.
3) JS 코드는 go get it에 나와있는 걸 그대로 복사, 붙여넣기
slick 설치 완료 !
이미지 추가 (html코드 가장 아래)
1) div 태그 만들기
2) div class 를 gallery로 지정
3) img 넣기
갤러리 설정 완료 !
slick 적용하기 (html head부분)
: jQuery를 이용해서 script 작성
<주의> 사용하는 제이쿼리를 잘 살펴보자.
2) minified 선택해서, 원래 slim을 없애고 복사 붙여넣기
3) 이제 slick 적용하기
<script>
$(document).ready(function () {
$(".gallery").slick();
});
</script>
4) 저장 후 브라우저에서 확인
이미지가 이상하게 나온다. 이는 크기가 다르기 때문에 가장 긴 것에 맞춰져서 그렇다.
해결하기 (slick 안에 option)
1) slick 홈페이지로 돌아가서,
adaptiveHeight 옵션 이용해서 세로 길이가 가변일 때 처리를 하기
2) slick 안에 이 부분 넣기
adaptiveHeight: true
중괄호 넣고 그 안에 옵션을 넣어준다.
궁금증 : slick 홈페이지의 경우 https://kenwheeler.github.io/slick/
깃허브를 프로젝트용이나 개인 저장용이 아닌 이렇게
공용 기능을 제공하는 사이트로 사용하는 경우가 종종 있던데 이 부분에 대해서는
그냥 하나의 홈페이지처럼 보면 되는건지? 그리고 누구나 저렇게 깃허브를 가지고 만들 수 있는지도 궁금했다.
= 그렇다고 한다. 추가 설명은 스터디 쪽에 다시 할 예정.
slick 수정하기 (css 커스터마이징)
TIP🤖 슬라이드 기능
이미지 슬라이드 기능의 경우, 이미지의 세로길이가 다른 경우에 CSS를 커스터마이징해야 할 수도 있다.
= 내가 원하는 것과 다르게 나올 경우, css를 수정해야하는 경우도 있다.
1) styles.css에서 container에 overflow: hidden; 이라는 속성 추가
이는 내가 만들어 놓은 영역을 벗어난 곳에 어떤 콘텐츠가 있다면 숨겨달라는 의미이다.
2) 가장 마지막에 slick-slide 클래스를 만들어서,
height: auto !important;
- 반드시 !important를 넣어준다
- slick-slide 는 slick에서 사용하고 있는 각각의 이미지를
얘기하는데 height 높이를 auto로 지정해서 길이가
자기 마음대로 늘어나지 않도록 설정해주는 속성값
3) 저장 후 브라우저에서 확인, 이미지는 잘 나오나 버튼이 안보임
row3에서 row2로 변경하니 잘 됨
4) 갤러리 제목 추가
브라우저에서 확인하니, 잘 된다!
스터디 (5주차 화요일)
1. data 타입을 모를 때 방법
res = data
type(res)
print(type(res))
> 이걸로 프린트해서 보기
2. form 태그란?
다른 페이지로의 이동에 쓰이는 태그
<form action="/write" method="post" enctype="multipart~~~">
<input name="title"/>
<input name="price"/>
</form>
= write라는 경로로 input의 name에 키 값(title, price)을 post라는 method 방식으로 보낸다.
3. http 통신을 할 때 규칙
HTTP 통신 규칙
1) Url
2) Method (get, post, put, delete, patch .... )
3) Body (= data)
4) Headers
이때 get은 url만 (디폴트는 get으로 되어 있으나, 나중에 암호 등이 url에 포함될 위험도 있음)
post는 data를 내부적으로 감춰서 가져오는 것 (이 방법이 훨씬 많이 쓰임)
app.route("/prod/1")
app.route("/prod/2")
app.route("/prod/3")
>>
app.route("/prod/<id>")
이렇게 하면 1,2,3을 id 변수로 받아서 가져오게 된다.
내 질문
1. https://kenwheeler.github.io/slick/ 이런 홈페이지는 어떻게 만들고, 누가 만드는지 궁금했음.
깃허브에서 개인에게 하나씩 무료로 홈페이지를 만들 수 있게 해준다
: 다른 홈페이지보다 조금 느리거나 하더라도, 무료로 클라우드를 사용할 수 있다는 것은 아주 큰 장점!
이를 활용해서 포트폴리오 페이지 등으로 만들기가 가능하다.
2. slick 관련
$(document).ready(function () {
$(".gallery").slick({
adaptiveHeight: true
});
여기서 중괄호{}의 역할은?
slick 페이지에 가보면
slick - settings를 살펴보면 키와 값으로 되어 있다. 즉 키와 값, {} 형태로 받아와야 한다고 이미 지정되어 있다.
type은 boolean인데, 이는 c에서는 0,1 이고 파이썬에서는 true, false를 의미한다.
이러한 값을 잘 고려하여 내 코드로 가져오면 된다.
3. <모바일 청첩장> 방명록 버튼이 가운데로 오지 않는 문제
이는 개발자 도구에서 확인 후에 바로 수정이 가능하다.
페이지에서 - 개발자도구에서 수정하고 싶은 div class 가 어디에 있는지 본다.
이때 pagination이 있는 class가 flex라고 뜬 것을 볼 수 있다. 이 경우 justify를 이용해서 수정가능하다.
style="justify-content: space-evenly;"
이렇게 바로 옆에 style을 지정해주면 인라인으로 적용되고,
밑의 개발자도구 하단의 styles에서도 수정이 가능하다.
이는 자동완성도 되므로 더 편리하지만, 인라인으로 작성하는 것보다 우선순위가 떨어지니 잘 확인하면 좋다.
justify-content: space-evenly 이는 알아서 공간을 주는 자동 공간형식이다.
개발자도구에서 바로 저장이 되지는 않으므로 vscode 로 바꾼 코드를 직접 복사해서 고친다.
4. vscode에서 커밋하기
git 오류의 경우 (스터디원분이 도와주셨다)
index.lock 파일이 원래 다른 git과 충돌하지 않도록 생긴 것으로,
자동으로 없어져야하는데 남아있어서 생긴 문제이다.
이 경우 1)commit하는 폴더에서 숨긴파일 보기를 클릭
2) index.lock 파일을 찾아서 삭제해주고,
3) 다시 커밋하면 정상작동!
오늘의 소감 ✍️
당당마켓보다 모바일 청첩장이 더 재밌어서 집중해서 하게되고,
이번에는 css 쪽도 이리저리 수정해봐서 더 재밌었다.
특히 처음에 방명록을 만들 때 적용한 div class 부분이 guestbook-row가 적용되면서
전체 배경이 칠해지는게 문제였는데 (위의 사진에서도 종종 보임)
div 닫는 태그로 닫으니 방명록만 칠해졌음! (1차 성공에 기쁨)
대신 갤러리 부분이 비정상적으로 커지길래
그 부분은 css 가서 container가 이 부분을 조정해주길래 냉큼 class로 넣어버리기
width 100% 이부분이 잡아주는 것 같다.
다른 것보다 css가 아무래도 확확 눈에 와닿게 변하다보니 이 부분이 재밌게 느껴지는 듯 하다.
아무튼 곧 aws 를 할텐데, 조교님이 보안문제 관련 팁들도 많이 알려주고 가셔서 만들면 반드시 해야겠다 싶고,
그래서 아직 설명을 다 듣기 전엔 aws는 잠시 놔둘까 싶기도 하다.
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL😶🌫️] FastCampus' 카테고리의 다른 글
| [Let's TIL✍️] 코딩 18 : 5 Week _ DNS & 배포하기 (0) | 2022.09.04 |
|---|---|
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (2) & 스터디 (0) | 2022.09.04 |
| [Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : 당당마켓 마무리 (4&5) (2) | 2022.09.03 |
| [Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : pagination (0) | 2022.09.02 |
| [Let's TIL✍️] 코딩 18 : 4 Week _ 당당마켓 & 스터디 (0) | 2022.08.31 |
