실검에 오르는 테스트 만들기!

김채운·2021년 11월 17일
0
post-thumbnail

Bootstrap이란?

🔍 Bootstrap은 트위터에서 시작된 jQuery 기반의 오픈 소스 웹 프레임워크로 모바일 우선으로 만들어져 반응협 웹을 개발할 때 사용하기 좋다.
Bootstrap을 사용하면 css의 여러 기능들을 가져다 편리하게 사용 가능하다.

Bootstrap 사용법

오늘의 css는 bootstrap을 사용해서 작성했다.
우선, Bootstrap 사이트에 들어가 Getstarted를 누르고 밑에 링크를 복사해 html 파일의 head안에 붙여넣어준다.
그럼 이제 사용준비는 끝!

 <a href="test.html" class="btn btn-warning mt-4">시작하기</a>

💁이런 button을 만들기 위해 Bootstrap에서 buuton을 search해서 코드를 가져왔다.
but, 우리는 저 버튼을 click해서 이동을 해야하기 때문에 button을 a 태그로 바꿔줬다.
💁 Bootstrap을 이용하면 적당한 margin 값도 가져다 사용할 수 있어서 일일히 계산할 필요가 없다. 위에 코드중 mt-4 로 class를 넣어줬는데, 이게 margin-top을 의미하고 4는 1.5rem( font-size가 16px이면, 24px) 크기를 나타낸다.
💁 또한 Bootstrap을 사용하면 굳이 따로 css를 작성하지 않아도 class 네임으로 css를 적용시킬 수 있다. ex) class="btn btn-warning mt-4"

그렇게 나온 메인 화면 ( index.html ) 👇

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

💁 화면의 구조는 flex를 사용해 잡아주었고, 화면을 유동적으로 보이게 하기 위해서 vh로 높이 값을 잡아주었다.

test.html

마찬가지로 Bootstrap을 사용해 input을 만들어줬다.

💁 여기서는 3가지 선택지중 하나를 골라야하기 때문에 type="radio"로 해줘서 하나를 선택하면 다른 것은 선택되지 못 하게 해줬다.

        <div class="btn-group mt-3" role="group" aria-label="Basic radio toggle button group">
                <input type="radio" class="btn-check yes" name="q1-btnradio" id="q1-btnradio1" autocomplete="off">
                <label class="btn btn-outline-primary" for="q1-btnradio1">Yes</label>

                <input type="radio" class="btn-check no" name="q1-btnradio" id="q1-btnradio2" autocomplete="off">
                <label class="btn btn-outline-danger" for="q1-btnradio2">No</label>

                <input type="radio" class="btn-check maybe" name="q1-btnradio" id="q1-btnradio3" autocomplete="off">
                <label class="btn btn-outline-success" for="q1-btnradio3">Maybe</label>
            </div>

SNS 공유하기

Add This 사이트를 이용했습니다.

  1. Add This 사이트에서 로그인을 하고 나면 Select a Tool이 나옵니다. 그럼 여기서 share buttons를 클릭하고

  1. line을 선택하고 들어가면 이렇게 창이 뜨는데 여기서 selected by you를 하면 내가 넣고 싶은 sns를 추가해서 넣어줄 수 있다.

  1. 그리고 나면 내 코드가 생성된다.

이 코드를 복사해서 이렇게 끝나는 body위에 적어줍니다.

    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6194afa9872310d3"></script>
</body>
  1. 이 inline 코드는 복사해서

내가 넣어주고 싶은 자리에 넣어준다.

<p>친구들도 테스트시키기</p>
        <!-- Go to www.addthis.com/dashboard to customize your tools -->
        <div class="addthis_inline_share_toolbox"></div>

👉 그럼 이렇게 배치가 돼서 화면에 나오게 되고, 이 버튼을 통해서 sns로 내 웹페이지를 공유할 수 있게 된다.

웹사이트에 광고 배너 넣기

Kakao addfit을 이용했습니다.

  1. Kakao addfit에 가입하고 광고관리 탭에 들어갑니다. 그리고 새매체를 클릭하고 여기에 매체명을 적고 내 웹페이지 URL을 입력한다.( netflify에서 호스팅 한 URL )


이렇게 매체 등록을 합니다.

그럼 이렇게 심사대기가 뜹니다.

심사대기가 끝나고 나면 👇 이렇게 내 웹페이지에 광고배너가 뜬다.

이렇게 html과 css를 만들고 이제 netlify 사이트를 통해 사이트를 배포해본다. 👉

netlify를 통한 사이트 무료 배포

netlify란?

WebProject를 만들고 배포할 때 더욱 쉽게 할 수 있도록 도와주는 사이트다.
배포방법도 쉽지만, 변경사항들도 자동으로 적용해줘서 웹사이트의 유지보수도 용이하게 도와준다.

  1. netlify 가입하고 sites로 들어간다.

  1. 폴더를 점선 안에 떨준다

  1. 그럼 이렇게 내 페이지가 netlify에서 할당해준 서버에 올라갔고, 이 주소에 내 웹사이트가 배포된 것입니다. 저는 도메인을 구입했기 때문에, domain으로 구입한 이름으로 주소가 만들어졌습니다.

도메인 구매하는 방법

가비아 👈 이 사이트를 통해서 도메인을 구매했습니다.

  1. 입력창에 원하는 도메인 이름을 입력하고

  1. 이렇게 가격이 나오면 맘에 드는 가격의 사이트를 선택 후 구매하면 된다.

  1. 승인이 나면 My가비아에 이렇게 내 도메인이 나온다.

  1. netflify로 가서 Domain Setting을 클릭하고 Build & Deploy탭에 들어가 내가 구매한 Domain으로 변경 해준다.

  2. Domain manegement에 들어가서 이런 문구가 나오면 기다렸다가,

  1. 이 문구가 뜨면 클릭해서


내 name server를 확인한다.

도메인을 구입할 때 가비아 등록 도메인으로 구입했다면 가비아 네임서버가 설정되어 있는데, 이걸 지우고 netlify에서 받은 name server로 바꿔서 넣어준다.


netflify에 내 도메인 주소가 이렇게 초록색으로 바뀌었다면 도메인 연결에 성공한거다.

이제 실검에 오르기 위한 검색엔진 최적화가 필요하다!

SEO (검색엔지 최적화)

검색엔진 최적화란, 유저의 의도나 니즈에 맞춰 웹페이지를 제작하고, 그 웹페이지가 검색결과 페이지에 잘 노출 될 수 있도록 웹페이지의 태그나 구조를 개선하여 유저의 유입을 늘리게 하는 것이다.

네이버서치어드바이저 사이트를 이용했다.

  1. 로그인을 하고 웹마스터도구 탭을 클릭한다.

  2. 내 사이트의 도메인 주소를 입력해준다. www.zzincoolzzin.shop 그리고 추가!

  3. 그럼 HTML 파일 다운받는 옵션과, HTML 메타태그 옵션 2개가 뜬다. 난 meta 태그를 복사해 head태그에 넣는 방식을 선택!

  4. 자동 등록 방지 문자 입력 하고 소유확인 하고 나면 등록이 완료된다!

그럼 내 도메인을 가진 실검에 올라가는 웹사이트가 완성이 된다!!

근데 이렇게 했다고 내 사이트가 상단으로 올라가거나 실검에 올라가거나 하지는 않다. 검색엔진에 최적화 된 사이트를 만들고자 한다면, 사이트에 description을 추가하거나 세세하게 더 많은 부분을 신경써서 만들어야 한다. 그리고 역링크로서 다른 사이트에서 내 사이트를 많이 언급하는 형식이 되어야 내 사이트가 상단으로 올라가게 된다. 그러니까 내적으로 내 태그가 시멘틱하고 완벽하다고 해서 실검에 오르는 사이트가 되진 않는다. 유저의 의도에 맞춰진 사이트를 만든다는 의도를 가지고 있기 때문에 그만큼 유저의 유입이 많고 많이 언급되고 내 사이트가 공유가 되어야 상단에 위치하는 사이트가 만들어진다.

0개의 댓글