( 공부복습) 색상표현을 이용한 스타일링 응용

▶ 배경이미지 작성 시 속기법

background : 배경 속성의 축약하여 5가지 배경 속성을 모아 작성하는 속기법

ex )

#bg { background : #ff0000 url(bg.gif) top left no-repeat; }  >>  색상 경로 위치 반복

 

▶ transition 작성 시 속기법

transition : 선택자가 변화되는 것을 시간의 흐름따라 변화시키는 속성

한번에 처리하는 속기법

ex )

#bg {transition : all 0.5s ease 0.5s }  >>  속성 시간 속도 지연시간

---

만들어보기!

---

<!-- header -->

    <header>

        <a href="#">D’HTML</a>

        <img src="img/ham.png" alt="" />

    </header>

    <!-- //header -->

 

    <!-- section -->

    <section>

        <div class="bg">

            <img src="img/bg1.png" alt="" />

            <span>

                <!--오버레이효과-->

            </span>

        </div>

 

        <div class="info">

            <h1>

                "Neque porro quisquam<br />

                est dolorem ipsum</br />

                quia dolor sit amet, cons<br />

                ectetur..”

            </h1>

 

            <div class="text">

                <h2>What is Lorem Ipsum?</h2>

                <p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the

industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type

and scrambled it to make a type specimen book. It has survived not only five centuries, but also the

eap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s

with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop

publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                </p>

            </div>

        </div>

 

        <div class="bg2">

            <img src="img/bg2.png" alt="" />

            <span>

                <!--오버레이-->

            </span>

        </div>

    </section>

    <!-- //section -->

 

    <!-- footer -->

    <footer>

        Copyright ⓒ 2021 minjeong All rights reserved.

    </footer>

    <!-- //footer -->

---

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

 

*{

    padding: 0;

    margin: 0;

}

 

a{

    text-decoration: none;

    color: #fff;

    font-family: 'Playfair Display', serif;

}

 

ul,ol{

    list-style: none;

}

 

img{

    display: block;

}

 

body{

    font-size: 14px;

    color: #fff;

    font-family: 'Playfair Display', serif;

    background:url(../img/txtbg.png) right top no-repeat, linear-gradient(#c66252, #904d42);

    /* background 작성 속기법 : 색상 혹은 url[ 경로 ] 이미지 위치값 반복 ( 다중작성 쉼표 구분 )*/

}

 

header{

    width: auto;

    overflow: hidden;

    padding: 50px;

}

 

header>a{

    float: left;

    line-height: 25px;

    font-size: 30px;

    font-weight: 800;

}

 

header>img{

    float: right;

}

 

section{

    width: 73%;

    margin: 100px auto;

    height: 1200px;

    position: relative; /*부모기준 - bg2*/

}

 

.bg{

    width: 455px;

    height: 683px;

    float: left;

    box-shadow: 100px 100px 80px 0 rgba(0,0,0,0.5);

    position: relative;

    /* 부모기준 - 오버레이 */

}

 

.bg span{

    width: 455px;

    height: 683px;

    display: block;

   /*

   span은 인라인성격이기에 블럭설정을 해줌

   (글자는 폭설정이 안됨 따라서 블럭설정을함)

   */

   position: absolute;

   /* .bg안에 있는 이미지 위로  span을 겹쳐주기 위해 기준이 .bg로 위치에 대한 기점이 됨 */

   top: 0;

   left: 0;

   background: linear-gradient(to top, rgba(0,0,0,0.95),rgba(0,0,0,0));

   opacity: 0;

   /* 동작을 부여! 미리 사라지게 */

   transition: all ease-in 0.4s;

   /* transition : 속성 시간 속도 지연시간 */

}

 

.info{

    width: 500px;

    height: 760px;

    float: right;

    position: relative;

    /* 부모기준 - 글자요소들 */

    z-index: 2;

}

 

.info h1{

    position: absolute;

    top: 30px;

    right: 0;

    font-weight: 800;

    font-size: 28px;

}

 

.info .text{

    position: absolute;

    bottom: 0;

    font-size: 35px;

}

.info .text p{

    font-size: 15px;

    font-weight: 300;

    font-family: 'Lato', sans-serif;

    line-height: 30px;

    margin-top: 50px;

}

 

.bg2{

    width: 688px;

    height: 435px;

    box-shadow: 100px 100px 80px 0 rgba(0,0,0,0.5);

    position: absolute;

    bottom: 30px;

    left: 300px;

    z-index: 0;

   

}

 

.bg2 span{

    width: 688px;

    height:435px;

    display: block;

   /*

   span은 인라인성격이기에 블럭설정을 해줌

   (글자는 폭설정이 안됨 따라서 블럭설정을함)

   */

   position: absolute;

   /* .bg안에 있는 이미지 위로  span을 겹쳐주기 위해 기준이 .bg로 위치에 대한 기점이 됨 */

   top: 0;

   left: 0;

   background: linear-gradient(to top, rgba(0,0,0,0.95),rgba(0,0,0,0));

   opacity: 0;

   /* 동작을 부여! 미리 사라지게 */

   transition: all ease-in 0.4s;

   /* transition : 속성 시간 속도 지연시간 */

}

 

footer{

    width: auto;

    padding: 50px 0;

    overflow: hidden;

    background-color: #7a3f35;

    text-align: center;

}

 

/* hover 효과*/

 

.bg:hover span{

    opacity: 1;

}

 

.bg2:hover span{

    opacity: 1;

}

---

index.html

0.00MB

style.css

0.00MB