📝
나의 MBIT(My Best IT personalities) Page 만들기!/
🧚
003. 결과페이지 만들기
🧚

003. 결과페이지 만들기

1. 화면 레이아웃 구성하기1.1 우리가 만들 화면1.2 화면 나누기2. HTML2.1 기본 구조2.2 태그 입력하기2.3 id, class 입력하기2.4 콘텐츠 넣기2.4.1 결과2.4.2 공유2.4.1 버튼2.4.1 로고3. CSS 적용하기3.1 CSS 파일 만들기3.2 스타일 적용하기3.2.1 기본 설정3.2.2 결과3.2.3 SNS 공유3.2.4 버튼3.2.5 로고3.3 실행화면4. 기능 추가하기4.1 js 파일 만들기4.2 Open graph(오픈 그래프, og 태그) 설정하기4.3 URL 복사하기4.4 페이스북 공유하기4.5 카카오톡 공유하기4.5.1 카카오 API 사용하기4.5.2 SDK 포함 및 초기화하기4.5.3 기능 추가하기5. 전체 코드5.1 result.html5.2 result.css5.3 result.js6. Update된 최종 Code (UI 업데이트)

1. 화면 레이아웃 구성하기

1.1 우리가 만들 화면

notion imagenotion image
 

1.2 화면 나누기

화면 구성을 아래와 같이 나눕니다.
notion imagenotion image
 
 

2. HTML

2.1 기본 구조

결과페이지를 만들기 위해 result.html 파일을 생성합니다. 기본 구조는 앞서 만들었던 메인페이지 및 설문페이지와 동일합니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 유형찾기</title>
</head>
<body>
    
</body>
</html>
 

2.2 태그 입력하기

콘텐츠들을 넣을 section 과 콘텐츠들을 감쌀 div 하나, 그리고 실제 콘텐츠들을 넣을 div 4개로 구성됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 유형찾기</title>
</head>
<body>
    <section>
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>
</body>
</html>
 

2.3 id, class 입력하기

CSS 적용을 위해 id와 class명을 각 태그에 입력합니다.
<section id="main_contents">
   <div class="wrapper">
       <div class="result"></div>
       <div class="share"></div>
       <div class="buttons"></div>
       <div class="weniv"></div>
   </div>
</section>
 

2.4 콘텐츠 넣기

2.4.1 결과

테스트 결과는 개발 유형과 함께 이미지로 구성되어 있으며 <div class="result"></div> 안에 배치합니다. 개발 유형은 h1 태그, 이미지는 img 태그를 사용합니다.
<div class="result">
    <div class="titles">
        <h1>프론트엔드 개발자</h1>
    </div>
    <div class="result_img">
        <img src="img/frontend.png" alt="frontend">
    </div>
</div>
 

2.4.2 공유

테스트 결과를 공유하기 위해 3개의 공유 버튼을 만들어 줍니다. "URL 복사하기", "Facebook 공유하기", 그리고 "카카오톡 공유하기" 입니다. 3개의 버튼을 각 div 안에 button 태그를 사용하여 넣습니다.
<div class="share">
    <div class="url">
        <button class="copy_btn" type="button">URL 복사하기</button>
    </div>
    <div class="facebook">
        <button class="facebook_share" type="button">Facebook 공유하기</button>
    </div>
    <div class="kakao">
        <button class="kakao_share" type="button">카카오톡 공유하기</button>
    </div>
</div>
 

2.4.1 버튼

공유 버튼 하단에는 3개의 또 다른 버튼들이 있습니다. 이 버튼들은 ul 과 li 를 사용하여 배치하겠습니다.
각 li 안에는 문구를 넣어줄 h3 태그와 버튼에 링크를 연결시킬 a 태그를 배치합니다. 그리고 a 태그 안에는 button 태그를 통해 버튼을 만듭니다.
<div class="buttons">
    <ul>
        <li>
            <h3>...이건 내가 아니야... 잘못된게 분명해!</h3>
            <a href="#">
                <button type="button">테스트 다시 하기</button>
            </a>
        </li>
        <li>
            <h3>다른 사람들은 어떤 유형일까?</h3>
            <a href="#">
                <button type="button">다른 결과 알아보기</button>
            </a>
        </li>
        <li>
            <h3>이런 테스트는 도대체 누가 만든거야? ^0^;;</h3>
            <a href="#">
                <button type="button">제주코딩베이스캠프</button>
            </a>
        </li>
    </ul>
</div>
 
 

2.4.1 로고

결과페이지에서도 빠질 수 없는 위니브 로고를 배치합니다. 이전에 해왔던 방법과 마찬가지로 a 태그 안에 img 태그를 사용하여 위니브 로고 이미지를 넣어줍니다. 그리고 이미지 하단에는 p 태그를 사용하여 저작권 문구를 넣습니다.
<div class="weniv">
    <a href="http://www.paullab.co.kr">
        <img src="img/weniv_logo_purple.png" alt="weniv">
    </a>
    <p>
        ※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 위니브에 있습니다.<br>
        수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
    </p>
</div>
 
💡
실제 여러분의 테스트 페이지를 제작할 때는 로고와 문구 등을 수정하여 제작해 보시길 바랍니다.
 

3. CSS 적용하기

3.1 CSS 파일 만들기

결과페이지를 꾸며주기 위한 result.css 파일을 css 폴더 내에 만듭니다. 앞서 만들었던 reset.css 와 result.css 파일을 result.html 에 아래와 같이 적용시킵니다.
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/result.css">
 

3.2 스타일 적용하기

3.2.1 기본 설정

이전 챕터에서 기본 스타일 설정을 했던 것과 같이 @font-face 를 통해 폰트를 적용합니다.
@font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NEXON Lv1 Gothic OTF";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
}
 
결과페이지의 배경색, 글자색, 그리고 기본 폰트 설정을 아래와 같이 합니다.
body {
    background-color: #FAF1BE;
    color: #000;
    font-family: "NEXON Lv1 Gothic OTF";
}
 
모든 콘텐츠들을 담고 있는 #main_contents 의 스타일을 설정합니다. 우선 display 를 flex로 설정하고, justify-content 를 center로 설정하여 콘텐츠들을 중앙으로 배치합니다.
width와 height는 모두 100%로 설정합니다. 그리고 margin-top 을 통해 위에 100px만큼의 여백을 만들어 줍니다.
#main_contents {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}
 
콘텐츠를 다시 한 번 감싸주는 <div class="wrapper"></div> 를 display 를 flex로 설정합니다. 그리고 flex-direction 속성을 column으로 설정하여 요소들의 배치 방향을 수직으로 변경시킵니다.
width 와 height 를 모두 100%로 설정하고 max-width를 사용하여 600px 만큼의 최대 너비를 설정합니다.
#main_contents .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 50px;
}
 

3.2.2 결과

테스트 결과로 나온 개발 유형과 이미지를 중앙 정렬시킵니다. display 를 flex로 설정하고 flex-direction 을 column으로 설정하여 요소들을 수직으로 배치합니다. 그리고 align-itmes 를 center로 설정하여 콘텐츠들이 중앙으로 오게 합니다.
.result {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
결과로 나온 개발 유형은 폰트 사이즈와 글꼴을 변경시켜 강조합니다.
.result h1 {
    font-size: 50px;
    font-family: "GmarketSansBold";
}
 
결과 이미지를 감싼 div 의 widht 와 height 를 각각 300px, 324px로 설정합니다. img 태그의 width 와 height 는 모두 100%로 설정하여 앞서 설정한 div 의 너비와 높이만큼 차지하도록 합니다.
.result_img {
    width: 300px;
    height: 324px;
}

.result_img img {
    width: 100%;
    height: 100%;
}
 

3.2.3 SNS 공유

이제 테스트 결과를 공유할 수 있는 버튼들의 스타일을 설정합시다. 공유 버튼뿐만 아니라 3.2.4 버튼에서 지정할 모든 버튼들의 기본 스타일은 모두 같기 때문에 button 태그의 스타일 설정을 먼저 하겠습니다.
아래 코드와 같이 글꼴, 폰트 사이즈, 너비와 높이 등 스타일을 설정합니다.
button {
    font-family: "NEXON Lv1 Gothic OTF";
    font-size: 20px;
    font-weight: bold;
    width: 400px;
    height: 50px;
    padding: 5px;
    border-style: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    color: #000;
}
 
이어서 버튼에 마우스 커서를 가져갔을 때의 스타일도 함께 설정합니다.
button:hover {
    text-decoration: underline;
}
 
이제 공유 버튼들을 감싼 div 의 스타일을 설정합니다. padding-bottom 과 margin-bottom 을 각각 20px, 50px로 설정하여 하단에 여백을 줍니다.
또한 하단 다른 버튼들과 구분을 주기 위해 border-bottom 을 사용하여 구분선을 넣습니다.
.share {
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 3px solid #ea7e7c;
}
여기서 padding-bottom 은 구분선의 위쪽 여백을, margin-bottom 은 구분선의 아래 여백을 설정합니다.
 
각 버튼들은 margin-bottom 을 사용하여 30px만큼의 여백을 줍니다.
.share button {
    margin-bottom: 30px;
}
 
"Facebook 공유하기" 버튼은 페이스북의 색상(#3B5998)을 가져와 배경색으로 지정하고 글자색은 흰색으로 설정합니다.
.facebook_share {
    background-color: #3b5998;
    color: #fff;
}
 
"카카오톡 공유하기" 버튼도 마찬가지로 카카오톡의 색상(#F1D900)을 가져와 배경색으로 지정합니다. 이때 글자색은 변경하지 않습니다.
.kakao_share {
    background-color: #f1d900;
}
 

3.2.4 버튼

3개의 버튼을 감산 div 의 padding-bottom 을 50px로 설정하여 아래 로고 이미지와 간격을 줍니다.
.buttons {
    padding-bottom: 50px;
}
 
각 버튼 위 문구의 padding-bottom 을 20px로 설정하여 아래 버튼과 간격을 줍니다.
.buttons h3 {
    padding-bottom: 20px;
}
 
각 버튼들은 margin-bottom 을 사용하여 30px만큼 간격을 띄워줍니다.
.buttons button {
    margin-bottom: 30px;
}
 
3개의 버튼 중 마지막 버튼에만 배경색과 글자색을 변경시키고 싶습니다. 아래와 같은 코드를 작성하고 마지막 버튼에는 class="color" 를 추가합니다.
.color {
    background-color: #7F47DD;
    color: #fff;
}
<button class="color" type="button">제주코딩베이스캠프</button>
 

3.2.5 로고

display 를 flex로 설정하고 flex-direction 을 column으로 설정하여 요소들을 수직으로 배치시킵니다. 그리고 align-itmes 를 center로 설정하여 콘텐츠들이 중앙으로 오게 합니다.
.weniv {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
로고 이미지에 링크를 연결하고 크기를 조절하기 위해 이미지를 감싸고 있는 a 태그의 width 를 100px로 설정합니다. 그리고 img 의 width 와 height 를 각각 100%, auto로 설정합니다.
.weniv a {
    width: 100px;
}

.weniv img{
    width: 100%;
    height: auto;
}
 
로고 이미지 하단에 들어갈 문구는 아래와 같이 스타일을 설정합니다.
.weniv p {
    padding-top: 20px;
    font-size: 10px;
    text-align: center;
    line-height: 1.5;
}
 

3.3 실행화면

notion imagenotion image
 

4. 기능 추가하기

4.1 js 파일 만들기

공유 기능을 추가하기 위해 js 폴더 안에 result.js 파일을 생성합니다. 그리고 result.html 에 적용합니다. 아래 코드는 body 태그 내 제일 하단에 입력합니다.
<script type="text/javascript" src="js/result.js"></script>
 
그리고 jQuery를 사용하기 위해 result.html 에 아래와 같은 코드를 추가합니다. 이 코드는 head 안에 title 태그 위에 입력합니다.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 

4.2 Open graph(오픈 그래프, og 태그) 설정하기

공유기능을 추가하기 전에 og 태그 설정을 먼저 진행하겠습니다. open graph는 html의 메타 태그 중 하나로 공유한 링크의 제목, 설명, 미리보기 이미지(썸네일) 등을 설정할 수 있습니다.
우선 아래와 같이 <head></head> 안에 메타 데이터를 입력합니다. 테스트 결과에 따라 이미지와 주소가 바뀌므로 image와 url의 content는 비워두고 result.js 에서 넣도록 하겠습니다.
<meta property="og:title" content="나의 개발 유형은?" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="나에게 꼭 맞는 개발 유형은 무엇일까?" />
 
💡
og:title - 웹사이트의 제목 og:image - 웹사이트의 미리보기 이미지(썸네일)로 이미지의 경로가 들어감 og:url - 웹사이트의 주소 og:description - 웹사이트의 설명
 
result.js 에서 아래와 같은 코드를 작성합니다. 현재 url을 변수 url 에 저장하고 결과 이미지 경로를 변수 img 에 정합니다. 그리고 meta 태그를 선택하고 content 속성값으로 url과 img를 삽입합니다.
$(function() {
    let url = window.location.href;
    let img = $('.result_img img').attr('src');

    $("meta[property='og\\:url']").attr("content", url);
    $("meta[property='og\\:image']").attr("content", img);
});
 

4.3 URL 복사하기

"URL 복사하기" 버튼을 클릭하면 현재 url이 클립보드에 복사되는 기능을 추가해야 합니다. 우선 버튼을 .querySelector() 로 선택하여 변수에 저장합니다.
const copyBtn = document.querySelector('.copy_btn');
 
현재 url이 클립보드에 복사되는 기능을 수행할 함수인 copyUrl() 을 선언합니다. 그리고 함수 내부에 url 이라는 변수를 생성하여 현재 url을 저장합니다.
function copyUrl() {
    let url = window.location.href;
}
 
url 을 클립보드에 저장하기 위해 임시로 input 태그를 생성하여 input 태그의 value 값에 url을 삽입합니다. input 태그를 .select() 함수로 선택하고 url이 들어있는 value 값을 복사합니다. 그리고 복사가 되면 임시로 만들었던 input 태그를 제거합니다.
마지막으로 alert() 를 사용하여 "URL이 복사되었습니다"라는 문구가 담겨있는 경고창이 나오게 하여 url 복사가 완료되었음을 알립니다.
function copyUrl() {
    let tmp = document.createElement('input');
    let url = location.href;

    document.body.appendChild(tmp);
    tmp.value = url;
    tmp.select();
	  document.execCommand("copy");
    document.body.removeChild(tmp);
    
	  alert("URL이 복사되었습니다"); 
}
 
버튼을 클릭하면 copyUrl() 함수가 실행되도록 이벤트를 추가합니다.
copyBtn.addEventListener('click', copyUrl);
 

4.4 페이스북 공유하기

"Facebook 공유하기" 버튼을 클릭하면 페이스북으로 공유되도록 하기 위해 해당 버튼를 선택하여 변수 facebookShare 에 저장합니다.
const facebookShare = document.querySelector('.facebook_share');
 
sharefacebook() 함수를 정의하고 그 안에 현재 url을 변수 url 에 저장합니다.
페이스북 공유하기 스크립트인 'http://www.facebook.com/sharer/sharer.php?u=' 를 변수 facebook 에 저장합니다. 그리고 facebook 과 url 을 합쳐서 변수 link 에 저장한 후 window.open(link) 를 통해 해당 링크를 열어줍니다.
function sharefacebook() {
    let url = window.location.href;
    let facebook = 'http://www.facebook.com/sharer/sharer.php?u=';
    let link = facebook + url;
    window.open(link);
}
 
버튼을 클릭하면 sharefacebook() 함수가 실행되도록 이벤트를 추가합니다.
facebookShare.addEventListener('click', sharefacebook);
 

4.5 카카오톡 공유하기

💡
카카오톡 공유하기 기능은 URL이 있어야 테스트가 가능하기 때문에 백엔드 실습 이후에 진행하는 것을 권장합니다.
 

4.5.1 카카오 API 사용하기

카카오톡 공유하기는 이전 공유하기 기능과 달리 "카카오 API"를 사용해야 합니다. 카카오톡 링크 공유하기 기능을 추가하기 위해서는 Kakao Developers(https://developers.kakao.com) 에서 제공하는 Javascript SDK를 사용해야 합니다.
JavasSript 키가 있어야 카카오 API 사용이 가능하기 때문에 로그인 후 [내 애플리케이션]에서 애플리케이션을 추가하도록 합니다.
 
notion imagenotion image
 
애플리케이션을 추가하면 앱 키가 부여된 것을 확인할 수 있습니다. 우리는 "JavaScript 키"를 사용할 것입니다. (키는 사용자마다 다르게 부여됩니다.)
notion imagenotion image
 
[플랫폼] 으로 들어가면 자신의 사이트 도메인을 추가할 수 있습니다. "Web 플랫폼 등록"을 눌러 사이트 도메인을 추가합니다.
notion imagenotion image
 
Kakao Developers 에서 [문서] - [메시지] 로 들어가면 API 사용법이 상세하게 설명되어 있습니다. 여기서 우리는 Javascript를 사용할 것이니 [JavaScript] 탭으로 이동합니다.
아래로 내리면 "카카오링크 API로 보내기" 방법이 설명되어 있습니다. 이곳에는 두가지 방법을 설명을 하지만 우리는 서비스 웹페이지에서 자체적으로 띄운 공유 버튼 클릭 시 해당 함수를 호출해 메시지 보내기 요청을 하도록 만든 Kakao.Link.sendDefault 를 사용합니다.
아래와 같이 제공되는 sample 코드를 사용하도록 하겠습니다.
Kakao.Link.createDefaultButton({
  container: '#CONTAINER_ID',
  objectType: 'feed',
  content: {
    title: '디저트 사진',
    description: '아메리카노, 빵, 케익',
    imageUrl:
      'http://mud-kage.kakao.co.kr/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      androidExecParams: 'test',
    },
  },
  social: {
    likeCount: 10,
    commentCount: 20,
    sharedCount: 30,
  },
  buttons: [
    {
      title: '웹으로 이동',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '앱으로 이동',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
  ]
});
 

4.5.2 SDK 포함 및 초기화하기

웹 페이지에 JavaScript SDK를 포함하기 위해 아래 코드를 result.html 에 추가합니다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
 
SDK 초기화를 위해 함수를 호출하고 초기화가 잘 되었는지 확인합니다. 이때 JavaScript 키는 자신의 앱 키를 입력합니다.
Kakao.init('JavaScript 키 입력');
Kakao.isInitialized();
Kakao.isInitialized() 는 초기화가 잘 되었는지 확인 후 주석처리합니다.
 

4.5.3 기능 추가하기

"카카오톡 공유하기" 버튼을 클릭하면 카카오톡 메시지로 링크를 공유할 수 있도록 버튼을 선택하고 변수 kakaoShare 에 저장합니다.
const kakaoShare = document.querySelector('.kakao_share');
 
sendLink() 함수를 선언하고 4.5.1에서 sample 코드를 가져온 후 아래와 같이 내용을 수정합니다. 
function sendLink() {
  Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '나의 개발 유형은?',
        description: '나에게 꼭 맞는 개발 유형을 알아보자!!',
        imageUrl:
          '웹페이지 url 입력',
        link: {
          mobileWebUrl: '웹페이지 url 입력',
          webUrl: '웹페이지 url 입력',
          },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '결과 보러가기',
          link: {
            webUrl: '웹페이지 url 입력',
            mobileWebUrl: '웹페이지 url 입력',
          },
        },
        {
          title: '테스트 하러가기',
          link: {
            webUrl: '웹페이지 url 입력',
            mobileWebUrl: '웹페이지 url 입력',
          },
        },
      ],
  });
}
 
"결과 보러가기" 버튼을 클릭하면 결과페이지로 이동될 수 있도록 result_url 이라는 변수를 생성하고 현재 url을 저장합니다. 그리고 '결과 보러가기'의 아래 link 값을 result_url로 변경합니다.
function sendLink() {
  let result_url = window.location.href;
  Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '나의 개발 유형은?',
        description: '나에게 꼭 맞는 개발 유형을 알아보자!!',
        imageUrl:
          '웹페이지 url 입력',
        link: {
          mobileWebUrl: '웹페이지 url 입력',
          webUrl: '웹페이지 url 입력',
          },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '결과 보러가기',
          link: {
            webUrl: result_url,
            mobileWebUrl: result_url,
          },
        },
        {
          title: '테스트 하러가기',
          link: {
            webUrl: '웹페이지 url 입력',
            mobileWebUrl: '웹페이지 url 입력',
          },
        },
      ],
  });
}
 
"카카오톡 공유하기" 버튼을 클릭하면 sendLink() 함수가 실행되도록 이벤트를 추가합니다.
kakaoShare.addEventListener('click', sendLink);
 

5. 전체 코드

5.1 result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="나의 개발 유형은?" />
    <meta property="og:image" content="" />
    <meta property="og:url" content="" />
    <meta property="og:description" content="나에게 꼭 맞는 개발 유형은 무엇일까?" />
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/result.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>나의 개발 유형찾기</title>
</head>
<body>
    <section id="main_contents">
        <div class="wrapper">
            <div class="result">
                <div class="titles">
                    <h1>프론트엔드 개발자</h1>
                </div>
                <div class="result_img">
                    <img src="img/frontend.png" alt="frontend">
                </div>
            </div>
            <div class="share">
                <div class="url">
                    <button class="copy_btn" type="button">URL 복사하기</button>
                </div>
                <div class="facebook">
                    <button class="facebook_share" type="button">Facebook 공유하기</button>
                </div>
                <div class="kakao">
                    <button class="kakao_share" type="button">카카오톡 공유하기</button>
                </div>
            </div>
            <div class="buttons">
                <ul>
                    <li>
                        <h3>...이건 내가 아니야... 잘못된게 분명해!</h3>
                        <a href="#">
                            <button type="button">테스트 다시 하기</button>
                        </a>
                    </li>
                    <li>
                        <h3>다른 사람들은 어떤 유형일까?</h3>
                        <a href="#">
                            <button type="button">다른 결과 알아보기</button>
                        </a>
                    </li>
                    <li>
                        <h3>이런 테스트는 도대체 누가 만든거야? ^0^;;</h3>
                        <a href="#">
                            <button class="color" type="button">제주코딩베이스캠프</button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="weniv">
                <a href="http://www.paullab.co.kr">
                    <img src="img/weniv_logo_purple.png" alt="weniv">
                </a>
                <p>
                    ※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 위니브에 있습니다.<br>
                    수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
                </p>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="js/result.js"></script>
</body>
</html>
 

5.2 result.css

@font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NEXON Lv1 Gothic OTF";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #FAF1BE;
    color: #000;
    font-family: "NEXON Lv1 Gothic OTF";
}

button {
    font-family: "NEXON Lv1 Gothic OTF";
    font-size: 20px;
    width: 400px;
    height: 50px;
    padding: 5px;
    border-style: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    color: #000;
}

button:hover {
    text-decoration: underline;
}

.color {
    background-color: #7F47DD;
    color: #fff;
}

#main_contents {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}

#main_contents .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 50px;
}

.result {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result h1 {
    font-size: 50px;
    font-family: "GmarketSansBold";
}

.result_img {
    width: 300px;
    height: 324px;
}

.result_img img {
    width: 100%;
    height: 100%;
}

.share {
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 3px solid #ea7e7c;
}

.share button {
    margin-bottom: 30px;
}

.facebook_share {
    background-color: #3b5998;
    color: #fff;
}

.kakao_share {
    background-color: #f1d900;
}

.buttons {
    padding-bottom: 50px;
}

.buttons h3 {
    padding-bottom: 20px;
}

.buttons button {
    margin-bottom: 30px;
}

.weniv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weniv a {
    width: 100px;
}

.weniv img{
    width: 100%;
    height: auto;
}

.weniv p {
    padding-top: 20px;
    font-size: 10px;
    text-align: center;
    line-height: 1.5;
}
 

5.3 result.js

const facebookShare = document.querySelector('.facebook_share');
const kakaoShare = document.querySelector('.kakao_share');
const copyBtn = document.querySelector('.copy_btn');

$(function() {
    let url = window.location.href;
    let img = $('.result_img img').attr('src');
    $("meta[property='og\\:url']").attr("content", url);
    $("meta[property='og\\:image']").attr("content", img);
});

Kakao.init('JavaScript 키를 입력하세요');
// Kakao.isInitialized();

function sendLink() {
    let result_url = window.location.href;
    Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
            title: '나의 개발 유형은?',
            description: '나에게 꼭 맞는 개발 유형을 알아보자!!',
            imageUrl: 'https://mbit.weniv.co.kr/static/img/mbit_thumbnail.png',
            link: {
                mobileWebUrl: 'https://mbit.weniv.co.kr',
                webUrl: 'https://mbit.weniv.co.kr',
            },
        },
        social: {
            likeCount: 286,
            commentCount: 45,
            sharedCount: 845,
        },
        buttons: [
        {
            title: '결과 보러가기',
            link: {
                webUrl: result_url,
                mobileWebUrl: result_url,
            },
        },
        {
            title: '테스트 하러가기',
            link: {
                webUrl: 'https://mbit.weniv.co.kr',
                mobileWebUrl: 'https://mbit.weniv.co.kr',
            },
        },
        ],
    });
}

function sharefacebook() {
    let url = window.location.href;
    let facebook = 'http://www.facebook.com/sharer/sharer.php?u=';
    let link = facebook + url;
    window.open(link);
}

function copyUrl() {
    let url = window.location.href;
    let tmp = document.createElement('input');
    
    document.body.appendChild(tmp);
    tmp.value = url;
    tmp.select();
	  document.execCommand("copy");
    document.body.removeChild(tmp);
    
	  alert("URL이 복사되었습니다");
}

facebookShare.addEventListener('click', sharefacebook);
kakaoShare.addEventListener('click', sendLink);
copyBtn.addEventListener('click', copyUrl);
 

6. Update된 최종 Code (UI 업데이트)

  1. result.html
      2. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta property="og:title" content="나의 개발 유형은?" />
    <meta property="og:image" content="" />
    <meta property="og:url" content="" />
    <meta property="og:description" content="나에게 꼭 맞는 개발 유형은 무엇일까?" />

    <title>나의 개발 유형 찾기</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/result.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <section id="main_contents">
        <div class="wrapper">
            <div class="result">
                <div class="titles">
                    <h3>보이지 않는 것을 보는 당신은!</h3>
                    <h1>프론트엔드 개발자</h1>
                </div>
                <div class="result_img">
                    <img src="img/프론트엔드.png" alt="frontend">
                </div>
            </div>
            <div class="result_explains">
                <div class="explain">
                    <h3 class="title">나와 맞는 개발 유형은 백엔드 개발자?!</h3>
                    <ul>
                        <li>hello world</li>
                        <li>hello world</li>
                        <li>hello world</li>
                    </ul>
                </div>
                <div class="explain">
                    <h3 class="title">나와 맞는 개발 유형은 백엔드 개발자?!</h3>
                    <ul>
                        <li>hello world</li>
                        <li>hello world</li>
                        <li>hello world</li>
                    </ul>
                </div>
                <div class="explain">
                    <h3 class="title">나와 맞는 개발 유형은 백엔드 개발자?!</h3>
                    <ul>
                        <li>hello world</li>
                        <li>hello world</li>
                        <li>hello world</li>
                    </ul>
                </div>
            </div>
            <div class="lectures">
                <h3 class="title">강의 추천</h3>
                <ul>
                    <li>
                        <a href="#" target="_blank">
                            <img src="img/lec_web_fullstack.png" alt="제주코딩베이스캠프 기본강좌">
                            <h3>Python 부트캠프</h3>
                            <button type="button">강의 보러가기</button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="share">
                <div class="url">
                    <button class="copy_btn" type="button">URL 복사하기</button>
                </div>
                <div class="facebook">
                    <button class="facebook_share" type="button">Facebook 공유하기</button>
                </div>
                <div class="kakao">
                    <button class="kakao_share" type="button">카카오톡 공유하기</button>
                </div>
            </div>
            <div class="buttons">
                <ul>
                    <li>
                        <h3>...이건 내가 아니야... 잘못된게 분명해!</h3>
                        <a href="#">
                            <button type="button">테스트 다시 하기</button>
                        </a>
                    </li>
                    <li>
                        <h3>다른 사람들은 어떤 유형일까?</h3>
                        <a href="#">
                            <button type="button">다른 결과 알아보기</button>
                        </a>
                    </li>
                    <li>
                        <h3>이런 테스트는 도대체 누가 만든거야? ^0^;;</h3>
                        <a href="">
                            <button class="color" type="button">제주코딩베이스캠프</button>
                        </a>
                    </li>
                    <li>
                        <h3>나는 며칠 동안 훈련해야 전문가가 될까?</h3>
                        <a href="">
                            <button type="button">1만 시간의 법칙</button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="weniv">
                <div class="weniv">
                    <a href="http://www.paullab.co.kr">
                        <img src="img/weniv_logo_black.png" alt="weniv">
                    </a>
                </div>
                <p>※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 위니브에 있습니다.<br>
                수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.</p>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="js/result.js"></script>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</body>
</html>
  1. css
      2. @font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NEXON Lv1 Gothic OTF";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #FAF1BE;
    color: #000;
    font-family: "NEXON Lv1 Gothic OTF";
}

button {
    font-family: "NEXON Lv1 Gothic OTF";
    font-size: 20px;
    width: 400px;
    height: 50px;
    padding: 5px;
    border-style: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: #fff;
    color: #000;
}

button:hover {
    text-decoration: underline;
}

#main_contents{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}

#main_contents .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 50px;
}

.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.result h1 {
    font-size: 50px;
    font-family: "GmarketSansBold";
}

.result h3 {
    font-size: 17px;
    padding-bottom: 15px;
}

.result_img {
    width: 300px;
    height: 324px;
}

.result_img img {
    width: 100%;
    height: 100%;
}

.result_explains {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    line-height: 1.5;
}

.result_explains .explain{
    width: 400px;
    margin-bottom: 30px;
}

.result_explains .title {
    font-family: "GmarketSansBold";
    font-size: 20px;
    text-align: center;
    border-top: 3px solid #EA7E7C;
    border-bottom: 3px solid #EA7E7C;
    padding: 10px 0;
    margin-bottom: 20px;
}

.result_explains ul {
    padding: 0 20px;
    list-style-type: disc;
}

.result_explains li {
    padding-bottom: 15px;
}

.lectures {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 3px solid #EA7E7C;
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.lectures .title {
    text-align: center;
    width: 400px;
    font-size: 30px;
    font-family: "GmarketSansBold";
    color: #EA7E7C;
    position: relative;
}

.lectures .title:before, .lectures .title:after{
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background-color: #EA7E7C;
    position: absolute;
}

.lectures .title:before{
    left: 0;
    top: 50%;
}

.lectures .title:after{
    right: 0;
    top: 50%;
}

.lectures p {
    padding: 50px 0;
    line-height: 1.5;
}

.lectures ul {
    width: 400px;
}

.lectures li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
}

.lectures a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.lectures a:hover img {
    transform: scale(1.05);
}

.lectures a:hover button {
    text-decoration: underline;
}

.lectures li img {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    transition: transform .5s;
}

.lectures li h3 {
    font-family: "GmarketSansBold";
    font-size: 17px;
    text-align: center;
    line-height: 1.5;
    padding: 0 10px 20px;
}

.lectures li button{
    background-color: #7F47DD;
    color: #fff;
}

.share {
    padding-bottom: 20px;
    margin-bottom: 50px;
    border-bottom: 3px solid #EA7E7C;
}

.share button {
    margin-bottom: 30px;
}

.facebook_share {
    background-color: #3b5998;
    color: #fff;
}

.kakao_share {
    background-color: #f1d900;
}

.buttons {
    padding-bottom: 50px;
}

.buttons h3 {
    padding-bottom: 20px;
}

.buttons button {
    margin-bottom: 30px;
}

.color {
    background-color: #7F47DD;
    color: #fff;
}

.weniv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weniv a {
    width: 100px;
}

.weniv img{
    width: 100%;
    height: auto;
}

.weniv p {
    padding-top: 20px;
    font-size: 10px;
    text-align: center;
    line-height: 1.5;
}
  1. javascript
      2. const copyBtn = document.querySelector('.copy_btn');
const facebookShare = document.querySelector('.facebook_share');

/////// 카카오 공유 코드 ////////

const kakaoShare = document.querySelector('.kakao_share');
Kakao.init('JavaScript 키를 입력하세요');
// Kakao.isInitialized();

function sendLink() {
    let result_url = window.location.href;
    Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
            title: '나의 개발 유형은?',
            description: '나에게 꼭 맞는 개발 유형을 알아보자!!',
            imageUrl: 'https://mbit.weniv.co.kr/static/img/mbit_thumbnail.png',
            link: {
                mobileWebUrl: 'https://mbit.weniv.co.kr',
                webUrl: 'https://mbit.weniv.co.kr',
            },
        },
        social: {
            likeCount: 286,
            commentCount: 45,
            sharedCount: 845,
        },
        buttons: [
        {
            title: '결과 보러가기',
            link: {
                webUrl: result_url,
                mobileWebUrl: result_url,
            },
        },
        {
            title: '테스트 하러가기',
            link: {
                webUrl: 'https://mbit.weniv.co.kr',
                mobileWebUrl: 'https://mbit.weniv.co.kr',
            },
        },
        ],
    });
}

/////// 카카오 공유 코드 끝 ////////

$(function(){
    let url = window.location.href;
    let img = $('.result_img img').attr('src');

    $("meta[property='og\\:url']").attr('content', url);
    $("meta[property='og\\:image']").attr('content', img);
});

function copyUrl(){
    let tmp = document.createElement('input');
    let url = location.href;

    document.body.appendChild(tmp);
    tmp.value = url;
    tmp.select();
	document.execCommand("copy");
    document.body.removeChild(tmp);
    
	alert("URL이 복사되었습니다"); 
}

function sharefacebook(){
    let url = window.location.href;
    let facebook = 'http://www.facebook.com/sharer/sharer.php?u=';
    let link = facebook + url;
    window.open(link);
}

copyBtn.addEventListener('click', copyUrl);
facebookShare.addEventListener('click', sharefacebook)

/////// 카카오 공유 코드 ////////

kakaoShare.addEventListener('click', sendLink)