[스파르타코딩클럽] #개발일지2

스파르타코딩클럽 2022. 1. 28. 08:03

2. result.html

이전포스팅에서 index.html을 구현해봤는데요. 오늘은 링크로 넘어와 결과를 보여주는 창을 구현해볼겁니다.

2022.01.28 - [스파르타코딩클럽] - [스파르타코딩클럽] #개발일지1

  <style>
        body {
            background-color: ivory;
            background-image: url('https://new-year.spartacodingclub.kr/images/pattern.png');
            background-position: 600px 100px;
            background-repeat: no-repeat;
        }

        * {
            font-family: 'Yeon Sung', cursive;
        }

        .rtan {
            width: 200px;
            height: 200px;

            border-radius: 200px;
            border: 3px solid darkred;

            box-shadow: 0px 0px 10px 0px darkred;

            background-color: darkred;
            display: block;

            margin: 80px auto 50px auto;

            color: white;
            text-align: center;
            font-size: 32px;
            background-size: cover;
            background-position: center;
            text-decoration-line: none;
            background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png');

        }

        .title {
            color: darkred;
            text-align: center;
            font-size: 32px;
        }

        .msg {
            color: darkred;
            text-align: center;
            font-size: 32px;
            line-height: 48px;
            display:none;
        }

        .btns {
            display: flex;
            justify-content: center;
            flex-direction: row;
        }

        .btn-back {
            width: 150px;
            height: 50px;

            color: darkred;
            border: 2px solid darkred;
            background-color: white;
            border-radius: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        .btn-share {
            width: 150px;
            height: 50px;

            color: white;
            border: 2px solid darkred;
            background-color: darkred;
            border-radius: 10px;
            font-size: 20px;
            cursor: pointer;
            margin-left: 10px;
        }

        @media screen and (max-width:700px) {
            body {
                background-position: 70px -70px;
                background-size: 500px;
            }

            .rtan {
                margin-top: 50px;
            }

            .msg {
                font-size: 24px;
                line-height: 36px;
                margin-bottom: 36px;
                padding: 10px;
                display:none;
            }

            .msg>br {
                display: none;
            }
        }
    </style>

저번 포스팅과 같이 주요 코드를 설명하겠습니다.

폰트 가져오는 방법

https://fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

들어가면 이런창이 나오는데 여기서 selected family에 있는 <link rel = "...>를 복사합니다.

<head>안에 넣습니다.

  * {font-family: 'Yeon Sung', cursive;}

스크롤바를 내리면 font-family속성이 있는데 이를 복사해 스타일에 지정해줍니다. 여기서 *는 모든코드에 지정할것임을 나타내는 표현입니다.

cursor:pointer 해당 부분에 커서를 갔다 댈 경우 손가락 모양으로 변경시키는 코드

    @media screen and (max-width:700px) {
            body {
                background-position: 70px -70px;
                background-size: 500px;
            }

            .rtan {
                margin-top: 50px;
            }

            .msg {
                font-size: 24px;
                line-height: 36px;
                margin-bottom: 36px;
                padding: 10px;
                display:none;
            }

            .msg>br {
                display: none;
            }
        }

이코드는 웹페이지의 사이즈가 줄어들었을 경우의 페이지 구현을 나타내는 스타일입니다. 페이지의 가로가 700px이하가 된다면 구현되는 코드부분들입니다.

<script>
        function back() {
            let url = window.location.href;
            let new_url = url.split('result.html')[0] + 'index1.html';
            window.location.href = new_url;
        }
        function share() {
            var t = document.createElement("textarea");
            document.body.appendChild(t);
            t.value = window.location.href;
            t.select();
            document.execCommand('copy');
            document.body.removeChild(t);
            alert('복사 완료!');
        }
    </script>

 <div class="btns">
        <button class="btn-back" onClick="back();">뒤로가기</button>
        <button class="btn-share" onClick="share();">공유하기</button>
    </div>

뒤로가기 버튼을 누르면 back()함수가 호출됩니다.

공유하기 버튼을 누르면 share()함수가 호출됩니다.

강의에서 자세한 코드내용보다 자바스크립트 작동 원리를 알려주었습니다.

자바스크립트는 <script>안에서 구현되며 백엔드라 하는 부분이라 할 수 있습니다.

위 페이지에서는 이미지링크별 텍스트는 다르지만 같은 페이지로 이동합니다. 이때 자바스크립트 부분이 작동하여 보여줄 텍스트를 선택한 이미지별로 다르게 보여주는 역할을 합니다. 또한 위에서 보는 코드와 같이 뒤로가기버튼을 눌렀을 경우 이전페이지로 넘어갈 수 있도록하고 공유하기를 눌렀을때 해당페이지의 주소를 복사할 수 있도록합니다.

'스파르타코딩클럽' 카테고리의 다른 글

[스파르타코딩클럽_앱개발종합반 4주차] 개발일지 #5 EXPO로 앱 개발하기 (0)	2022.02.22
[스파르타코딩클럽_앱개발종합반 3주차] 개발일지 #5 EXPO로 앱 개발하기 (0)	2022.02.10
[스파르타코딩클럽_앱개발종합반 2주차] 개발일지 #4 EXPO로 앱 개발하기 (0)	2022.02.02
[스파르타코딩클럽_앱개발 종합반] #개발일지3 (0)	2022.01.30
[스파르타코딩클럽] #개발일지1 (0)	2022.01.28

ABOUT ME

sseung sseung

'스파르타코딩클럽' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'스파르타코딩클럽' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바