채택완료

개발자 도구로 볼때 style값에 높이가 반응적으로 변하는 코드에 대한 질문입니다.

2020-05-21 (목) 19:31:34 2,747

크롬 개발자도구로 다른사이트에 접속하여 코드를 보면서 공부하고있는 중입니다.

이 중에서 <div class="test" style="height: 700px;"> 이렇게 있다고 가정하면 화면 픽셀에 따라 style의 height의 값이 바뀝니다. 이런 코드는 어떤걸 사용하는 건가요?

|

답변 2개

채택된 답변
+20 포인트

sinbi 님 답변대로, 자식이 상속받는 부모의 값에 전부 height 100%를 작업하여 css 만으로도

자동으로 높이를 구현 할 수 있습니다.

질문하신분의 높이에 따른 height 값이 스타일로 실시간 반영되서 보이는건,

제이쿼리로 작업한거고, 아래 예시입니다.

Copy
(function($) { 
        $(window).ready(function(){
            res()
            $(window).resize(function(){
                res()
            })
            function res(){
                var he = $(window).height();
                    $(".bg_fix").css("height",he)
                
            }
        })
}) (jQuery);

.bg_fix 클래스 선언한 div height값이 style 로 inline 요소로 제어가 됩니다.

메인 첫화면 만드는데 아주 유용하게 쓰이는 코드입니다. 

퍼블리셔에겐 꿀입니다 ㅋㅋ

(제 사이트 메인화면이 위와 같은 방식으로 작업되었습니다.)

답변을 작성하려면 로그인이 필요합니다.