커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
div 움직임
undefined주차
북마크
연*아
댓글
3
・
추천
0
・
조회수
19
조회수
19
답변 완료
스파르타 즉문즉답

타이핑이 시작되면 이렇게 div끼리 각각 간격이 정해지는데

스파르타 즉문즉답

타이핑효과가 끝나버리면

저 api로 가져온 서울 날씨 text가 다시 원래 자리로 올라가요


그래서 타이핑효과가 끝나버리면 간격이 줄었다 또 늘었다 해서

보기가 안 좋거든요

이런 경우는 어떻게 해야하나요?


html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <!--Black+Han+Sans 폰트-->
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Batang&family=Hahmlet&display=swap"
          rel="stylesheet">

    <!--외부 스타일 시트-->
    <link rel="stylesheet" href="./index.css">

    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">-->
    <link href="css/common.css" rel="stylesheet" type="text/css"
          media="screen and (min-width:0px) and (max-width:480px)">
    <title>Sua is free</title>
</head>

<body>
<!--슬라이더 시작-->
<div class="myslide">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./img/sua3.jpg"
                     class="d-block w-100"
                     alt="메인이미지1">
            </div>
            <div class="carousel-item">
                <img src="./img/sua2.jpg"
                     class="d-block w-100"
                     alt="메인이미지2">
            </div>
            <div class="carousel-item">
                <img src="./img/sua1.jpg"
                     class="d-block w-100"
                     alt="메인이미지3">
            </div>
        </div>
    </div>
</div>
<!--헤더 시작-->
<div class="mytitle">
    <p id="maintext"></p>
    <p id="temp"></p>
</div>
<!--슬라이더 끝-->
<!--헤더 끝-->

<!--about me 시작-->
<div class="myprofile">
    <div class="profilesub">
        <h1>ABOUT ME</h1>
        <div class="profileimg">
            <img src="./img/aboutimg.png" alt="about me 이미지">
        </div>
        <div class="profiletext">
            <h3>쾌활하고 긍정적인 코냥이
            </h3>
            <p>개발자 로서의 관심 분야를
                <br> 매일 매일 지속적으로 넓혀 가고 있습니다.
            </p>
        </div>
    </div>
</div>
<!--about me 끝-->

<!--스터디 시작-->
<div class="mystudy">
    <div class="studycard">
        <h1>STUDYING</h1>
        <div class="studybody">
            <img src="./img/wixlogo.png" class="wixlogo" alt="wix로고">
            <h1 class="card-title">wix</h1>
            <p class="card-text">과거 업무 디자인 저장소</p>
            <a href="https://suaxyn.wixsite.com/sunet"
               class="btn btn-outline-info" target=”_blank”>Go somewhere</a>
        </div>
        <div class="studybody">
            <img src="./img/gitlogo.png" alt="git로고">
            <h1 class="card-title">git</h1>
            <p class="card-text">개발 소스 코드 저장소</p>
            <a href="https://github.com/yppeu"
               class="btn btn-outline-info" target=”_blank”>Go somewhere</a>
        </div>
        <div class="studybody">
            <img src="./img/notionlogo.png" alt="notion로고">
            <h1 class="card-title">notion</h1>
            <p class="card-text">공부 및 개발 지식 공유 저장소</p>
            <a href="https://knowing-building-f15.notion.site/cadb298485934006a7f608fcafef489e"
               class="btn btn-outline-info" target=”_blank”>Go somewhere</a>
        </div>
    </div>
</div>
<!--스터디 끝-->

<!--work 목록 시작-->
<div class="myworklist">
    <h1>WORKS</h1>
    <div class="worklist">
        <div class="card mb-3">
            <img src="./img/main1.gif" class="card-img-top" alt="포폴이미지1">
            <div class="card-body">
                <h3 class="card-title">포트폴리오 페이지</h3>
                <a href="https://github.com/yppeu/suaisfree"
                   target=”_blank”>code</a>
            </div>
        </div>
    </div>
    <div class="worklist">
        <div class="card mb-3">
            <img src="./img/main2.png" class="card-img-top" alt="포폴이미지2">
            <div class="card-body">
                <h3 class="card-title">영화 리뷰 페이지</h3>
                <a href="https://github.com/yppeu/movie_review"
                   target=”_blank”>code</a>
            </div>
        </div>
    </div>
</div>
<!--work 목록 끝-->

<!--인스타그램 시작-->
<div class="myinstagram">
    <h1>DAILY</h1>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="./img/insimg1.jpg"
                     class="card-img-top" alt="인스타그램1">
                <div class="card-body">
                    <h5 class="card-title">sunet</h5>
                    <p class="card-text">one of them</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="./img/insimg2.jpg"
                     class="card-img-top"
                     alt="인스타그램2">
                <div class="card-body">
                    <h5 class="card-title">sunet</h5>
                    <p class="card-text">one of them</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="./img/insimg3.jpg"
                     class="card-img-top"
                     alt="인스타그램3">
                <div class="card-body">
                    <h5 class="card-title">sunet</h5>
                    <p class="card-text">one of them</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--인스타그램 끝-->

<!--프로필 시작-->
<div class="mycontact">
    <div class="contactsub">
        <h1>CONTACT</h1>
        <li>연수아</li>
        <li>010-7343-1959</li>
        <li>yppeu@naver.com</li>
    </div>
</div>
<!--프로필 끝-->

<!--푸터 시작-->
<div class="mylastfooter">
    <div class="card">
        <div class="card-body">
            <h5>suanet</h5>
            <p class="card-text">© 2022. Yeon Sua. All rights reserved.</p>
        </div>
    </div>
</div>
<!--푸터 끝-->
</body>
<script src="./index.js"></script>
</html>


css

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: 'Hahmlet', serif;
    overflow-x: hidden;
    background-color: whitesmoke;
}

#temp {
    font-size: 1.6rem;
}

/*메인 이미지 불투명*/
.mytitle {
    width: 100%;
    min-width: 578px;
    height: 768px;
    margin: 0 auto;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    color: white;

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

    position: relative;
    z-index: 1;
}

/*타이핑 효과*/
#maintext {
    width: 100%;
    min-width: 576px;
    text-align: center;
    font-size: 8.6rem;
    letter-spacing: -0.2rem;
    margin: 0 auto;
}

/*캐러셀 이미지*/
.myslide {
    position: relative;
    width: 100%;
    min-width: 576px;
}

/* 이미지 높이 변경 */
.carousel-inner {
    position: absolute;
    z-index: -1;
}

.d-block {
    display: block;
    height: 768px;
}


/*about me 전체틀*/
.myprofile {
    position: relative;
    width: 100%;
    min-width: 576px;
    text-align: center;
    background-color: whitesmoke;
    margin: 0 auto;
}

/*about me 서브틀*/
.profilesub {
    width: 100%;
    min-width: 576px;
    height: 867px;
    padding: 6.6rem;
    background-color: whitesmoke;
}

.profilesub > h1 {
    width: 100%;
    font-size: 5.6rem;
    font-weight: bold;
    letter-spacing: -0.1rem;
    padding-top: 70px;
    padding-bottom: 70px;
}

/*이미지틀*/
.profileimg {
    float: left;
    width: 50%;
    min-width: 576px;
}

.profileimg > img {
    border-radius: 20px;
    width: 90%;
}

/*텍스트틀*/
.profiletext {
    float: right;
    width: 50%;
    min-width: 576px;
    padding: 4.6rem 6.6rem 3.6rem;
}

.profiletext > h3 {
    width: 40%;
    min-width: 576px;
    text-align: justify;
    font-size: 2rem;
    font-weight: bold;
}

.profiletext > p {
    padding-top: 40px;
    width: 40%;
    min-width: 576px;
    text-align: justify;
}


/*스터디 전체틀*/
.mystudy {
    position: relative;
    width: 100%;
    min-width: 576px;
    height: 867px;
    text-align: center;
    background-color: powderblue;
}

/*스터디 서브틀*/
.studycard {
    width: 100%;
    min-width: 576px;
}

/*스터디 제목*/
.studycard > h1 {
    width: 100%;
    min-width: 576px;
    font-size: 6.6rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    padding-top: 120px;
    padding-bottom: 70px;
    color: white;
}

/*스터디 목록 바디*/
.studybody {
    float: left;
    width: 30%;
    min-width: 368px;
    padding: 16.6rem 10.6rem 10.6rem;
    text-align: center;
    border-radius: 100px;
    background-color: white;
    margin: auto 2.6rem;
}

.studybody > img {
    position: absolute;
    top: 300px;
    padding-right: 200px;
    width: 20%;
    min-width: 368px;

    background-color: #0dcaf0;
}

.studycard > .studybody > .wixlogo {
}

.studycard > .studybody > h1 {
    font-size: 4.6rem;
}

.studycard > .studybody > a {
    border-radius: 50px;
    margin: 0.6rem auto;
    padding: 1rem;
    font-size: 1.6rem;
}

.studycard > .studybody > a:hover {
    border-radius: 50px;
    margin: 0.6rem auto;
    padding: 1rem;
    border: 1px solid white;
    background-color: #0dcaf0;
    color: white;
}

/*work 목록 전체틀*/
.myworklist {
    position: relative;
    top: -40px;
    width: 100%;
    min-width: 576px;
    background-color: lightsalmon;
    padding-top: 150px;
    padding-bottom: 150px;
    text-align: center;
    border-radius: 50px;
}

.myworklist > h1 {
    width: 100%;
    min-width: 368px;
    font-size: 6.6rem;
    font-weight: bold;
    letter-spacing: -0.1rem;
    color: white;
}

.myworklist > .worklist {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 100px;
}

.worklist h3 {
    margin: 2.6rem auto 1.6rem;
}

.worklist a {
    border-radius: 50px;
    padding: 1rem 1.6rem;
    font-size: 1.6rem;
    text-decoration: none;
    border: 1px solid lightsalmon;
    background-color: white;
    color: lightsalmon;
}

.worklist a:hover {
    border-radius: 50px;
    padding: 1rem 1.6rem;
    font-size: 1.6rem;
    text-decoration: none;
    border: 1px solid white;
    background-color: lightsalmon;
    color: white;
}

/*인스타그램 전체 틀*/
.myinstagram {
    position: relative;
    width: 100%;
    min-width: 576px;
    padding-top: 10.6rem;
    padding-bottom: 10.6rem;
    background-color: whitesmoke;
}

.myinstagram > h1 {
    width: 100%;
    min-width: 368px;
    font-size: 5.6rem;
    font-weight: bold;
    letter-spacing: -0.1rem;
    padding-bottom: 60px;
    text-align: center;
}

/*contact 전체 틀*/
.mycontact {
    position: relative;
    width: 100%;
    min-width: 576px;
    height: 300px;
    text-align: center;
}

/*contact 서브 틀*/
.contactsub {
    width: 100%;
    min-width: 576px;
    margin: 0 auto;
}

/*CONTACT h1*/
.contactsub > h1 {
    width: 100%;
    min-width: 576px;
    font-size: 5.6rem;
    font-weight: bold;
    letter-spacing: -0.1rem;
    padding-bottom: 60px;
    text-align: center;
}

/*contact 목록*/
.contactsub li {
    width: 50%;
    min-width: 576px;
    font-size: 2rem;
    display: block;
    text-align: center;
    margin: 0 auto;
}

/*푸터 전체 틀*/
.mylastfooter {
    position: relative;
    width: 100%;
    min-width: 576px;
    margin: 0 auto;
    text-align: center;
}

.mylastfooter h5 {
    font-size: 2rem;
}

.mylastfooter p {
    font-size: 1rem;
}



js


window.onload = function () {
};

/*    let content = 'SUA IS DEVELOPER.';
    let contenttext = document.getElementById('maintext');
    let i = 0;

    function typing() {
        if (i < content.length) {
            let txt = content.charAt(i);
            contenttext.innerHTML += txt;
            console.log(contenttext);
            i++;
        }
    }
    setInterval(typing, 200);*/


let content = 'SUA IS DEVELOPER.';
let contenttext = document.getElementById('maintext');
let i = 0;

function typing() {
    let txt = content[i++];
    contenttext.innerHTML += txt;
    if (i > content.length) {
        contenttext.textContent = '';
        i = 0;
    }
}

setInterval(typing, 200);

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
    data: {},
    success: function (response) {
        let temps = response['temp']
        let cloud = response['clouds']

        $('#temp').append('현재 서울시 기온 : ' + temps + '˚' + `<br>` + '강수 확률 : ' + cloud);
        $('#temp').addClass('text-center');
    }
});

/*
    function chrbtn() {
        $('#sectionwarp').show();
    }

    function closebtn() {
        $('#sectionwarp').hide();
    }
*/


취소
 공유
취소
댓글 0
댓글 알림
나의얼굴