본문 바로가기
2023/HTML

[HTML] reset / 네비게이션

by Or0i쿠 2023. 4. 5.
지난 시간

가장 기본적인 틀

*{margin: 0; padding: 0;}
li{list-style: none;}
a{color: #333; text-decoration: none;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}



네비게이션
#wrap{width: 1200px; margin: 0 auto; background-color: beige;}
#header{width: 90%; height: 100px; background-color: rgb(173, 218, 203);
    margin-left: 5%;
}
제목 테그 초기화
더보기
/* 제목 테그 초기화 */
h1,h2,h3,h4,h5,h6{font-weight: normal; font-size: 14px;}

 
#banner{width: 100%; height: 300px; background-image: url(../images/slide1.png);}
 <section id="banner1">
            <img src="./images/slide2.png" alt="">
        </section>
html에서 인라인 > 블록 으로 바꿔 틈이 생기지 않게 한다
 <section id="banner1">
            <img src="./images/slide2.png" alt="">
        </section>
img{display: block;}
<div class="notice">
                <img src="./images/gallery1.png" alt="img1" width="400" height="200">
            </div>
#contents>div>img{width: 400px;height: 200px;}
#contents>div{float: left; padding: 10px; background-color: aliceblue;}
#contents>div>img{width: 380px;height: 200px;}
%로
더보기
/* contents */
#contents{width: 100%; background-color: cadetblue; }
#contents>div{float: left; padding: 10px; background-color: aliceblue; 
    width: 400px; height: 200px; box-sizing: border-box;}
#contents>div>img{width: 100%;height: 100%;}
ㄴ
font-family: 'yg-jalnan'; > 폰트의 윗 한줄을 복사해 원하는 곳에  넣는다

예시

더보기
#footer{width: 100%; height: 100px; background-color: brown; font-family: 'Pretendard-Regular';}
세로 레이아웃_로고와 네베게이션
images_별빛 (2).zip
1.42MB

 
 
 

letter-spacing:  자간
border: (n)px (선종류) (색);  감싸는 선
더보기
<!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">
    <title>세로 레이아웃_로고와 네베게이션</title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1 class="logo">
                <img src="./img/logo.png" alt="logo_해운대빛축제">
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">이용안내</a></li>
                    <li><a href="#">이벤트 정보</a></li>
                    <li><a href="#">프로그램</a></li>
                    <li><a href="#">고객센터</a></li>
                </ul>
            </nav>
        </header>
        <section id="sect">
            <section id="banner">
                <img src="./img/banner03.png" alt="">
            </section>
            <section id="contents">
                <div class="notice">
                    <h4><a href="#">공지사항</a></h4>
                    <ul>
                        <li>
                            공지사항
                        </li>
                    </ul>
                </div>
                <div class="gallery">
                    <h4><a href="#">갤러리</a></h4>
                    <ul>
                        <li><img src="./img/gallery01.png" alt="g1"></li>
                        <li><img src="./img/gallery02.png" alt="g2"></li>
                        <li class="last"><img src="./img/gallery03.png" alt="g3"></li>
                    </ul>
                </div>
                <div class="link">
                    <h4><a href="#">바로가기</a></h4>
                    <ul>
                        <li>
                            바로가기
                        </li>
                    </ul>
                </div>
            </section>
            <footer id="footer"></footer>
        </section>
    </div>
</body>
</html>
@charset "utf-8";
/* 웹폰트 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {
    font-family: 'Dovemayo_gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.1/Dovemayo_gothic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareNeo-Variable';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/* 제목 테그 초기화 */
h1,h2,h3,h4,h5,h6{font-weight: normal; font-size: 18px; }

.notosanskr * { 
 font-family: 'Noto Sans KR', sans-serif;
}
*{margin: 0;padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{
    color: #333; 
    text-decoration: none;
}
img{display: block;}
.clearfix::after, .clearfix::before{content: ""; display: block;clear: both;}
#wrap{width: 1000px; margin: 0 auto;}

/* |header| */
#header{width: 250px; height: 650px; background-color: #e8eaf6  ; 
    float: left; 
}
/* .logo */
#header .logo{width: 250px; height: 100px; }
#header .logo > img{margin-top: 30px; margin-left: 25px; }
/* .nav */
#header .nav{width: 250px; padding: 5%;}
#header .nav>ul{}
#header .nav>ul>li{ height: 50px; background-color: #7e57c2 ;}
#header .nav>ul>li>a{color: #fff; text-align: center; line-height: 50px; display: block;
    font-family: 'Dovemayo_gothic'; font-size: 20px;
}
#header .nav>ul>li:hover{background-color: #5c6bc0;}

/* |section| */
#sect{width: 750px; height: 650px; background-color: #d1c4e9;
float: right;}
/* banner */
#banner{width: 100%; height: 350px; background-color: #5c6bc0 ;}


/* content */
#contents{width: 100%; height: 200px; background-color: #9fa8da ;}
#contents >div{width: 33.33%; height: 200px; float: left; padding: 10px; }
#contents >div>h4{width: 120px; height: 40px; line-height: 40px; text-align: center;
    font-family: 'NanumSquareNeo-Variable'; font-weight: bold; letter-spacing: 5px;
background-color: #c5cae9;}
#contents >div>h4>a{color: #333 !important;}
#contents >div>ul{border-top: 3px solid #333; padding-top: 10px; margin-top: 5%;}

#contents .notice{background-color: #5c6bc0;}
#contents .notice>ul{}
#contents .notice>ul>li{}

#contents .gallery{background-color: #e8eaf6;}
#contents .gallery>ul{}
#contents .gallery>ul>li{float: left; padding: 2px;}
#contents .gallery>ul>li>img{width: 72px;}
#contents .gallery>ul>li.last{}

#contents .link{background-color: #5c6bc0;}
#contents .link>ul{}
#contents .link>ul>li{}


/* footer */
#footer{width: 100%; height: 100px; background-color: #c5cae9;}

연습

 

엉망진창 연습
images.zip
0.38MB

 

더보기
<!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">
    <title></title>
    <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1><img src="./images/logo.gif" alt="로고"></h1>
            <ul>
                <li><a href="#">m1</a></li>
                <li><a href="#">m2</a></li>
                <li><a href="#">m3</a></li>
                <li><a href="#">m4</a></li>
            </ul>
        </header>
        <section id="banner" class="clearfix">
            <img src="./images/banner.jpg" alt="">
        </section>
        <section id="contents" class="clearfix">
            <div class="con1">
                <h4><a href="#">공지사항</a></h4>
                <ul>
                    <li>-공지-</li>
                    <li>-공지-</li>
                    <li>-공지-</li>
                </ul>
            </div>
            <div class="con2">
                <h4><a href="#">갤러리</a></h4>
                <ul>
                    <li><img src="./images/thumb1.jpg" alt=""></li>
                    <li><img src="./images/thumb1.jpg" alt=""></li>
                    <li><img src="./images/thumb1.jpg" alt=""></li>
                </ul>
            </div>
            <div class="con2">
                <h4><a href="#">배너</a></h4>
                <ul>
                    <li><li><img src="./images/thumb1.jpg" alt=""></li>
                    <li><img src="./images/thumb1.jpg" alt=""></li>
                    <li><img src="./images/thumb1.jpg" alt=""></li></li>
                </ul>
            </div>
        </section>
        <footer id="footer" class="clearfix">
            <div class="f_logo">로고</div>
            <div class="f_copy">카피라이트</div>
            <div class="f_co">패밀리사이트</div>
        </footer>
    </div>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none; display: block; color: black;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}

h1,h2,h3,h4,h5,h6{font-size: 18px; font-weight: bold; }

#wrap{width: 1200px; margin: 0 auto; background-color: whitesmoke; height: 700px;}

#header{width: 100%; height: 100px; float: left;}
#header >h1{width: 250px; height: 100px; background-color: white; }
#header >h1>img{margin-top: 30px;margin-left: 25px;}
#header >ul{width: 60%; height: 50px; background-color: aliceblue; float: right; 
    margin-top: -50px;}
#header>ul>li{width: 25%; height: 50px; float: left; background-color: green; }
#header>ul>li>a{text-align: center; font-size: 24px; ;line-height: 50px;}

#banner{width: 100%; height: 300px;background-color: greenyellow; clear: both;}
#banner>img{width: 100%; height: 100%;}

#contents{width: 100%; height: 200px; background-color: aquamarine;}
#contents>div{width: 33.33%; height: 200px; display: block; background-color: #f9fbe7  ;
    float: left;}
#contents>div>h4{padding: 10px 10px; background-color: #66bb6a ; width: 40%;
 text-align: center; margin: 10px;}
#contents>div>h4>a{text-align: center; }

#contents>div>ul{border-top: 3px solid;}
#contents>.con2>ul>li{float: left;}
#contents>.con1>ul>li{text-align: center; line-height: 40px;}
#contents>div>ul>li>img{padding: 8px;}
#contentS

#footer{width: 100%; height: 100px; background-color: violet;}
#footer>div{float: left; font-size: 40px; text-align: center; line-height: 100px; }
#footer .f_logo{width: 200px; height: 100px; background-color: #aed581 ;}
#footer .f_copy{width: 700px; height: 100px; background-color: #9ccc65 ;}
#footer .f_co{width: 300px; height: 100px; background-color: #8bc34a ;}
저작자표시 비영리 동일조건 (새창열림)

'2023 > HTML' 카테고리의 다른 글

[HTML] 스크립트 사용법 & 가상요소 활용  (0) 2023.04.07
[HTML] 포지션 활용  (0) 2023.04.06
[HTMl] 이미지 / 리스트  (0) 2023.04.04
[HTML] 간단한 기본 홈페이지 구조  (0) 2023.04.03
[HTML] 기본 이해하기  (0) 2023.03.31

관련글

티스토리툴바