본문 바로가기
웹/CSS

[코딩 공부_49] 페이지 만들기-main편

by BEE_0o0 2021. 4. 9.

오늘은 마지막 페이지 main 페이지를 만들었다!

 

 

<결과화면>

gif로 변환하면서 알아차린 부분인데 녹화할때 마우스가 안보인다 마치 혼자 움직이고 있는 듯한 느낌이 든다 하하..

 

 

<main.css>

<style>
@charset "utf-8";
main .inner {
    background: var(--primary-color);
    padding-bottom: 2rem;
}
/* header logo */
header {
    margin-top: 1rem;
    text-align: center;
    /* border: 2px solid blue; */
}
header .logo {
    height: 70px;
    /* border: 1px solid #000; */
    line-height: 1em;
}
header .gnb {
    padding-right: 1rem;
}
header .gnb li {
    display: inline-block;
    width: 100px;
    height: 50px;
}
header .gnb li a {
    line-height: 50px;
    width: 100%;
    height: 100%;
    color: var(--primary-bg);
    background: var(--primary-color);
}
header .gnb li a:hover {

}
/* header nav */

/* main.banner */
.banner {
    padding: 1rem;
}
.banner .banner-container {
    margin: 0 auto;
    width: 300px;
    height: inherit;
    overflow: hidden;
}
.banner .scroll {
    width: 900px;
    height: inherit;
    font-size: 0;
    animation: rolling 5s infinite alternate;
}
.banner .scroll img {
    width: 300px;
    height: inherit;
}
@keyframes rolling {
    0% {
        margin-left: 0px;
    }
    50% {
        margin-left: -300px;
    }
    100% {
        margin-left: -600px;
    }
}

/* main.desc */
/* 
    상위 부모요소는 무조건 넣어야한다 그래야 그룹화가 확실해짐! 유일하더라도 !
    예외, 글로벌하게 사용하는 것들 mobileFont
 */
.desc {
    background: var(--primary-color);
    color: var(--primary-bg);
}
.desc .item {
    height: 200px;
    margin: 0 auto;
    border: 1px solid #aaa;
    margin-bottom: 20px;
    margin: 0 2rem;
}
.desc .photo {
    display: inline-block;
    width: 30%;
    height: 100%;
    /* 
    hidden을 주면 이미지 사각형 전체가 커지는 게 아니라 안에 있는 이미지만 확대 됨
    수정+) hidden은 주면 엘리먼트에 벗어나는 것들을 잘라주는 것이다 그래서 자식요소 scale시
    벗어난 부분이 안보이게 되면서 영역 내에 확대 되는 것처럼 보여지게 보인다!
    */
    overflow: hidden;
}
.desc .photo:hover img {
    transform: scale(1.2);
}
.desc .photo img {
    height: 100%;
    transition: all .5s;

}
.desc .sub-desc {
    display: inline-block;
    width: 60%;
    padding: 1rem 1rem;
    padding-left: 1rem;
    vertical-align: top;
}
.desc .sub-desc h3 {
    margin-bottom: 10px;
}
.desc .sub-desc p {
    margin-bottom: 10px;
}
.desc .sub-desc a {
    padding: .5em;
    font-size: 1rem;
    color: var(--primary-color);
    background: var(--primary-bg);
    border-radius: .6rem;
}
.desc .sub-desc a:hover {
    background: var(--primary-color);
    color: var(--primary-bg);

}
.desc .item:nth-child(2) {
    text-align: right;
}


/* footer nav */
footer {
    padding: 1rem;
    text-align: center;
}
footer a:hover {
    text-decoration: underline;
}
footer ul {
    display: inline-block;
    padding: 0.5rem 5rem;
}
footer ul li:nth-child(1) {
    font-weight: bold;
}
footer li {
    margin-bottom: 1rem;
}
</style>

 

<main.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css">
<title></title>
</head>
<body>
    <div class="wrap">
        <header>
            <div class="inner">
                    <h1 class="logo">
                        <a href="index.html">
                            Animate.css pratice
                        </a>
                    </h1>
                <nav>
                    <ul class="gnb">
                        <li><a href="#">about</a></li>
                        <li><a href="#">info</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">service</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main class="main">
            <div class="inner">
                <!-- banner section -->
                <section class="banner">
                    <div class="banner-container">
                        <div class="scroll">
                            <img src="./image/banner-1.jpg" alt="">
                            <img src="./image/banner-2.jpg" alt="">
                            <img src="./image/banner-3.jpg" alt="">
                        </div>
                    </div>
                </section>
                <section class="desc">
                    <div class="item">
                        <div class="photo">
                            <img src="./image/hollywood.jpg" alt="holly wood img">
                        </div>
                        <div class="sub-desc">
                            <h3>Lorem, ipsum dolor.</h3>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi perspiciatis quam, repellat id vitae quis quas ipsam perferendis pariatur voluptas ratione dolore qui maxime minima at nemo, accusamus praesentium. Id.
                            </p>
                            <a href="#">button</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="sub-desc">
                            <h3>Lorem, ipsum dolor.</h3>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi perspiciatis quam, repellat id vitae quis quas ipsam perferendis pariatur voluptas ratione dolore qui maxime minima at nemo, accusamus praesentium. Id.
                            </p>
                            <a href="#">button</a>
                        </div>
                        <div class="photo">
                            <img src="./image/los-angeles1.jpg" alt="holly wood img">
                        </div>
                    </div>
                    <div class="item">
                        <div class="photo">
                            <img src="./image/los-angeles2.jpg" alt="holly wood img">
                        </div>
                        <div class="sub-desc">
                            <h3>Lorem, ipsum dolor.</h3>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi perspiciatis quam, repellat id vitae quis quas ipsam perferendis pariatur voluptas ratione dolore qui maxime minima at nemo, accusamus praesentium. Id.
                            </p>
                            <a href="#">button</a>
                        </div>
                    </div>

                </section>
            </div>
        </main>
        <footer>
            <div class="inner">
                <ul>
                    <li>회사정보</li>
                    <li><a href="#">회사소개</a></li>
                    <li><a href="#">스토리</a></li>
                    <li><a href="#">채용안내</a></li>
                </ul>
                <ul>
                    <li>고객지원</li>
                    <li><a href="#">1:1 문의</a></li>
                    <li><a href="#">이용약관</a></li>
                    <li><a href="#">개인정보</a></li>
                </ul>
                <ul>
                    <li>제휴문의</li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">info</a></li>
                    <li><a href="#">email</a></li>
                </ul>
                <p class=“copy”>Copyright &copy; chaos Corp. All rights reserved.</p>
            </div>
        </footer>
    </div>
</body>
</html>

느낀점 : 재미있었고 코드가 많아지면 많아질수록 여기가 어떤 그룹이지 하고 헷갈릴 때가 많았는데 개발자도구(f12)로 확인하면서 보니 금방금방 코드를 수정할 수 있었던 거 같다 이때까지 개발자도구의 소중함을 잘몰랐는데 이번 페이지를 만들면서 소중함을 느꼈다 ㅎㅎ.. 담주엔 더 많은 것을 배우겠지?? 더 열심히 해야겠다!! 

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_51] animation-project 실습-1  (0) 2021.04.14
[코딩 공부_50] 페이지 기획안 만들어보기  (0) 2021.04.12
[코딩 공부_48] library 사용해보기(페이지 만들기-index편)  (0) 2021.04.09
[코딩 공부_47] 다양한 animation 실습해보기  (0) 2021.04.07
[코딩 공부_46] animation에 대하여  (0) 2021.04.06

관련글

댓글

티스토리툴바