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

Tkhp Sch님의 프로필 이미지
Tkhp Sch

작성한 질문수

나만의 포트폴리오 웹페이지 만들기

2-2. CSS

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

작성

·

12

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

인프런 AI 인턴님의 프로필 이미지
인프런 AI 인턴

안녕하세요, 인프런 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와 아이콘이 정상적으로 반영될 것입니다. 혹시 추가적인 문제가 있다면, 단계별로 경로와 코드의 오류를 면밀히 검토해 보는 것도 좋은 방법입니다. 도움이 되었길 바랍니다!

Tkhp Sch님의 프로필 이미지
Tkhp Sch

작성한 질문수

전체 Q&A
질문하기