싸이월드 만들기 1탄

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

해결된 질문

작성

120

코드를 아래와 같이 작성하였는데, 이렇게 표시가 됩니다. (사진 참고)

레퍼런스도 참고하여 적었는데 해결이 안 되어서 질문 납깁니다.

또한 fontawesome도 강의 내용대로 연동시키려 하였는데 이모티콘이 보이지 않습니다.

어떻게 해야 할까요?

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>홍길동 님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title>
    <link href="./styles/index.css" rel="stylesheet" />
    <script
      src="https://kit.fontawesome.com/e3aa47cdec.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="background">
      <div class="outerbox">
        <div class="wrapper">
          <div class="wrapper__left">
            <div class="wrapper__left__header">
              <!-- TODAY 0 | TOTAL 12345 -->
              <div class="today">
                <span>TODAY</span>
                <span>0</span>
                <span> | TOTAL</span>
                <span>12345</span>
              </div>
            </div>
            <div class="wrapper__left__body">
              <div class="left__body__header">
                <div class="left__body__header__gray"></div>
                <div class="left__body__header__line"></div>
              </div>
              <div class="left__body__profile">
                <div class="profile__detail">
                <i class="fa-regular fa-face-grin"></i>이름</div>
                <div class="profile__detail">
                <i class="fa-solid fa-phone"></i>Phone</div>
                <div class="profile__detail">
                <i class="fa-regular fa-envelope"></i>E-mail</div>
                <div class="profile__detail">
                <i class="fa-brands fa-instagram"></i>인스타그램</div>
              </div>
              <div class="left__body__footer">
                <div class="wrapper__feel">
                    <div class="feel__title">오늘의 기분</div>
                    <select class="feel__select">
                        <option>기쁨 😊</option>
                        <option>슬픔 🥲</option>
                        <option>화남 😑</option>
                        <option>분노 🤬</option>
                    </select>
              </div>
            </div>
          </div>
          <div class="wrapper__right"></div>
        </div>
      </div>
    </div>
  </body>
</html>

-------------
css
-------------

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

.background {
  width: 1024px;
  height: 600px;
  background-image: url("../images/background.png");
  padding: 20px 0px 0px 20px;
}

.outerbox {
  width: 808px;
  height: 544px;
  background-image: url("../images/outerbox.png");
}

.wrapper {
  display: flex;
  flex-direction: row;
  padding: 32px 0 0 32px;
}

.wrapper__left {
  width: 208px;
  height: 472px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-left: 3px;
  margin-right: 7px;
}

.wrapper__left__header {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.today {
  padding-top: 10px;
  font-size: 9px;
}

.wrapper__left__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px 30px 0px 30px;
  border: 1px solid gray;
  border-radius: 15px;
  background-color: white;
}

.left__body__header {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.left__body__header__gray {
  width: 148px;
  height: 133px;
  background-color: gray;
}

.left__body__header__line {
  border-top: 1px dotted black;
  margin: 12px 0px;
}

.left__body__profile {
  font-style: normal;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.profile__detail {
  color: #999999;
  font-size: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
}

.fas {
  color: black;
  margin-right: 10px;
  width: 5px;
  height: 5px;
}

.left__body__footer {
  width: 100%;
  margin-bottom: 30px;
}

.wrapper__feel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.feel__title {
  font-size: 11px;
  margin-bottom: 5px;
  color: gray;
}

.wrapper__right {
  width: 524px;
  height: 472px;
  background-color: violet;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 5px;
}

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! 세은님!

보라색 영역을 오른쪽으로 배치하고 싶은데, 아래에 나오는 문제가 있으신 것 같아요!
<div /> 태그를 한칸만 아래로 내려주세요!^^

폰트어썸 다운로드가 안돼요!
=> 현재 폰트어썸 다운로드 방식이 변경되어 복잡해 진 것 같아요!
아주 쉽게 다운로드 받는 방법 알려드릴테니 따라해 보세요!^^

2-1)
보통 이렇게 다운로드 받아서 사용하는 기능들을 라이브러리 라고 부르며,
다운로드 주소는 cdn 이라고 부른답니다!
따라서, 구글에 접속하신 다음 "폰트어썸 cdn" 이라고 검색해 주세요.

2-2)

인프런 AI 인턴

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

이세은님이 작성하신 HTML 코드에서 FontAwesome 아이콘이 보이지 않는 문제를 해결하기 위해 몇 가지 확인할 부분을 안내드리겠습니다.

문제 해결 가이드

FontAwesome Script 체크:
- 먼저 fontawesome 스크립트의 경로가 올바른지 확인하세요. 현재 스크립트는 <head> 태그 안에 올바르게 포함되어 있습니다.
- 스크립트를 사용하는데 문제가 없도록 인터넷 연결이 필요하며, 해당 CDN이 차단되거나 네트워크 문제로 불러오지 못하고 있을 가능성이 있으니 인터넷 연결 상태를 점검해 보세요.

   <script src="https://kit.fontawesome.com/e3aa47cdec.js" crossorigin="anonymous"></script>

정확한 아이콘 코드 사용:
- 제공된 HTML 코드에서 사용한 아이콘 클래스 중 몇 가지 오류가 있을 수 있습니다.
- FontAwesome 6버전 이후에는 아이콘의 클래스명이 변경되었을 수 있으니 최신 문서를 참고하여 적용해 주세요.
- 이를 위해 FontAwesome 공식 웹사이트에서 확인할 수 있습니다: FontAwesome Icons
CSS Class의 충돌:
- CSS에서 .fas 클래스와 같은 이름을 사용하는 경우, FontAwesome의 CSS 클래스와 충돌할 수 있어 아이콘이 정상적으로 보이지 않을 수 있습니다. 이 경우 .fa 클래스와 관련된 다른 CSS 속성을 명확히 정의해주세요.
아이콘 로드 확인:
- 브라우저의 개발자 도구(F12)를 열어 콘솔 탭에서 오류 메시지가 있는지 확인하고, 해당 오류 메시지를 주의 깊게 읽어 보세요. 라우팅이나 경로 이슈가 없는지, 그리고 폰트가 올바르게 로드되고 있는지 확인이 필요합니다.
문제 여전히 지속 시:
- 위의 방법을 전부 확인했음에도 문제가 해결되지 않는다면, 폰트 사용에 필요한 설정이나 올바른 URL 사용을 다시 점검하시거나, CDN 문제로 인해 발생할 수 있는 부분을 파악해 보셔야 합니다.

이 부분들이 도움이 되시어 문제가 해결될 수 있기를 바랍니다. 혹시 여전히 문제가 해결되지 않으시면, 추가적인 정보를 제공해 주시면 더 자세히 도와드릴 수 있습니다.

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

인프런 커뮤니티 질문&답변

싸이월드 만들기 1탄

문제 해결 가이드