TIL(today I learned)

2020.09.25 #TIL

노랑세희 2020. 9. 26. 00:29

 내일 GTQ 시험이여서 일찍 자야한다 그래서 간단한 예제 두가지만 만들었다. 둘다 단순한 구조라서 기초를 연습할 수 있었다.

 

1. 기초 서브메뉴 만들기

 

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="기초 서브메뉴.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>basic sub menu</title>

</head>

<body>

    <div class="nav">

        <h2>커리큘럼</h2>

        <ul>

            <li><a href="#a">정규 프로그램</a></li>

            <li><a href="#a">특별 프로그램</a></li>

            <li><a href="#a">온라인 학습 프로그램</a></li>

            <li><a href="#a">독서 프로그램</a></li>

        </ul>

    </div>

</body>

</html>

 * nav 영역의 기초 구조를 만들어보았음 일반적으로는 여기에 여러 단계가 추가된 구조로 많이 사용됨

 

CSS

.nav{

    padding: 50px;

    width: 225px;

}

.nav h2{

    margin: 0;

    padding: 0 0 8px;

    font-size: 25px;

    color: #333;

    font-weight: normal;

    text-align: right

}

.nav ul{

    padding: 0;

    margin: 0;

    border-top: 2px solid #ff9800;

    border-bottom: 1px solid #999;

}

.nav li {

    list-style: none;

    border-top: 1px solid #e2e2e2;

}

.nav li:first-child{

    border-top: none;

}

.nav li a{

    display: block;

    height: 42px;

    line-height: 42px;

    text-indent: 10px;

    text-decoration: none;

    font-size: 14px;

    color: #333333;

}

.nav li:hover a{

    background: url(bg_snb.gif) no-repeat right 10px center #f5f5f5;

}

 

 * 사용성을 위해 a에 높이나 여백을 줘서 클릭 범위를 넓힐 수 있음

 

 

결과

 

 

 

 

2. 기초 배너 만들기

 

 

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="banner basic.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>banner</title>

</head>

 

<body>

    <div class="banner">

        <h2>바로가기</h2>

        <ul>

            <li class="ico1">

                <a href="#a">

                    자주하는<br>질문

                </a></li>

            <li class="ico2">

                <a href="#a">

                    1:1 문의<br>(Q&A)

                </a></li>

            <li class="ico3">

                <a href="#a">

                    입점 및<br>제휴 문의

                </a></li>

        </ul>

    </div>

</body>

 

</html>

 

 

 

CSS

body{

    padding: 50px;

}

.banner{

    width: 355px;

}

.banner h2{

    margin: 0px;

    padding: 0 0 16px;

    font-size: 16px;

    color: #444;

}

.banner ul{

    margin: 0;

    padding: 22px 0 25px;

    border: 1px solid #e8e8e8;

    background: #f8f8f8;

}

.banner ul:after{ 

    content:""; 

    display: block; 

    clear: both;

}

.banner ul li{

    float: left;

    list-style: none;

    border-right: 1px solid #e8e8e8;

}

.banner ul li:last-child{

    border: none;

}

.banner ul li a{

    display: block;

    width: 117px;

    height: 105px;

    padding: 71px 0 0;

    font-size: 15px;

    color: #444;

    text-align: center;

    text-decoration: none;

    box-sizing: border-box;

}

.banner ul li.ico1{

    background: url(ico1.png) no-repeat center top;

}

.banner ul li.ico2{

    background: url(ico2.png) no-repeat center top;

}

.banner ul li.ico3{

    background: url(ico3.png) no-repeat center top;

}

 * a위의 아이콘은 li에 background img로 넣고 center top 하면 위쪽 가운데 정렬됨

 * li에 float:left; 를 사용해서 왼쪽 정렬 할 수 있고 부모요소에 clear: both; 해야 영향을 막을 수 있음

 

 

결과