hr 태그 css랑 html로 색상을 주고 싶은데 반투명해보이는 문제

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

hr 태그 css랑 html로 색상을 주고 싶은데 반투명해보이는 문제

코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

기타

이*호

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

오전까지만 해도 색깔이 진하게 보였는데

계속 보면서 작업해가지고 색이 눈에 익어 연하게 보이는건지

잘 모르겠어요 ;

인터넷 찾아보면서 다른 코드 적용시켜도 반투명하게 보이는 문제를 해결 하고 싶습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script>
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Noto+Sans+KR:wght@100..900&display=swap');

        body {
            margin: 0;
        }

        :root {
            --gap: 20px;
        }

        /*레이아웃 header*/
        .search {
            /*값 완성*/
            position: relative;
            width: 250px;
            right: -1150px;
            top: 7px;
        }

        .search>img {
            /*값 완성*/
            position: absolute;
            width: 20px;
            right: 165px;
            top: 5px;
        }

        .article {
            /*값 완성*/
            position: absolute;
            width: 180px;
            left: 350px;
            top: 8px;

        }

        .header {
            /*값 완성*/
            position: relative;
        }

        .search>input {
            /*값 완성*/
            width: 250px;
            height: 25px;
            background-color: #f6f7fb;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            padding: 5px 14px;
        }

        .search>img {
            /*값 완성*/
            position: absolute;
            width: 20px;
            right: 3px;
            top: 3px;
        }

        .search>.searchbtn1 {
            /*값 완성*/
            background-color: #ffffff;
            border-color: #dc3545;
            color: #dc3545;
            border: 2px solid;
            border-radius: 5px;
            position: absolute;
            right: -75px;
            font-size: 16px;
            font-weight: bold;
            top: -2px;
        }

        .search>.searchbtn2 {
            /*값 완성*/
            background-color: #dc3545;
            border-color: #dc3545;
            color: #ffffff;
            border: 2px solid;
            border-radius: 5px;
            position: absolute;
            right: -160px;
            font-size: 16px;
            font-weight: bold;
            top: -2px;
        }

        /*레이아웃 header*/


        /*nav 영역*/
        .nav {
            display: flex;
            padding: 10px;
            margin-left: 410px;
            height: 80px;
            width: 1200px;
            position: relative;
        }

        .nav-menu {
            list-style: none;
            color: black;
            display: flex;
            padding: 10px;

        }

        a.nav-link {
            text-decoration-line: none;
            color: black;
            font-weight: bold;
            font-size: 20px;
        }

        /*nav 영역*/
    </style>
</head>

<body>
    <!--레이아웃 만들기-->
    <div class="header">
        <!--header-->
        <div class="article">
            <a>⭐ 즐겨찾기 추가</a>
            <a>· 새글</a>
        </div>
        <div class="search">
            <input type="text" placeholder="원하는 검색어를 입력하세요.">
            <img
                src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons-png.freepik.com%2F512%2F5069%2F5069532.png&type=sc960_832">
            <button type="button" class="searchbtn1">로그인</button>
            <button type="button" class="searchbtn2">회원가입</button>
        </div>
    </div>
    <hr>
    <!--nav.-->
    <nav class="nav">
        <div class="nav-logo">
            <a href="#">
                <img src="https://cdn.pixabay.com/photo/2016/08/25/01/29/google-1618520_1280.jpg"
                    style="width: 200px; height: 60px;">
            </a>
        </div>
        <ul class="nav-menu">
            <li><a href="#" class="nav-link">메뉴1</a></li>
            <li><a href="#" class="nav-link">메뉴2</a></li>
            <li><a href="#" class="nav-link">메뉴3</a></li>
            <li><a href="#" class="nav-link">메뉴4</a></li>
            <li><a href="#" class="nav-link">메뉴5</a></li>
            <li><a href="#" class="nav-link">메뉴6</a></li>
            <li><a href="#" class="nav-link">메뉴7</a></li>
        </ul>
    </nav>
    <hr style="border:0; height:5px; background: red;">

        <section>
            <!--section-->
            <aside>사이드</aside>
            <div>몸2</div>
        </section>


        </div>
</body>

</html>

댓글 알림