카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

수업 관련 질문합니다.

22.10.27 20:17 작성 조회수 309

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)
- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다
- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기 7
6분 58초

여기서 화살표 아이콘이 화면에 안 나타나요.
1번 <i class="fas fa-chevron-circle-left slide-prev"></i>

2번<i class="fas fa-circle-chevron-right slide-next"></i>

1번은 강사님 화면을 보고 그대로 친 건데 이건 화면에 나타납니다. 근데 2번은 제가 직접 fontawesome에서 찾은 아이콘의 코드를 넣은 건데 화면에 안 나타나요.
fontawesome에서 html copy code snippet을 붙여 넣은 것도 화면에 안 나타나고 제가 검사창에서 직접 아이콘 부분 코드를 복붙한 것도 안 나타납니다.

업무자동화, 데이터 분석 등의 아이콘도 처음에 제가 직접 fontawesome에서 html 코드 스니펫을 복붙한 건 안 나타났는데 검사 창에서 코드를 복사하니 나타났거든요. 그게 강사님 코드랑 똑같더라고요.

근데 화살표 아이콘은 강사님이랑 똑같이 코드를 치지 않으면 화면에 나타나질 않아서 제가 아이콘을 바꾸고 싶을 땐 어떻게 적용해야 하는지 알려주세요.

지금까지 작성한 전체 코드입니다.

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>잔재미코딩</title>
    <meta name="description" content="잔재미코딩 온라인 강의 리스트" />
    <meta name="keywords" content="Online Lecture" />
    <meta name="author" content="Dave Lee" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <meta property="og:type" content="website" />
    <meta property="og:title" content="잔재미코딩" />
    <meta property="og:description" content="잔재미코딩 온라인 강의 리스트" />
    <meta property="og:image" content="img/fun-coding-mark.png" />
    <meta property="og:url" content="https://www.fun-coding.org" />
    <meta property="og:site_name" content="잔재미코딩" />

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="잔재미코딩" />
    <meta name="twitter:description" content="잔재미코딩 온라인 강의 리스트" />
    <meta name="twitter:image" content="img/fun-coding-mark.png" />
    <meta name="twitter:url" content="https://www.fun-coding.org" />
    <meta name="twitter:creator" content="Dave Lee" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="img/fun-coding.ico" />
    <link rel="apple-touch-icon" href="img/fun-coding.ico" />
    <link rel="shortcut icon" tyle="image/x-icon" href="img/fun-coding.ico" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />
    <script
      src="https://kit.fontawesome.com/f1def33959.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <div class="inner">
        <div class="head-container">
          <div class="head-brand">
            <a href="https://www.fun-coding.org">잔재미코딩</a>
          </div>
          <div class="head-blog">
            <a href="https://www.fun-coding.org/daveblog.html"
              >잔재미코딩 블로그 모음</a
            >
          </div>
        </div>
      </div>
    </header>
    <section class="main">
      <div class="main-container">
        <div class="inner">
          <div class="title-container">
            <div class="title">광고보다 강의에 집중합니다</div>
            <div class="message">
              전자책보다 좋은 자료와 현업의 경험을 함께<br />
              검증된 온라인 강의를<br />
              검증된 온라인 플랫폼에서 제공합니다.
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="inner">
        <div class="skill-container">
          <div class="skill">
            <i class="fab fa-python skill-icon python-style"></i>
            <div class="skill-title">
              <div class="skill-name">업무 자동화</div>
              <div class="skill-usage">크롤링/자동매매</div>
            </div>
          </div>
          <div class="skill">
            <i class="fas fa-chart-bar skill-icon analysis-style"></i>
            <div class="skill-title">
              <div class="skill-name">데이터 분석</div>
              <div class="skill-usage">데이터 분석</div>
            </div>
          </div>
          <div class="skill">
            <i class="fab fa-app-store-ios skill-icon ai-style"></i>
            <div class="skill-title">
              <div class="skill-name">AI</div>
              <div class="skill-usage">인공지능 활용</div>
            </div>
          </div>
          <div class="skill">
            <i class="fab fa-vuejs skill-icon vue-style"></i>
            <div class="skill-title">
              <div class="skill-name">풀스택</div>
              <div class="skill-usage">웹/앱 서비스</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="inner">
        <div class="roadmap-container">
          <div class="roadmap-title-container">
            <div class="roadmap-title">잔재미코딩 관련 블로그 및 서적</div>
            <div class="arrow-container">
              <i class="fas fa-chevron-circle-left slide-prev"></i>
              <i class="fas fa-circle-chevron-right slide-next"></i>
            </div>
          </div>
          <div class="class-list-container"></div>
        </div>
      </div>
    </section>
    <footer></footer>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  color: #3f464d;
  font-family: "Spoqa Han Sans Neo", "Sans-serif";
}

a {
  all: unset;
}

a:link {
  text-decoration: none;
  color: #3f464d;
}

a:visited {
  text-decoration: none;
  color: #3f464d;
}

a:active {
  text-decoration: none;
  color: #3f464d;
}

a:hover {
  text-decoration: none;
  color: #3f464d;
}

.inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

header {
  width: 100%;
  height: 60px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.head-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head-container .head-brand {
  font-weight: bold;
  font-size: 1.2rem;
}

.head-container .head-brand a:hover {
  color: #2186c4;
  cursor: pointer;
}

.head-container .head-blog {
  font-weight: bold;
  font-size: 1.2rem;
}

.head-container .head-blog a:hover {
  color: #2186c4;
  cursor: pointer;
}

section {
  width: 100%;
  background-color: #fff;
  position: relative;
}

.main {
  height: 360px;
  background-image: url("https://www.fun-coding.org/assets_lms/images/photodune-4161018-group-of-students-m.jpg");
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
  z-index: 1;
}

.main-container {
  width: 100%;
  height: 100%;
  background-color: rgb(47, 48, 89);
  opacity: 0.8;
  z-index: 2;
  margin-top: 60px;
}

.title-container {
  padding-top: 100px;
  padding-bottom: 100px;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.8rem;
}

.message {
  font-size: 1.4rem;
  font-weight: normal;
  color: #fff;
  line-height: 2rem;
}

.skill-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.skill {
  width: 25%;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-radius: 9px;
  padding: 0.5rem 1rem;
  margin: 0.1rem;
  box-shadow: 10px 10px 10px -5px rgba(25, 42, 70, 0.2);
}

.skill-icon {
  font-size: 2.5rem;
  margin: 0 10px;
}

.skilltitle {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.skill-name {
  font-weight: bold;
  color: #54536f;
  margin-bottom: 0.2rem;
}

.skill-usage {
  font-size: 0.9rem;
  color: #54536f;
}

.python-style {
  color: #2186c4;
}

.analysis-style {
  color: #ff8066;
}

.ai-style {
  color: #f7df1e;
}

.vue-style {
  color: #2e7d32;
}

.roadmap-container {
  width: 100%;
  margin-top: 2rem;
}

.roadmap-title-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.roadmap-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #54536f;
}

.slide-prev {
  font-size: 2rem;
  cursor: pointer;
  color: rgb(47, 48, 89);
}

.slide-next {
  font-size: 2rem;
  cursor: pointer;
  color: #cfd8dc;
}

@media only screen and (min-width: 1200px) {
  .inner {
    max-width: 1200px;
  }
}

@media only screen and (max-width: 980px) {
  .skill-container {
    display: none;
  }
}

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기7

강의실 바로가기

답변 1

답변을 작성해보세요.

잔재미코딩 DaveLee

지식공유자

2022.10.28

안녕하세요. 답변도우미입니다.

각자 직접 타이핑을 하시면, 항상 미처 발견하지 못한 부분때문에, 동일하게 구현이 안되는 경우가 있어서요. 그럴 때에는 저희가 제공해드린 코드파일을 다운받으셔서, 그대로 오픈해보신 후, 어떤 부분이 잘못되었는지, 라인별로 확인해보시면 좋습니다. 관련 코드파일을 혹시나해서 오픈해본 결과, 동일하게 아이콘이 잘 나오더라고요. 이러한 방식으로 확인해보시면 어떠실까요?

감사합니다.

이씨오

수업 관련 질문합니다.

이 글과 비슷한 Q&A

깃허브 vue-todo 접근불가에 따른 확인요청

프로젝트3의 툴팁에서

Chapter 5 (실습) 댓글 컴포넌트 만들기

settings.jason 3가지