css 스킬 모음

꽉찬화면 

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

마우스 반응 색변화

.container .nav ul li a:hover  

{

    color: #1fdfdf;

}

//태그 옆에 : hover 

 

백그라운드 불투명 이미지 삽입

 width: 100%;

    height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(./images/room.jpg);

css 폰트 불러오기

@font-face {

    font-family: abster; // 사용자지정 이름

    src: url(font/abster-webfont.woff) format('woff'); 

css폰트 사용하기

    color: white;

    text-decoration: none; //기본 데코레이션 삭제

    font-family: abster;  // 사용자지정 이름

 

폰트 화면 중앙 위치(중앙정렬)

.container .hero{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

    color: white;

    text-align: center; /* 텍스트 중앙 정렬*/

    font-family: Verdana, Geneva, Tahoma, sans-serif; 

 

}

마우스 이동시 작아지는 효과

.card-box:hover{

    transform: scale(0.95); /* 작아지는 효과*/

}

가로정렬

display: inline-block; /*가로 정렬*/

 

이미지 위로 텍스트

.text-wrap{

    position: absolute;

    bottom:0;

    z-index: 50;

    padding: 30px; /* 패딩으로 위아래 조절*/

    

}

중앙 정렬

{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

반응형으로 좌표 지정

#header .header_btn{position: absolute; right: 10.938vw; top: 1.406vw; z-index: 1;}

 

/*이미지 반응형 효과*/

img{display: block; width: 100%;} /*이미지 반응형 효과*/

 

위치 이동 x좌표 y 좌표

transform: translate(-50%,-50%);

 

/* 백그라운드 이미지 위에 이미지를 올리는 코드 */

#sec1 .sec1_main1{position: absolute; top: 5vh; bottom: px; left: 50%; transform: translate(-50%); width: 30vw;  z-index:2;}

 

 /*이미지 높이 넓이를 div 값과 맞추는 코드*/

.sec_bg img{width: 100%;height: 80vh;} /*이미지 높이 넓이를 div 값과 맞추는 코드*/

 

/* 백그라운드 이미지 위에 이미지를 가로정렬로 동시에 두개 올리는 코드 */

#sec1 .sec1_main1{position: absolute; top: 25.573vw; left: 50%; transform: translateX(-50%); width: 52.604vw; font-size: 0;}

#sec1 .sec1_main1 div{width: 25.833vw; display: inline-block;}

#sec1 .sec1_main1 div:first-child{margin-right: 0.469vw;}

#sec1 .sec1_main1 div:last-child{margin-left: 0.469vw;}