비주얼 스튜디오 코드 82_반응형 웹갤러리

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 82_반응형 웹갤러리

조반짝 2023. 7. 19. 15:07

728x90

html mark up

css edit

h1태그의 가상요소 만들기

폰트어썸 링크걸고 폰트어썸 넣기

폰트어썸 css edit

main html mark up

article 20개 만들기

article css edit

플러그인 사용

isotope 홈페이지 접속

Isotope · Filter & sort magical layouts (metafizzy.co)

Isotope · Filter & sort magical layouts

Install Download CDN Link directly to unpkg. Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save License Commercial license If you want to use Isotope to develop commercial sites, themes, pr

isotope.metafizzy.co

링크 걸기

코드 복사하기 붙여넣기

반응형 넣기

html add markup

css edit

on 이벤트 넣기

window.addEventListener("load",()=>{

			//사진배치
            let grid = new Isotope("section", { //배치할 요소를 감싸고 있는 요소명
                // options
                itemSelector: 'article', //배치할 요소
                columnWidth: 'article', //넚이값을 구할 요소명
                transitionDuration: "0.5s"
            });
        });

<html>

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sus's-웹갤러리</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/media.css">

</head>

<body>
    <header id="header">
        <h1>SUS'S WEB</h1>
        <ul>
            <li>
                <a href="#">
                    <i class="fa-brands fa-square-twitter"></i>
                    <span>Twiter</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa-brands fa-square-facebook"></i>
                    <span>Facebook</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa-solid fa-envelope"></i>
                    <span>E-mail</span>
                </a>
            </li>
        </ul>
    </header>
    <main>
        <ul>
            <li class="on"><a href="*">ALL</a></li>
            <li><a href=".odd">ODD</a></li>
            <li><a href=".even">EVEN</a></li>
        </ul>
        <section>
            <article class="odd">
                <div>
                    <img src="./img/p1.jpg" alt="article1">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p2.jpg" alt="article2">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p3.jpg" alt="article3">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p4.jpg" alt="article4">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p5.jpg" alt="article5">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p6.jpg" alt="article6">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p7.jpg" alt="article7">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p8.jpg" alt="article8">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p9.jpg" alt="article9">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p10.jpg" alt="article10">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p11.jpg" alt="article11">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p12.jpg" alt="article12">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p13.jpg" alt="article13">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p14.jpg" alt="article14">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p15.jpg" alt="article15">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p16.jpg" alt="article16">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p17.jpg" alt="article17">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p18.jpg" alt="article18">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="odd">
                <div>
                    <img src="./img/p19.jpg" alt="article19">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
            <article class="even">
                <div>
                    <img src="./img/p20.jpg" alt="article20">
                    <h2>Lorem ipsum, dolor</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </article>
        </section>
    </main>

    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

    <script>

        window.addEventListener("load",()=>{

            //사진배치
            let grid = new Isotope("section", { //배치할 요소를 감싸고 있는 요소명
                // options
                itemSelector: 'article', //배치할 요소
                columnWidth: 'article', //넚이값을 구할 요소명
                transitionDuration: "0.5s"
            });

            const btns = document.querySelectorAll("main ul li");
            //on 이벤트
            for(let el of btns){
                 //btns 갯수만큼 돌려주기
                el.addEventListener("click",e=>{
                    e.preventDefault();

                    //el 이벤트를 갖고있는 태그(li"내가선택한버튼")
                    const sort = e.currentTarget.querySelector("a").getAttribute("href");
                    //  getAttribute: 변수 sort안에 클릭한 대상의 자식인 'a'태그의 href의 속성을 가지고오겠다.
                    //grid를 재배열해줄 것임
                    grid.arrange({
                        filter: sort
                    });
                    
                    //on상태 삭제하기
                    for(let el of btns){
                        el.classList.remove("on");
                    }
                    //on상태 색추가하기
                    e.currentTarget.classList.add("on");
                });
            }
        });    
    </script>
</body>

</html>

<style.css>

@charset "utf-8";


  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
  /* @font-family: 'Orbitron', sans-serif; */

*{
    margin: 0;
    padding: 0;
}
ul,ol,li{
    list-style: none;
}
.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
a{
    text-decoration: none;
}
body{
    background-color: #efefef;
}
#header{
    width: 400px;
    /* 100%는 높이값이 안들어감 */
    height: 100vh;
    background: linear-gradient(45deg, aqua, royalblue) ;
    position: fixed;
    top: 0;
    left: 0;
}
#header h1{
    font: bold 50px/1 "Orbitron";
    color: #efefef;
    letter-spacing: 1px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
#header h1::before{
    content: "UI/UX DEVELOPMENT";
    display: block;
    font: 14px/1 'orbitron';
    color: #fff;
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    top: 100px;
    opacity: 0.8;
}
#header h1::after{
    content: "";
    display: block;
    width: 350px;
    height: 2px;
    background-color: #fff;
    margin-top: 20px;
}

#header ul{
    position: absolute;
    left: 40px;
    bottom: 100px;
    overflow: hidden;
    /* position과 float은 띄워져있기때문에 position이 있으면 overflow hidden안해도 무방 */
}
#header ul li{
    float: left;
    margin-right: 10px;
}
#header ul li a{
    font-size: 20px;
    color: #fff;
}
#header ul li a span{
    display: inline-block;
    font-weight: bold;
    opacity: 0.7;
    transform: scale(0.7) translateX(-10px);
}


main{
    margin-left: 400px;
    padding: 20px;
    box-sizing: border-box;
    /* background-color: red; */
}
main ul{
    width: 100%;
    margin-right: 20px;
    margin-bottom: 10px;
}
main ul::after{
    content: "";
    clear: both;
    display: block;
}
main ul li{
    float: right;
    width: 100px;
    height: 26px;
    margin-right: 20px;
}
main ul li a{
    display: block;
    height: 100%;
    width: 100%;
    background-color: #fff;
    color: #aaa;
    font:bold 7px/26px 'Orbitron';
    text-align: center;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.05);
}
main ul li.on a{
    background: linear-gradient(45deg, #67faf3, #58abf8);
    color: #fff;
    box-shadow: 0px 5px 20px rgba(0, 255, 255, 0.5);
}

main section{
    width: 100%;
}
main section::after{
    content: "";
    display: block;
    clear: both;
}
main section article{
    width: 20%;
    /* 20%라서 이미지가 한줄에 5개 나온다. */
    float: left;
    box-sizing: border-box;
    padding: 12px;
}
main section article div{
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
    border-color: #fff;
    border-radius: 4px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 14px;
}
main section article div img{
    width: 100%;
} 
main section article div h2{
    margin-top: 15px;
    font: bold 11px/1 'Orbitron';
    letter-spacing: 1px;
    color: #444;
    margin-bottom: 5px;
} 
main section article div p{
    font: 10px/1.2 'arial';
    color: #777;
    margin-bottom: 15px;
}

<media.css>

@charset "utf-8";

@media(max-width:1600px){
    #header{width: 350px;}
    main{margin-left: 350px;}
    #header h1{
        font: bold 30px/1 "Orbitron";
    }
    #header ul{
        left: 27px;
    }
    #header h1::after{width: 300px;}
    main section article{width: 25%}
}
@media(max-width:1200px){
    #header{width: 100%; height: 80px; position: relative;}
    #header h1{
        font: bold 24px/1 "Orbitron";
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-35%);
    }
    #header h1::before,#header h1::after{display: none;}
    #header ul{bottom: 30%; left: 83%;}
    #header ul li{margin-right: 20px;}
    #header ul li a span{display: none;}
    main{margin-left: 0;}
}
@media(max-width:900px){
    main section article{width: 33.33%}
}
@media(max-width:720px){
    #header ul{left: 70%;}
}
@media(max-width:680px){
    main section article{width: 50%}
}
@media(max-width:540px){
    main section article{width: 100%}
}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 83_ 이미지가 움직이는 효과 (0)	2023.07.20
[JAVASCRIPT]for문 (0)	2023.07.20
비주얼 스튜디오 코드 81_마우스오버효과_자바스크립트 (0)	2023.07.19
[JAVASCRIPT]선택문(Switch-case) (0)	2023.07.19
비주얼 스튜디오 코드 80_ 마우스 오버 효과_제이쿼리 (0)	2023.07.18

현재글비주얼 스튜디오 코드 82_반응형 웹갤러리

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

Java, CSS, ACTIVE, 자바스크립트, 코딩테스트, HTML, media, float, 이클립스, offset, 프론트엔드, position, Parallax, For문, 웹디자인, SQL, JavaScript, if문, 비주얼스튜디오코드, 자바,

Today :
Yesterday :

조반짝의 도전일지