📝 CSS정리
텍스트 수직 가운데 정렬하는 법 ?🤔
만약 텍스트 크기가 50px이면 line-height : 50px주면 된다.
.lnb-inner{
background-color: crimson;
height: 50px;
line-height: 50px;
} background-color를 흰색으로 했을 때 경계를 나타내고 싶다면?🤔
header.active .gnb-inner{
background-color: #fff;
ox-shadow: 0 3px 3px rgba(0, 0, 0, 0.082);
}x축 y축, 퍼진 정도, color이다.
x축으로 없고 y축으로 3px 퍼짐정도 3px 색상
css부분이 공통으로 사용하는 것이 있다면 하나로 몰아서 쓰기?🤔
.lnb-inner,
.gnb-inner{
transition: 0.5s;
}div 사라지게 하는 방법?🤔
header.active .lnb-inner{
/* display: none; */
height: 0;
overflow: hidden;
}display none을 해주거나
height:0을 해주고 넘친 부분 hidden으로 자른다.
📝 전체코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body{
margin:0;
}
header{
color: #fff;
text-align: center;
font-size: 20px;
position: absolute;
width: 100%;
top: 0;
left: 0;
position: fixed;
}
.lnb-inner,
.gnb-inner{
transition: 0.5s;
}
.lnb-inner{
background-color: crimson;
height: 50px;
line-height: 50px;
}
.gnb-inner{
background-color: #000;
height: 80px;
line-height: 80px;
}
/* Header Active Class */
header.active .lnb-inner{
/* display: none; */
height: 0;
overflow: hidden;
}
header.active .gnb-inner{
background-color: #fff;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.082);
color: #000;
}
.btn-top{
position: fixed;
right: 20px;
bottom: 20px;
font-size: 26px;
color:#fff;
background-color: #000;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
transform: translateY(100px);
opacity: 0;
transition: 0.5s;
}
.btn-top.active{
transform: translateY(0);
opacity: 1;
}
section p {
font-size: 3em;
color: #ddd;
line-height: 2em;
}
</style>
</head>
<body>
<div class="container">
<header >
<div class="lnb-inner">Lnb inner</div>
<div class="gnb-inner">Gnb inner</div>
</header>
<section>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis, natus, corrupti soluta, dolorum eligendi ad aspernatur tenetur quasi expedita commodi consectetur perspiciatis. Eveniet dolor impedit laudantium hic, dolorem a commodi illo. Eius pariatur quos vero, veritatis ad eaque temporibus? Deleniti, excepturi natus at, distinctio delectus corporis libero sint inventore, sequi soluta modi quidem facilis vero saepe. Placeat inventore itaque quia dolor cum, nobis eveniet. Eaque officia totam omnis eligendi illo. Sit earum reprehenderit maiores tempora sed libero adipisci velit suscipit nulla placeat eligendi repellat error minus officia asperiores obcaecati ratione accusamus sunt accusantium tempore, eaque impedit soluta praesentium dolorum? Officiis.
</p>
</section>
</div>
<a class="btn-top" href="#">
<i class="fa fa-arrow-up"></i>
</a>
<script>
/* Header Active Class */
$(window).scroll(function(){
if($(window).scrollTop() > 50){
$('header, .btn-top').addClass('active');
}else{
$('header, .btn-top').removeClass('active');
}
})
</script>
</body>
</html>
알고리즘 정리 블로그입니다.