본문 바로가기
스파르타/웹개발

22.02.03 <덕담 공유 코딩 패키지> '덕담 하나 주면 안 잡아먹지!' 만들기

by h.단디 2022. 2. 4.

 

 

 

배포 URL https://deokdam.spartacodingclub.kr/jbDiNz7ygYeQ/index.html

 

단디 님의 덕담 페이지

덕담 한마디 남겨주세요!

deokdam.spartacodingclub.kr

 

 

 

 

 

 

 

 

 

완성코드

<!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">
    <title>덕담 하나 주면 안 잡아먹지!</title>

    <meta property="og:title" content="단디 님의 덕담 페이지"/> 
    <meta property="og:description" content="덕담 한마디 남겨주세요!"/>
    <meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/ogimage.png"/>
    <style>
        @font-face {
            font-family: 'Cafe24Ssurround';
            src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
        }
        
        * {
            font-family: 'Cafe24Ssurround';
        }

        .background {
            width : 100vw;
            height: 100vh;

            max-width :450px;

            background-image: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png');
            background-position: center;
            background-size: cover;

            margin : auto;
        }

        body, h1, p {
            margin:0;
        }

        .title {
            color : #3f3732;

            display : flex;                       
            flex-direction : column;              
            justify-content : center;
            align-items : center;

            padding-top: 5vh;    //보는 사람 핸드폰 의 5%
        }

        .title > h1 {
            font-size : 22px;
            
            background-color: white;
            padding : 8px 16px;
            border-radius: 16px;

            margin-bottom: :16px;
        }

        .title > p {
            font-size:18px;
            margin-top: :16px;
        }

        .title>p>span {
            font-size: 22px;
        }

        .btn{
            background-color: #3f3732;
            color : white;

            width : 300px;
            height: 50px;
            border-radius: 10px;

            font-size: 18px;

            display : flex;                       
            flex-direction : column;              
            justify-content : center;
            align-items : center;

            cursor: pointer;

            position:fixed;
            bottom : 16px;
            left : calc(50% - 150px);

            
        }

        .box > img {
            width:70px;
            position : absolute;
            bottom : 50%;
            left : 20%;

        }

    </style>

    <script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script> 
    <script> 
        let mycode = 'b8142b99c9e9fb97d64d962ab1a26c3f'; 
    </script>

</head>
<body>
    <div class = "background">
        <div class="title">
            <h1>덕담 하나 주면 안 잡아먹지!</h1>
            <p>단디 님이 받은 덕담 : <span>2개</span></p>
        </div>
        <div class = "box">
        </div>
        <div class ="btn"> 바구니에 덕담 남기기</div>
    </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

새롭게 배운 부분

 

 

  • 가운데 정렬
display : flex;                       
flex-direction : column;                //row 도 가능 (가로로)
justify-content : center;
align-items : center;
            
 //가운데 정렬 - 위 4줄이 그냥 세트라고 생각하면 됨.

 

  • 사이즈 조정
width : 100vw;
height: 100vh;          //보는 사람 휴대폰 화면에 100% (너비 vw, 높이 vh)맞게

max-width :450px;       //위 코드까지만 했을 때, PC모드로 보면 이미지가 너무 커짐. 그걸 막기 위해 최대 너비 설정하는 것.

padding-top: 5vh        //이건 5%!

 

 

  • 기본 여백 제거
body, h1, p {
            margin:0;
        }
        
// 기본적으로 들어가는 여백들을 제거하기 위함. 휴대폰 액정에 꽉 찰 수 있도록.

 

  • 버튼 관련 - 포지션 고정, 마우스 커서 반응
cursor: pointer;                         //PC모드에서 버튼 위로 커서 가져가면 손가락 모양으로 바뀜

            position:fixed;              //배경 이미지 이동과 상관없이 버튼 위치 고정
            bottom : 16px;
            left : calc(50% - 150px);    //중간에 오도록 하는건데.. 사실 이해 못했음 구글링해봐야함

 

  • 아이콘 랜덤위치에 붙이기
.box > img {
            width:70px;
            position : absolute;       //구글링해보니 '부모 요소 중 가낭 가까운 부모를 기준으로 위치를 설정한다'->그래서 랜덤한 위치로 붙는듯!
            bottom : 50%;
            left : 20%;

        }

 

  •  og태그
 <meta property="og:title" content="단디 님의 덕담 페이지"/> 
 <meta property="og:description" content="덕담 한마디 남겨주세요!"/>
 <meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/ogimage.png"/>
 
 // 카톡, 페북, 블로그 등에 공유할 때 필요한 'og 태그'

 

 

  • 모바일 화면으로 보는 법
개발자 도구 > 세로점3개 > dock side 첫번째꺼 (undock into separate window)
>  ctrl +shift + M (모바일 화면 모양 아이콘 : toggle device toolbar)


개발자도구 닫으면 다시 PC모드가 되므로 작업하는 동안은 개발자도구 최소화시켜서 켜둘것.

 

 

'스파르타 > 웹개발' 카테고리의 다른 글

22.02.04 POST & GET 연습 <모두의 책리뷰> / PyCharm에 JQuery 최신버전 설치하기  (0) 2022.02.06
22.02.04 서버와 클라이언트 개념, Python Library (flask, bs4, requests, pymongo), 기본 폴더 구조 세팅, GET & POST  (0) 2022.02.06
3주차 개발일지  (0) 2022.02.02
22.02.02 <3주차 숙제> 지니 뮤직 크롤링하기  (0) 2022.02.02
22.02.02 DB개괄, pymongo로 DB 조작하기, 웹스크래핑 결과 이용하기  (0) 2022.02.02

관련글

티스토리툴바