https://www.youtube.com/watch?v=GUmESHONKaE&list=PLgqG2uj21HgmvkxcxKD0aYvF8zs0LGAES&index=3
강의를 따라
git hub 자료를 받아주고
유의사항을 체크한다.
Html, css, javescript는 배우긴했지만
사용하지않은지가 오래되어서...
그래도 대략적으로는 기억이 난다.
생소했던 내용으로는
Javascript에서 css 선택자가
class는 . (점)
id는 #으로 구분한단 점인데
일단 강의를 듣고 정 모르겠으면
Javascript 강의를 다시 듣도록 한다.
(아니면 해당 내용만이라도 찾아보던가)
페이지 레이아웃
페이지 레이아웃이라고 하고
프로젝트로 치면 기획단계이다.
MBTI 테스트는 기본적으로
메인페이지, QnA 페이지
그리고 result 페이지로 이루어져있는데,
(1) main은 처음에 단독으로 보여지고
(2) qna는 중간에
(3) result는 qna를 마친 이후에 보여져야한다.
page url이 변경이 된다면
이런 고민을 할 필요없지만
정보를 넘겨줘야하는 기능을 알아야한다.
이번 프로젝트에서는
html, css, javascript만을 사용해
한 페이지에 전부 구현을 해주는 것을 목표로 한다.
동작방식
main, qna, result
각각이 동작될 때
해당 display가 none, block이 된다.
git hub에서 받은 폴더 열어주기
replit에서 다운로드 받은 폴더를 열어준다.
css 폴더는 깃허브에는 없었지만
강의에서는 빈 폴더로 존재했기에 새로 생성해준다.
왠지 모르게 data.js는 함께 열리지않아서
별도로 열어주었다. (오류인가?)
html.index
해당 강의 영상에서는
html하고 엔터를 치면 자동완성이 된다하지만
replit에서는 생성과 동시에 이미 만들어져있다 ㄷㄷ
(replit 대단해~)
위처럼 말이다.
html 생성 후 head 부분
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width"> -->
<title>replit</title>
<!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
</head>head 부분에서는
html lang = "ko" 로 한국어를 써준다는 점을 명시해준다.
dir = "ltr"은 뭔지 잘 모르겠으나
아톰에서 자동생성되는 부분인듯하다.
(replit에서는 생성안되는 코드)
<!-- --> 부분은
replit에서 자동생성된 코드인데
일단 강의프로젝트에서는 없는 부분이라
주석처리를 해두었다.
body 파트, 섹션 나눠주기
<body>
<section id = "main">
</section>
<section id = "qna">
</section>
<section id = "result">
</section>
</body>
</html>body 내에서
프로젝트 기획단계에서 구상한
section을 구분해주도록 한다.
main
qna
result
파트로 나눠준다.
아톰에서는 추가 패키지를 다운로드받아
강의 내에서는 section#main이라고만 입력해도
<section id = "main"> </section>까지 자동입력되었으나
replit에서는 어떤 패키지를 다운받아야하는지 몰라서
일단 일일이 작성해보긴 했다.
(강의 끝나고 찾아보기)
갑자기 에러가?
강의에서처럼
toyproject라는 파일을 생성해서
모든 폴더와 파일들을 하위로 넣어주었는데
갑자기 동작을 안한다 ㅡㅡ ?
상위폴더에서 빼주기
toyproject 하위에 있던 폴더와 파일들을 모두 밖으로 빼주니 정상적으로 작동한다.
화면사이즈가 매우 크다는 점이 있지만
이건 나중에 조정하겠지 싶어서 일단은 패스해본다.
'MBTI 테스트 프로젝트' 카테고리의 다른 글
| [MBTI 테스트(6)] QnA 화면 구현하기 (innerHTML, createElement, addEventListner) (0) | 2023.04.13 |
|---|---|
| [MBTI 테스트(5)] 판다코딩 유튜브_화면전환하기 (애니메이션으로 화면 서서히 사라지기/나타나기) (0) | 2023.04.12 |
| [MBTI 테스트(4)] 판다코딩 유튜브_메인페이지 꾸미기 (0) | 2023.04.09 |
| [MBTI 테스트(3)] 판다코딩 유튜브_Bootstrap이란? 설치부터 부트스트랩 css 사용까지 (0) | 2023.04.09 |
| [MBTI 테스트(1)] 판다코딩 유튜브_ATOM 에디터 패키지 설치하기 > 실패 > replit으로 변경... (0) | 2023.04.09 |
