2021 추석 스파르타코딩클럽 이벤트 -2일차

강의자료

https://www.notion.so/2-8f47e14182904060b19543b51f672aa2

2일차

띠별로 운세페이지 만들기

a tag의 href에 target html 입력해주기

 

 

result 페이지를 만들어보자 

한개의 페이지를 만들고 복사/붙여넣기 하자

style들을 입히자 

margin : 80px auto 50px auto (시계방향으로 top, right, bottom, left)

div tag를 이용 영역을 나누고, 각종 스타일을 입힌 컴포넌트들을 넣자

 

뒤로가기 / 공유하기 버튼

버튼이 2개고, 한줄 -> 하나의 div로 묶자

가운데 정렬하기 -> display:flex 이용 

            display:flex;

            flex-direction: row;

            justify-content: center;

모바일 버전에서 처리하기

"특정한 경우에 -> 누구를 -> 어떻게" 로 처리해보자

 

개발자 도구에서 모바일로 미리 봐보자 

아래 코드를 스타일에 넣자, 스크린 사이즈가 작을때 적용시켜라

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

            body {

                background-color: green;

            }

        }

 

자바스크립트 맛보기

html에서는 <script> tag를 이용하여 js를 적용

onClick도 "함수명()"을 다 써줘야한다., 

 

하나의 페이지에서 파라미터를 넘겨주어 여러개의 페이지를 만들 수 있다. 

외부에서 자바스크립트 가져오기 

<script type="text/javascript" src="https://new-year.spartacodingclub.kr/newyear.js"></script>

 

result 페이지에서 "쥐" 와 "2021년 쥐띠의 운세는!" 이거는 내가 바꾼 코드가 없었는데,

스파르타에서 제공하는 자바 스크립트에서 저절로 바꿔주는 것이었다.

 

공유하기

카카오톡 링크하기 썸네일 og:image, og:title, og:description 을 이용하자 

 

    <meta property="og:title" content="신년운세 by 르탄!"/>

    <meta property="og:description" content="2021년 띠 별 운세를 알려드립니다"/>

    <meta property="og:image" content="https://new-year.spartacodingclub.kr/images/ogimage.png"/>

 

favicon  적용해보기

<link rel="shortcut icon" href="https://new-year.spartacodingclub.kr/images/favicon.png">

 

배포해보기

기본적으로 서버를 알아야함

 

 

2일차 후기 

추석 연휴에 좋은 강의 였다. 

앱만 개발하다가 웹을 하려고 막막했는데 하나의 웹 페이지를 완성해보면서 감을 익힐 수 있어 유익한 시간이었다. 

무료 강의라 별 기대를 하지 않았는데, 생각보다 난이도도 있고, 하나의 웹 페이지를 완성 할 수 있어서 좋은 시간이었다. 

이벤트성이라 하나밖에 참여못하지만, 4개를 다 해보고 싶다는 생각이 들 정도이다. 

이제 자바스크립트와 react를 정복하러 가야겠다.