* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
강의 1주차 11과정 듣고있는데 아무리 따라해도 안되길래 오류문구를 확인해봤더니,
An @import rule was ignored because it wasn't defined at the top of the stylesheet. Such rules must appear at the top, before any style declaration and any other at-rule with the exception of @charset and @layer. 라고 나옵니다.
import를 style 바로 밑에 사용해야 아래부분들이 전부 적용되는걸로 알고있는데 강의 내용은 하단부에 그냥 작성하더라구요.
어떤 부분이 정확한건지 팩트체크 한번 해주세요
좌측은 강의내용대로 한것이고, 우측은 스타일 아래부분에 해서 적용된 상태입니다.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코<!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>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/background.jpg"); background-position : center;
background-size: cover;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
margin-right: 30px;
align-items: center;
}
.weather {
display: flex;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
font-weight: bold;
padding: 20px 0;
}
.greeting {
margin-bottom: 50px;
}
.motto {
margin-bottom: 100px;
}
.logo {
margin-left: 30px;
height: 32px;
}
* {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body>
<nav class="navbar">
<img class="logo" src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg" alt=""/>
<div class="weather">
<img src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png" id="weather-icon">
<p>날씨 맑음, 20ºC</p>
</div>
</nav>
<div class="container">
<div class="greeting">
<h1>Hello, My name!</h1>
<h1>12:30</h1>
</div>
<div class="motto">
<h3>My life's motto</h3>
<h2>웃으면 행복해집니다.</h2>
</div>
</div>
<!-- footer -->
<div class="footer">
<p>- 작자 미상 -</p>
<p>멋진 명언입니다. 아이스크림을 먹으면 행복해져요.</p>
</div>
</body>
</html>드를 한 번에 선택할 수 있어요!
