쿨찐테스트 만들기

📍 학습 POINT

🦁 34만 유투버 조코딩님의 원데이 클래스

요즘 핫한 성격테스트, 직접 만들어 보고 도메인 연결하기!

HTML 구조도 생각보다 간단했으며,
CSS도 Bootstrap으로 제법 빠르게 완성시킬 수 있었다

🦁 완성된 내 쿨찐테스트 url
https://zealous-golick-1e018d.netlify.app/
( yes 2개 이상만 결과 페이지가 나오는 미완성 페이지이지만,,)

1. `HTML <header>`

🔗 <link>로 아래와 같은 내용을 연결시켜주었다

style.css 와 reset.css

구글 웹폰트

favicon
https://www.favicon-generator.org/

2. `HTML <body>`

<section class="landing">
    <h1>쿨찐 테스트</h1>
    <section class="mt-4">
        <p>자신은 절대 아니라고</p>
        <p>생각하는 쿨찐들!</p>
        <p>내가 설마 쿨찐은 아니겠지?</p>
    </section>
    <a href="test.html" type="button" class="btn btn-warning mt-4">시작하기</a>
</section>

<footer class="footer">
        <p>친구들도 테스트시키기</p>
         <div class="addthis"></div>  /* addthis */
         <div class="kakao-ad"></div>  /* adfit */
</footer>

📝 POINT

크게 section(파란색)과 footer(회색)로 나누어줌

버튼은 <a>에 button 타입 설정하여 다음 페이지로 연결

footer에 addthis를 통해 SNS공유기능 넣어주고, kakaoadfit을 통해 카카오광고까지 넣어보았다
📌 SNS 공유ㅣhttps://www.addthis.com/
📌 광고ㅣhttps://adfit.kakao.com/

3. `CSS`

📝 새로 알게된 점
배치는 전부 flex를 사용해서 크게 어려운 점은 없었기에
새로 알게 된 점만 간단히 정리해보았다

(1) min-height: 500px;

min-height를 주지 않으면 위와 같이 화면 길이가 작아지면
스크롤이 생기지 않고 한군데에 뭉쳐버리게 된다
최소 높이를 설정해주는 역할

(2) max-width

위 결과 이미지에 max-width값을 설정해주지 않으니, 화면이 커짐에 따라 그림이 너무 커진다
이를 방지하기 위해 최대 크기를 설정해준 것

📍 느낀점

학습 후 느낀점

이렇게 테스트를 만드는 것 이외에도 네이버 검색 결과 등장, SEO최적화 등과 같은 내용을 배웠지만 어려워서 내것으로 소화시키지 못해 아쉽다..

JavaScript까지 배우면 성격테스트를 내것으로 온전히 완성시켜보고 싶다\

Bootstrap을 처음 알았는데, 이것을 활용하면 정말 CSS로 디자인을 구현하는 시간을 놀랍게 단축시킬 수 있을 것 같았다. 버튼도 코드만 복붙하면 바로 디자인이 적용된다니..! 너무 신세계였다✨ 개발의 세계는 알수록 놀라워,,💛

앞으로 해야할 것

이호준 강사님은 이해가 가지 않는 코드가 있으면 필사를 해보신다고 한다. 직접 몇 번씩 쓰면 이해가 안될 수가 없다고 말씀해주셨다. 이해가 잘 가지 않는 내용은 캐릭터경진대회에서 받은 라이캣 코딩노트에 필사해봐야지📝💪

Author And Source

이 문제에 관하여(쿨찐테스트 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hye_rin/TILㅣ쿨찐테스트-만들기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

쿨찐테스트 만들기

📍 학습 POINT

1. HTML <header>

2. HTML <body>

3. CSS

📍 느낀점

Author And Source

좋은 웹페이지 즐겨찾기

1. `HTML <header>`

2. `HTML <body>`

3. `CSS`