10. 모바일 화면 대응하기

16) 크롬 개발자도구 이용하기

모바일로 변화된 창.
기종에 따라 다르게 ~

• Responsive로 맞춰놓고, 가로길이를 360px로 맞춰두면 웬만한 휴대폰에선 다 됩니다!

17) 모바일 대응 CSS 사용하기

CSS에 있는 기능 - 특정 가로길이 밑으로 가면 이 CSS를 먹여줘라.

@media screen and (max-width: 640px) {

}

이렇게 하면 640보다 밑으로 가로폭이 좁아질떄, 이것을 먹게된다. 이거보다 크면 안먹는다.
이거 안에서 다 작업하기.

h1 작업해두기

h1 {
    font-size: 26px;
}

box 작업해두기 - 세로로 바꾸기

.box {
    flex-direction: column;
    width: 100%;
}

지도 사이즈 조절하기

.map {
    width: 100%;
    height: 200px;

    margin: 0;
}

사진과 스토리 사이즈 조절하기

.story {
    width: 100%;
    height: auto;

    margin-top: 10px;
    margin-bottom: 10px;
}

.img {
    width: 100%;
    height: 200px;
}

가로 640px보다 작아질때 먹이고 싶은 CSS들을 여기에 적어두면 된다.

11. 공유를 위한 기초작업

18) 카카오톡, 페이스북에 공유하기

og:image, og:title, og:description 을 미리 세팅해두면, 카카오톡, 페이스북 등이 공유할 때 가져간답니다. 일종의 약속!

<meta property="og:title" content="ㅇㅇㅇ 님의 추억사진"/>
<meta property="og:description" content="내가 만든 첫번째 웹페이지!"/>
<meta property="og:image" content="image.jpg"/>

jpg나 png 등등..
타이틀 밑에 둔다.

그냥 봐도 확인불가하고 공유했을때만 확인할 수 있다.

12. 배포해보기

내가 만든 HTML을 온 세상사람들이 다 볼수있게 인터넷에 업로드 하고 배포하기
베포하는 것은 아직 배우지 않아서 스파르타가 만들어둔 서버에 배포하기.

19) 배포하고, URL 받기

http://spartacodingclub.shop/upload_family

제출완료하기.

20) 전체 코드