CSS Centering In Vertical

HOW TO CENTER IN VERTICAL

1.table/table-cell

<section class="section-pr" style="height: 640px;">
    <div class="container pr-text-container">
        <div class="pr-table-cell">
            <p class="content">언론보도</p>
            <a class="link" href="#">보러가기</a>
            <p class="content">동영상</p>
            <a class="link" href="#">보러가기</a>
        </div>
    </div>
</section>

2

.section-pr{
    background: url('/KIDMIA/static/img/home/pr.png') no-repeat;
    background-size: cover;
    background-position: center center;
}
.pr-text-container{
    display: table;
    height: 100%;
    width: 100%;
}
.pr-table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

1

요약하자면,

상위div
display:table;
height:100%;
width:100%;

하위div
display:table-cell;
vertical-align:middle;

2.line-height

a Tag의 경우, div를 씌워서 위와 같은 방법으로 하거나, line-height를 주면 쉽게 정렬할 수 있다.

3.Transform:translateY(value);

검색하다가 여러 번 봤는데, 아직 적용하는 방법을 잘 모르겠다. 다음 기회에 포스팅하겠다.

Advertisements

jQuery resize background

var theWindow = $(window),
    $bg = $(".section-main");

function resizeBg() {
    $bg.css("height", theWindow.height() + "px");
}
theWindow.resize(resizeBg).trigger("resize");
<section class="section-main"> </section>
.section-main{
    background: url('/KIDMIA/static/img/home/main.png') no-repeat;
    background-size: cover;
    background-position: center center;
}

COMMENT:

1. jQuery 마지막 줄 : window창이 resize 될 때마다 resizeBg()라는 function을 호출한다.

2. background-size 차이점은 첨부한 그림 참고

-cover
-contain : 안쪽 맞춤 / background image가 짤리는 부분이 없다.

1

jQuery change screen

$('#intro').click(function(){
    $('html, body').animate({
    scrollTop: $(".section-intro").offset().top
}, 1500);
});
<li class="nav-item"><a id="intro">소개</a></li>
<section class="section-intro" style="height: 840px">
</section>

scroll은 selector의 top좌표의 위치로 이동하게 된다.

COMMENT:

1. animate의 가장 마지막 변수의 의미는 스크롤이 움직이는 속도이다. 값이 클 수록 천천히 움직인다.

2. javascript에서 selector를 효율적으로 사용할 것

jQuery change brand logo in nav bar

$(document).scroll(function(){
    var scroll = $(this).scrollTop();

    if(scroll>$(window).height()){
        $('.navbar-brand').addClass('navbar-brand-scroll');
    }
    else {
        $('.navbar-brand').removeClass('navbar-brand-scroll');
    }
})
.navbar-brand {
    content: url("/KIDMIA/static/img/home/logo_white.png");
    width: 160px;
    height: 46px;
    padding: 0px;
}

.navbar-brand.navbar-brand-scroll {
    content: url("/KIDMIA/static/img/home/logo_gray.png");
    width: 160px;
    height: 46px;
    padding: 0px;
}
<div class=" navbar-brand"></div>

1

좌측 상단에 있는 brand logo는 scroll 위치가 main page를 넘어 설 때 다른 색 image로 바뀌게 된다. 결과는 다음과 같다. main page의 image 크기를 window의 크기와 같이 지정하였으므로, if문의 조건은 위와 같다.