타이핑 가운데 정렬 오류 | 스파르타 커뮤니티

커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
타이핑 가운데 정렬 오류
undefined주차
연*아
・
추천
・
조회수
답변 완료
<!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">

    <title>Sua is free</title>
    <style>

        html {
            font-size: 62.5%;
        }

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

        #temp {
            font-size: 1.6rem;
        }

        /*메인 이미지 불투명*/
        .mytitle {
            width: 100%;
            min-width: 768px;
            height: 600px;
            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: 768px;
            text-align: center;
            font-size: 4.6rem;
            letter-spacing: -0.2rem;
        }

        /*슬라이더*/
        .myslide {
            position: relative;
        }

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

        .carousel-item {
        }

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

        .carousel-inner > .carousel-item > img {
        }

        /*프로필정보 감싸는 틀*/
        .myprofile {
            position: relative;
            width: 100%;
            min-width: 500px;
            padding-top: 150px;
            padding-bottom: 30px;
            background-color: powderblue;
        }

        .profilesub {
            width: 60%;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        /*about me*/
        .profilesub > h1 {
            width: 100%;
            min-width: 500px;
            font-size: 3.5rem;
            font-weight: bold;
            letter-spacing: -0.2rem;
            padding-bottom: 60px;
            text-align: center;
        }

        /*프로필 목록*/
        .profilesub li {
            width: 30%;
            min-width: 400px;
            display: inline-block;
            margin: 0.4rem 3rem;
            font-size: 1.3rem;
            padding: 2.3rem;
            border-radius: 4rem;
            border: 1px solid white;
            text-align: center;
        }

        /*프로필 목록 마우스오버*/
        .profilesub li:hover {
            width: 40%;
            display: inline-block;
            margin: 10px 35px;
            font-size: 1.3rem;
            padding: 3rem;
            border-radius: 100px;
            background-color: black;
            color: white;
            text-align: center;
        }

        /*스터디 목록*/
        .mystudy {
            position: relative;
            top: 150px;
            padding-bottom: 100px;
            width: 100%;
            min-width: 500px;
            text-align: center;
        }

        .studycard > h1 {
            width: 90%;
            font-size: 3.5rem;
            font-weight: bold;
            letter-spacing: -0.1rem;
            padding-bottom: 70px;
            text-align: center;
            color: powderblue;
            margin: 0 auto;
        }

        .studycard > .studybody {
            width: 30%;
            height: 300px;
            display: inline-block;
            text-align: center;
            padding: 80px;
            border: 1px solid powderblue;
            border-radius: 100px;
        }

        /*인스타*/
        .myinstagram {
            position: relative;
            top: 200px;
            width: 100%;
            padding-top: 30px;
        }

        .sectionwarp > p {
            margin-top: 100px;
            text-align: center;
            font-size: 30px;
        }


        .mysection > button {
            margin: 10px auto;
        }

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

        .blockquote > :last-child {
            font-size: 15px;
        }

        /*푸터*/
        .mylastfooter {
            position: relative;
            top: 300px;
            width: 100%;
            margin: 0 auto;
        }

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

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

    </style>
</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>
<!--슬라이더 끝-->
<!--헤더 끝-->

<!--프로필 시작-->
<div class="myprofile">
    <div class="profilesub">
        <h1>ABOUT ME</h1>
        <li>연수아</li>
        <li>1994년 2월 23일</li>
        <li>010-7343-1959</li>
        <li>yppeu@naver.com</li>
    </div>
</div>
<!--프로필 끝-->

<!--스터디 시작-->
<div class="mystudy">
    <div class="studycard">
        <h1>STUDYING</h1>
        <div class="studybody">
            <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">
            <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">
            <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>
<!--스터디 끝-->

<!--인스타그램 시작-->
<div class="myinstagram">
    <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="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>

    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();
        }
    */


</script>
</html>
타이핑이 가운데 정렬이 안먹네요 ㅠㅠ
textalign : center 를 줬는데 한쪽으로 치우쳐져요ㅜ
댓글 알림