덕담 공유 코딩 만들기

6072 단어 CSShtmlCSS

덕담 공유 웹페이지 만들기

이번에 스파르타코딩클럽에서 설 무료강의로 덕담 공유 페이지 만들기 강좌가 있어서 맛보기 겸해서 수강하게 되었다. 가장 기본적인 HTML과 CSS코딩만 가지고 만들 수 있어서 프론트엔드에 관심있는 취준생에게는 좋은 강좌라고 생각한다.
이번 목표는 배포까지 하는 과정을 이해하는데에 의미를 두었다.

VS Code 프로그램으로 코딩

HTML body구조

<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>

크게 div구조로 4개의 구조로 클래스명으로 background, title, box, btn 으로 만들었다

(1) background클래스 CSS

.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;
}

이미지는 강좌에서 제공하는 이미지로 모바일 환경 기준으로 짤리지 않도록 viewpoint 너비,높이의 100%로 잡아주고 가운데 정렬하였다.

(2) title클래스 CSS

.title {
    color: #3f3732;

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

    padding-top: 5vh;
}

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

    margin-bottom: 16px;
}

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

.title > p > span {
    font-size: 20px;
    font-weight: bold;
}


이 부분의 CSS로 여기서 h1태그와 p태그로 나눠서 따로 적용을 하였고
글을 쓸때마다 증가된 갯수를 카운트 하기위해 span태그와 속성을 따로 줘서 사용하였다.

(3)box클래스 CSS

.box > img {
    width: 70px;

    position: absolute;
    bottom: 50%;
    left: 50%;
}


가운데에 뿌려주는 이미지 공간으로 자유로운 배치를 위해 position:absolute; 속성을 주었다.

(4) btn클래스 CSS

.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);
}

덕담 남기기 버튼의 CSS 속성으로 배경기준 하단 고정된 위치에 가운데 정렬로 위치하고 마우스를 올렸을 때 손가락 모양의 커서도 같이 표현하였다.

하여 Javascript와 폰트 CSS까지 추가하고 강좌에서 미리 만들어 놓은 AWS를 통해 배포하면 다음과 같은 페이지가 완성된다.

https://deokdam.spartacodingclub.kr/PceF0ZBHIBrP/index.html
(덕담갯수가 3,6,9,...로 증가되면 background에 호랑이 그림이 바뀌는 숨은 javascript코드도 같이 있다)

List vs Tuple
피보나치 (메모이제이션)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage