inflearn logo
강의

講義
知識共有

独自のポートフォリオWebページを作成する

2-2. CSS

동영상을 최신버전에 맞게 업그레이드 해주시거나 css적용이 안되는 원인과 해결방법을 빠르게 써주실 수 있나요?

100

Tkhp Sch

投稿した質問数 35

0

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="Chrome">
        <meta name="viewport" content="width-device-width, initial-scale-1.0, maximum-scale-1.0, minimum-scale-1.0, user-scalable-no">

        <title>Portfolio - Navbar</title>
        
        <!-- saved from url=(0013)about:internet-->

        <!-- icon -->
        <script src="https://kit.fontawesome.com/64fe4437c7.js" crossorigin="anonymous"></script>
        
        <!-- fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

        <!-- user style -->
        <link rel="stylesheet" href="/css/portfolio.css">

    </head>
    <body>

        <header class="header-area navbar-fade" id="header">
            <nav class="Navbar">
                <a class="Navbar-brand" id="navbarBrand">logo</a>
                <a class="Navbar-toggler" id="toggleBtn"><i class="fa fa-bars"></i></a>
                <div class="Navbar-menu" id="menu">
                    <div class="nav-item"><a class="nav-link" id="navbarAbout">about</a></div>
                    <div class="nav-item"><a class="nav-link" id="navbarService">service</a></div>
                    <div class="nav-item"><a class="nav-link" id="navbarPortfolio">portfolio</a></div>
                    <div class="nav-item"><a class="nav-link" id="navbarReview">review</a></div>
                </div>
            </nav>
        </header>

        <!-- user script -->
        <script src="portfolio.js"></script> 
    </body>
</html>

웨에거는 portfolio.html이고 아래거는 portfolio.css인데, 아이콘 적용도 안되고, css적용도 안되요! 고쳐주세요!

/* COMMON */
* {
    margin: 0;
    padding: 0;
    font-size: 0;
}

body {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    word-break: break-all;
    font-family: 'Heebo', sans-serif;
}

img {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
}

ul {
    list-style-type: none;
}

/* HEADER */
.header-area {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: white;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.navbar-fade {
    animation-name: navbar-fade;
    animation-duration: 0.5s;
    -webkit-animation-name: navbar-fade;
    -webkit-animation-duration: 0.5s;
}

@keyframes navbar-fade {
    from {opacity: .4}
    to {opacity: 1}
}
@-webkit-keyframes navbar-fade {
    from {opacity: .4}
    to {opacity: 1}
}

.header-area.navbar-fixed {
    position: fixed;
}

.header-area > .navbar {
    width: calc(100% - 120px);
    margin: 0 60px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .header-area > .navbar {
        max-width: 900px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .header-area > .navbar {
        max-width: 1000px;
    }
}

.header-area > .navbar > .navbar-brand {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    cursor: pointer;
}

.header-area > .navbar > .navbar-toggler * {
    font-size: 32px;
}

.header-area > .navbar > .navbar-toggler {
    float: right;
    height: 70px;
    line-height: 70px;
    font-size: 32px;
    cursor: pointer;
}

@media(min-width: 992px) {
    .header-area > .navbar > .navbar-toggler {
        display: none;
    }
}

.header-area > .navbar > .navbar-menu {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    top: 70px;
    left: 0;
    width: 100%;
    height: 200px;
    transition: 0.5s ease;
    overflow: hidden;
}

.header-area > .navbar > .navbar-menu.show {
    height: 200px;
}

.header-area > .navbar > .navbar-menu > .nav-item {
    float: none;
    display: block;
    height: 50px;
    line-height: 50px;
}
.header-area > .navbar > .navbar-menu > .nav-item:hover * {
    background-color: rgba(0, 0, 0, 0.4);
} 

.header-area > .navbar > .navbar-menu > .nav-item > .nav-link {
    display: block;
    padding-left: 50px;
    color: white;
    cursor: pointer;
}

@media (min-width: 992px) {
    .header-area > .navbar > .navbar-menu {
        position: relative;
        background-color: transparent;
        float: right;
        top: 0;
        width: auto;
        height: auto;
        transition: none;
    }

    .header-area > .navbar > .navbar-menu.show {
        height: auto;
    }

    .header-area > .navbar > .navbar-menu > .nav-item {
        display: inline-block;
        height: 70px;
        line-height: 70px;
    }

    .header-area > .navbar > .navbar-menu > .nav-item:hover * {
        background-color: transparent;
    }

    .header-area > .navbar > .navbar-menu > .nav-item > .nav-link {
        display: block;
        padding: 0 20px;
        color: black;
    }
}

css파일을 css폴더에 넣고 <link rel="stylesheet" href="/css/portfolio.css">로 불러오기를 했는데 안되요!

HTML/CSS 웹-디자인

回答 1

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다.
Tkhp Sch님, CSS와 아이콘이 적용되지 않은 원인을 살펴보고 수정할 수 있는 방법에 대해 이야기해 드리겠습니다.

  1. CSS 파일 경로 확인:

    • HTML 파일에서 <link rel="stylesheet" href="/css/portfolio.css">로 CSS 파일을 참조하고 있습니다. 이 경로가 올바른지 확인해주세요. 웹 서버의 루트 디렉토리에서 css/portfolio.css 파일을 찾을 수 있어야 합니다. 상대 경로나 절대 경로를 다시 한번 검토해 보세요.

  2. HTML 파일이 있는 위치에 따른 경로 수정:

    • HTML 파일과 CSS 파일이 같은 디렉토리에 있는 경우, 경로를 상대적으로 작성할 수 있습니다. 예를 들어, href="./css/portfolio.css"로 수정하여 사용하실 수 있습니다.

  3. 아이콘이 적용되지 않는 경우:

    • Font Awesome의 스크립트가 제대로 로드되지 않는 경우일 수 있습니다. 인터넷 연결이 안정적인지 또는 https://kit.fontawesome.com/64fe4437c7.js 경로가 올바른지 확인해 주세요.

  4. Viewport메타태그 오류 수정:

    • width-device-width와 같은 오탈자가 있는 것 같습니다. 올바른 방식은 width=device-width입니다.

수정된 HTML 예제 코드:

<!DOCTYPE html>
<html lang="ko">
<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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <title>Portfolio - Navbar</title>

    <!-- Font Awesome Link -->
    <script src="https://kit.fontawesome.com/64fe4437c7.js" crossorigin="anonymous"></script>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

    <!-- User CSS -->
    <link rel="stylesheet" href="./css/portfolio.css">
</head>
<body>

    <header class="header-area navbar-fade" id="header">
        <nav class="Navbar">
            <a class="Navbar-brand" id="navbarBrand">logo</a>
            <a class="Navbar-toggler" id="toggleBtn"><i class="fa fa-bars"></i></a>
            <div class="Navbar-menu" id="menu">
                <div class="nav-item"><a class="nav-link" id="navbarAbout">about</a></div>
                <div class="nav-item"><a class="nav-link" id="navbarService">service</a></div>
                <div class="nav-item"><a class="nav-link" id="navbarPortfolio">portfolio</a></div>
                <div class="nav-item"><a class="nav-link" id="navbarReview">review</a></div>
            </div>
        </nav>
    </header>

    <!-- User Script -->
    <script src="portfolio.js"></script>
</body>
</html>

경로 문제를 해결하고 나면 CSS와 아이콘이 정상적으로 반영될 것입니다. 혹시 추가적인 문제가 있다면, 단계별로 경로와 코드의 오류를 면밀히 검토해 보는 것도 좋은 방법입니다. 도움이 되었길 바랍니다!

CSS가 적용이 안됩니다.

0

78

1

화면이 너무작아요

0

231

0

awesome font에서

0

366

1

팝업창 동영상

0

273

1

챕터 6에서 해결이 안되고 있습니다.

0

368

1

클릭시 드롭다운이 되지 않습니다..

1

388

2

09.NavaigationBar2 js부분 질문입니다.

0

227

1

navigation bar 만들기 java script부분에 질문이 있습니다.

0

378

1

자바스크립트 에러 현상

0

503

1

건의사항입니다.

1

305

1

CSS

0

236

1

작동이안되여..

0

276

1

이미지

1

243

1

.header-area > .navbar에 적용한 css에 대해서

0

296

1

css 적용이 안되는 증상

0

297

2

className과 classList에 대해 궁금합니다.

0

259

1

이미지 슬라이드 적용예제에서 자바스크립트 함수 bind()에 대해 궁금합니다.

0

497

1

CSS 적용이 안됩니다ㅠㅠ

0

229

2

header 부분에 js파일을 타이핑 했으나 오류가 뜸니다.

0

215

1

스크롤을 내리면 네비게이션바 길이가 줄어듭니다

0

300

1

.navbar-toggler에서 height

0

162

1

overflow:hidden 역할에 대해서

0

331

1

강의를 보면서 같이 타이핑 하고 싶은데

0

223

1

copyright에 대한 질문이 잇습니다

0

207

2