[2021/12/21]국비지원 CSS3 3-(5) 과제4 : navigation list-style

수업 중 과제 4

navigation 이미지를 보고 클론 코딩하기

원본 이미지

사용한 css3

list-style-type
font-family
font-size
line-height
width
background (통합 property)
border-top
text-indent
color (font-color)

작업내용
( 담임강사가 후에 보여준 답안대로 수정한 내용 )

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>품질마크 navigation<title>
    <style type="text/css">
        /* 자식선택자 : 부모 > 자식 > 손자 > 증손자 { } */
        ul,li{list-style-type: none;}
        body{font-family: Dotum, '돋움', sans-serif;font-size: 12px;line-height: 200%;}
        a{text-decoration: none;color:#666}
        .nav{width:200px}
        .nav>li{background: url(images/icon2.jpg) no-repeat 0 8px;
                border-top: 1px dotted grey;
                text-indent: 15px;font-weight: bold;}
        .nav>.menu1{background: url(images/icon1.jpg) no-repeat 0 8px;border-top: none;}
        .nav>li.menu1>a{color: blue;}
        .nav>li>ul{background: aqua;}
        .nav>li>ul>li a{font-weight: normal}
        .sub{background: url(images/dot.jpg) no-repeat 10px 50%;}
        .sub>a{color:blue;}
    </style>
</head>
<body>
    <ul class="nav">
        <li class="menu1"><a href="#">품질마크소개</a>
            <ul>
                <li class="sub"><a href="#">품질마크 개요</a></li> 
                <li><a href="#">인증 절차</a></li>
            </ul>
        </li>
        <li><a href="#">인증위원회</a></li>
        <li><a href="#">인증심사기준</a></li>
        <li><a href="#">품질마크 심사 접수</a>
            <ul>
                <li><a href="#">신규심사</a></li>
                <li><a href="#">갱신심사</a></li>
            </ul>
        </li>
        <li><a href="#">진행상태 확인</a></li>
        <li><a href="#">인증사이트 현황</a></li>
        <li><a href="#">인증사이트 통계</a></li>
    </ul>
</body>
</html>

당시 결과물

= 업로드 직전에 캡처 뜨려고 하다 발견하고
이 꼬라지 용납 못 하는 디테일 강박환자 <<~~는 나~~

업데이트 버전도 올려본다.

색깔 뽑는 건 포토샵으로 가능하지만 귀찮은 관계로

육안으로 비슷해보이는 색으로 뽑아 보았다.

2022/01/31 업데이트 버전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>navigation 업데이트<title>
    <style type="text/css">
        ul,li { list-style-type : none; }
        body { font-family : Dotum, '돋움', sans-serif; font-size : 12px; line-height : 200%; }
        a { text-decoration : none; color : #666; }
        .nav { width : 150px; }
        .nav>li { background : url(images/icon2.jpg) no-repeat 0 8px;
                  border-top : 1px dotted grey; text-indent : 15px; font-weight: bold; }
        .nav>.menu1 { background: url(images/icon1.jpg) no-repeat 0 8px;border-top: none; }
        .nav>li.menu1>a { color: darkblue; }
        .nav>li>ul { padding-left: 10px; margin: 5px 0px 10px ; background: rgb(213, 243, 255); }
        .nav>li>ul>li { text-indent: 10px; }
        .nav>li>ul>li a { font-weight: normal; }
        .sub { background: url(images/dot.jpg) no-repeat 0px 50%;}
        .sub>a { color:darkgreen; }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="menu1"><a href="#">품질마크소개</a>
         <ul>
            <li class="sub"><a href="#">품질마크 개요</a></li> 
            <li><a href="#">인증 절차</a></li>
         </ul>
        </li>
        <li><a href="#">인증위원회</a></li>
        <li><a href="#">인증심사기준</a></li>
        <li><a href="#">품질마크 심사 접수</a>
            <ul>
                <li><a href="#">신규심사</a></li>
                <li><a href="#">갱신심사</a></li>
            </ul>
        </li>
        <li><a href="#">진행상태 확인</a></li>
        <li><a href="#">인증사이트 현황</a></li>
        <li><a href="#">인증사이트 통계</a></li>
    </ul>
</body>
</html>

2022/01/31 업데이트 버전 결과물

변경점

.nav { width: 150px; }
.nav>li.menu1>a { color }
.nav>li>ul { padding-left : 10px; margin: 5px 0px 10px ; background: rgb(213, 243, 255); }
.nav>li>ul>li { text-indent : 10px; } (새로 추가)
.sub { background : 0px 50%; } ( x축 값 변동 )
.sub>a { color }

~~(지금 매우 격하게 자고 싶은 상황)~~

~~(밀려서 잘 수가 없는 상황)~~
(원래 30일 중에 12/24까지 업로드하려고 했는데)
(엄마님 심부름.. 테헹)

(오늘도 엄마님 심부름 있는데)
(ㄹㅇ 오늘 못 자는 거 아니냐..?)

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바