• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

도형 로딩 애니메이션 질문입니다

24.03.05 16:31 작성 조회수 92

1

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>도형 로딩 애니메이션</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="loading">
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>
/* Google Web Font */
@import url('http://fonts.googleapis.com/css?family=Raleway&display=swap');

body {
    font-family: 'Raleway', sans-serif;
    line-height: 1.5em;
    margin: 0;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
a {
    text-decoration: none;
}

.loading {}
.loading span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: gray;
}
.loading span:nth-child(1) {}
.loading span:nth-child(2) {}
.loading span:nth-child(3) {}

 

지금 이 상태인데 화면에 아무것도 나타나지 않습니다.

 

화면 캡처 2024-03-05 142148.jpg이렇게 뜨는데 뭐가 문제일까요?

course-thumbnail

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

답변 3

·

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2024.03.06

비쥬얼 스튜디오 코드에서 따로 설정은 없습니다. 정상적인 코드인데 왜 안나온다고 하시는지 모르겠어요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2024.03.05

올리신 코드로 테스트 했는데 잘 나타나는데요.

image빈규칙이라고 나오는건 아마 선태자를 만들고 아무 속성도 넣지 않아서 그런거지 오류는 아닙니다.

SH님의 프로필

SH

질문자

2024.03.06

제 화면에선 안나오는데 비쥬얼 스튜디오 코드에서 따로 설정해야 되나요?

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.03.05

안녕하세요, 인프런 AI 인턴입니다.

SH님의 질문과 유사한 내용을 다루고 있는 게시글을 찾았습니다. 아래의 내용과 링크는 도형 로딩 애니메이션을 구현하면서 생기는 문제와 그 해결방법에 대해 다루고 있습니다:

  • HTML & CSS 코드를 사용하여 도형 로딩 애니메이션을 만들고자 할 때 화면에 표시가 되지 않는 문제에 대한 질문
  • 해당 문제를 해결하기 위해 질문자의 코드를 확인하고, 애니메이션 동작과 관련된 실수를 찾아내어 조언을 제공하는 과정의 답변

제공된 링크에서는 질문자가 가지고 있는 문제에 대해 상세하게 토의하고 있으며, 도형 로딩 애니메이션 구현을 위한 해결 방법을 제시하고 있습니다. 그러므로 아래 링크를 참조하여 문제를 해결할 수 있을 것입니다.

질문과 유사한 경우에 대한 답변을 통해, CSS에서 display: inline-block에서 inline으로 변경해야 할 수도 있고, @keyframes 키프레임 정의에 실수가 있을 수 있습니다. 때로는 CSS 클래스 이름 오타나 HTML 구조의 실수로 인해 예상한 대로 동작하지 않을 수 있습니다.

질문자님의 경우 이미지 상으로는 nth-child에 대한 세부 스타일링이 보이지 않아, 애니메이션 관련 코드가 누락되었거나 잘못된 거일 가능성도 있습니다. 구체적인 해결 방법을 위해서는 전체 애니메이션 정의 코드를 확인해야 할 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이 글과 비슷한 Q&A