HTML, CSS 및 Vanilla JavaScript로 날씨 변환기를 빌드하는 방법(3부 - CSS 추가)

에서 CSS를 추가하여 프로젝트 구축을 완료합니다.

Visual Studio Code 페이지의 오른쪽 하단에 있는 파란색Go Live 버튼을 클릭하여 로컬 서버를 시작합니다.

styles.css 파일에서 먼저 기본 CSS 재설정을 추가합니다. 이것은 HTML의 기본 브라우저 스타일을 재설정하는 데 사용됩니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

그런 다음 배경색을 선택하고 텍스트를 중앙에 배치합니다.

body {
  background-color: #5a4fcf;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

브라우저에서 이 결과를 볼 수 있습니다.


그런 다음 title 및 card 클래스를 대상으로 하여 배경색을 변경하고 테두리를 둥글게 만듭니다.

.title,
.card {
  border-radius: 15px;
  background-color: #faf9f6;
}

다음 단계는 Google 글꼴을 사용하는 것입니다.

https://fonts.google.com/ 으로 이동하여 Limelight 글꼴을 검색합니다.



Google 글꼴을 클릭하고 Select this style를 선택합니다.


오른쪽에 있는 탭이 열리고 link 태그에 대한 코드를 복사하는 옵션이 표시됩니다.



HTML 파일의 link 안에 해당 head 태그를 추가합니다.

  <!--Google font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
</head>

CSS 파일에서 이러한 여백 및 패딩 스타일과 함께 Limelight 글꼴을 title 클래스에 추가합니다.

.title {
  padding: 20px 0;
  margin: 40px auto 30px;
  max-width: 40%;
  font-family: "Limelight", cursive;
}

다음으로 margin 에 대해 이러한 #message 스타일을 추가합니다.

#message {
  margin: 20px 0 30px;
}

다음으로 card 클래스의 크기를 설정합니다.

.card {
  max-width: 300px;
  height: 250px;
  padding: 15px;
  margin: auto;
}

.input-container 의 경우 flex를 사용하여 입력과 버튼 사이에 약간의 공간을 추가합니다.

.input-container {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-around;
}

그런 다음 숫자 입력의 너비를 설정합니다.

input[type="number"] {
  width: 20%;
}

다음으로 .result-div 및 .result-text 의 여백을 설정합니다.

.result-div {
  margin: 10px 0;
}

.result-text {
  margin: 10px;
}

그런 다음 Font Awesome 아이콘의 색상과 글꼴 크기를 설정합니다.

.fas,
.far {
  margin-left: 5px;
  font-size: 1.3rem;
}

.fa-fire,
.fa-burn {
  color: #ff0000;
}

.fa-fire {
  font-size: 3rem;
}

.fa-sun {
  color: #ffbf00;
}

.fa-icicles {
  color: #00d0ff;
}

그런 다음 버튼 스타일을 추가하려고 합니다.

.btn {
  color: white;
  padding: 5px;
  margin: 0 10px;
  background-color: #0818a8;
  cursor: pointer;
  border: none;
  border-radius: 10%;
}

마지막으로 더 작은 모바일 장치를 대상으로 두 개의 미디어 쿼리를 추가합니다.

@media (max-width: 500px) {
  .title {
    max-width: 300px;
    font-size: 1.3rem;
  }
}

@media (max-width: 300px) {
  .title {
    max-width: 200px;
    font-size: 1rem;
  }
}

이것이 전체 CSS 파일의 모습입니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #5a4fcf;
    text-align: center;
    font-family: "Open Sans", sans-serif;
}

.title,
.card {
  border-radius: 15px;
  background-color: #faf9f6;
}

.title {
    padding: 20px 0;
    margin: 40px auto 30px;
    max-width: 40%;
    font-family: "Limelight", cursive;
}

#message {
    margin: 20px 0 30px;
}

.card {
    max-width: 300px;
    height: 250px;
    padding: 15px;
    margin: auto;
}

.input-container {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-around;
}

input[type="number"] {
    width: 20%;
}

.result-div {
    margin: 10px 0;
}

.result-text {
    margin: 10px;
}

.fas,
.far {
  margin-left: 5px;
  font-size: 1.3rem;
}

.fa-fire,
.fa-burn {
  color: #ff0000;
}

.fa-fire {
  font-size: 3rem;
}

.fa-sun {
  color: #ffbf00;
}

.fa-icicles {
  color: #00d0ff;
}

.btn {
    color: white;
    padding: 5px;
    margin: 0 10px;
    background-color: #0818a8;
    cursor: pointer;
    border: none;
    border-radius: 10%;
}

@media (max-width: 500px) {
    .title {
      max-width: 300px;
      font-size: 1.3rem;
    }
}

@media (max-width: 300px) {
    .title {
        max-width: 200px;
        font-size: 1rem;
    }
}

4부에서는 GitHub 리포지토리를 설정하고 프로젝트를 GitHub 페이지에 배포합니다.

Final Code