(2024 02 29)html,css,js 10일차

웹페이지 만들어보기

책의 내용을 따라 하여 웹페이지를 제작해보는 연습을 하였다 

위에버튼을 클릭하면 버튼이 펼처지는 웹페이지로

        #checkbox {

            display: none;

        }

        #checkbox + nav {

            display: block;

        }

        #checkbox:checked + nav {

            display:none

        }

            <input id="checkbox" checked="checked" type="checkbox">

            <nav>

                <ul>

                    <li><a href="#">Brand</a></li>

                    <li class="active"><a href="#">Network</a></li>

                    <li><a href="#">Store</a></li>

                    <li><a href="#">Support</a></li>

                </ul>

            </nav>

 

위 기능을 하는것만 코드를 가지고 와 해석해보면

checkbox를 클릭시 nav가 보이게 만들어지고 클릭하지 않으면 안보이게만드는 방식의 메뉴 방식이다 

 

라이트박스와 masonry의 플로그인 을 이용하여 책에 나와있는 대로 따라한 웹페이지로 

사진을 누르면

이런 화면으로 전환되어 누른 사진을 크게 볼수 있는 sns에서 자주 볼수 있는 기능 이다