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를 정복하러 가야겠다.