[21일차 연습]

1. FLEX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}

        .gnb{
            width:600px;
            height:300px;
            background-color: darkblue;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            justify-content: center;
        }

        .gnb>li{
            background-color: darkcyan;
            width:200px;
        }

    </style>
</head>
<body>
    <ul class="gnb">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>

display: flex 를 배움!

row 하면 수평으로 쭉

column 하면 수직으로 쭉~

flex-wrap:wrap -> 포함된 상태에서 ㄱ ㄱ

flex-wrap:nowrap -> 범위를 벗어나도 된다~ 라는 의미 (근데 여기서는 안벗어남 li의 width를 200px; 줬는데 왜징)

justify-content:center 하믄 중간 정렬~

float: left; display:inline-block 으로만 하다가 flex 만나니깐 엄청 쉽게 느껴짐

2. 레이아웃 짤 때 팁 ! width class로 주기 + margin: 0 auto; 도!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}

        .w100{
            width:100%;
        }

        .w1200{
            width:1200px;
            margin:0 auto;
        }


        #header_wrap{
            background-color: darkcyan;
            height:100px;
        }

        #visual{
            background-color: darkgoldenrod;
            height:500px;
            margin-top: 30px;

        }

    </style>
</head>
<body>

    <div id="wrap" class="w100"> 
        <div id="header_wrap" class="w100">
            <div id="header" class="w1200">
                Hello
            </div>
        </div>
    </div>

    <div id="visual_wrap" class="w100">
        <div id="visual" class="w1200">

        </div>
    </div>



</body>
</html>

3. vw, vh

vw= view width

vh= view height

축소 / 확대 해도 픽셀을 그대로 유지

반응형 만들때 유용

4. 레이어 팝업 팝팝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}

        #layer_popup_wrap{
            width:100vw;
            height:100vh;
            background-color: black;
            opacity:0.6;
            position:fixed;
            top:0;
            display:none;
        }

        #layer_popup{
            width:500px;
            height:500px;
            background-color: darkgoldenrod;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

        .close{
            width:80px;
            height:30px;
            background-color: darkgray;
            color:black;
            cursor: pointer;
            display:block;
            text-align: center;
        }



    </style>
</head>
<body>

    <button id="btn">레이어팝업</button>

    <div id="layer_popup_wrap" class="">
        <div id="layer_popup">
            호롤롤롯
            <span class="close">닫기</span>
        </div>
    </div>

    <script type="text/javascript">
        let layerBtn=document.querySelector('#btn');

        layerBtn.addEventListener('click',open);

        function open(){
            popup_wrap=document.querySelector('#layer_popup_wrap');
            popup_wrap.style.display='block';
        }


    </script>

</body>
</html>

질 문

왜 안되지............

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}

        #layer_popup_wrap{
            width:100vw;
            height:100vh;
            background-color: black;
            opacity:0.6;
            position:fixed;
            top:0;
            display:none;
        }

        #layer_popup{
            width:500px;
            height:500px;
            background-color: darkgoldenrod;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

        .close{
            width:80px;
            height:30px;
            background-color: darkgray;
            color:black;
            cursor: pointer;
            display:block;
            text-align: center;
        }

        .on{
            display:block;
        }

    </style>
</head>
<body>

    <button id="btn">레이어팝업</button>

    <div id="layer_popup_wrap" class="">
        <div id="layer_popup">
            호롤롤롯
            <span class="close">닫기</span>
        </div>
    </div>

    <script type="text/javascript">
        let BTN = document.querySelector('#btn');

        BTN.addEventListener('click', show);

        function show(){
            let layer=document.querySelector('#layer_popup_wrap');
            layer.setAttribute('class','on');
        }

    </script>

</body>
</html>

레이어팝업 열고 닫기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}

        #layer_popup_wrap{
            width:100vw;
            height:100vh;
            background-color: black;
            opacity:0.6;
            position:fixed;
            top:0;
            display:none;
        }

        #layer_popup{
            width:500px;
            height:500px;
            background-color: darkgoldenrod;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

        .close{
            width:80px;
            height:30px;
            background-color: darkgray;
            color:black;
            cursor: pointer;
            display:block;
            text-align: center;
        }

        .on{
            display:block;
        }

    </style>
</head>
<body>

    <button id="btn">레이어팝업</button>

    <div id="layer_popup_wrap" class="">
        <div id="layer_popup">
            호롤롤롯
            <span class="close">닫기</span>
        </div>
    </div>

    <script type="text/javascript">
        let BTN = document.querySelector('#btn');
        let layer=document.querySelector('#layer_popup_wrap');

        BTN.addEventListener('click', show);

        function show(){
            layer.style.display='block';
        }

        let BTN2=document.querySelector('.close');
        BTN2.addEventListener('click', closing);

        function closing (){
            layer.style.display='none';
        }

    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}

        #layer_popup_wrap{
            width:100vw;
            height:100vh;
            background-color: black;
            opacity:0.6;
            position:fixed;
            top:0;
            display:none;
        }

        #layer_popup{
            width:500px;
            height:500px;
            background-color: darkgoldenrod;
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

        .close{
            width:80px;
            height:30px;
            background-color: darkgray;
            color:black;
            cursor: pointer;
            display:block;
            text-align: center;
        }

        .on{
            display:block;
        }

    </style>
</head>
<body>

    <button id="btn">레이어팝업</button>

    <div id="layer_popup_wrap" class="">
        <div id="layer_popup">
            호롤롤롯
            <span class="close">닫기</span>
        </div>
    </div>

    <script type="text/javascript">
        let popupBtn=document.querySelector('#btn');
        let closeBtn=document.querySelector('.close');
        let layer=document.querySelector('#layer_popup_wrap');

        popupBtn.addEventListener('click', pop);
        closeBtn.addEventListener('click', pop);

        function pop(){
            let cool=(layer.style.display=='none') ? 'block':'none';
            layer.style.display=cool;
        }



    </script>

</body>
</html>

새로 배운

변수 a = (layer.style.display=='none') ? 'block':'none'

layer.style.display=a;

알면 알수록 신기한 코딩...............

5. gnb ,snb 메뉴 바

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}
        #wrap{width:100%;}

        #header{
            width:1200px;
            height:100px;
            margin:0 auto;
            background-color: darkgray;
        }
        
        .gnb{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            width:600px;
        }

        .gnb>li{
            background-color: darkkhaki;
            width:30%;
        }
        
        .gnb>li>ul.snb{
            display:none;
        }

        .gnb>li>ul.snb.on{
            display:block;
        }


    </style>
    <script type="text/javascript">
    
        window.addEventListener('DOMContentLoaded', init);

        function init(){

            let gnb=document.querySelectorAll('.gnb>li');
            
            gnb.forEach(function(ele){
                ele.addEventListener('mouseenter', menuover);
                ele.addEventListener('mouseleave', menuoff);
            });

        }

        function menuover(event){
            let snb=event.currentTarget.querySelector('.snb');
            snb.classList.add('on');
        }

        function menuoff(a){
            let snb=event.currentTarget.querySelector('.snb');
            snb.classList.remove('on');
        }
    
    
    </script>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <ul class="gnb">
                <li>menu1
                    <ul class="snb">
                        <li>sub_menu1</li>
                        <li>sub_menu2</li>
                        <li>sub_menu3</li>
                    </ul>
                </li>
                <li>menu2
                    <ul class="snb">
                        <li>sub_menu1</li>
                        <li>sub_menu2</li>
                        <li>sub_menu3</li>
                    </ul>
                </li>
                <li>menu3
                    <ul class="snb">
                        <li>sub_menu1</li>
                        <li>sub_menu2</li>
                        <li>sub_menu3</li>
                    </ul>
                </li>
                <li>menu4
                    <ul class="snb">
                        <li>sub_menu1</li>
                        <li>sub_menu2</li>
                        <li>sub_menu3</li>
                    </ul>
                </li>
                <li>menu5
                    <ul class="snb">
                        <li>sub_menu1</li>
                        <li>sub_menu2</li>
                        <li>sub_menu3</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>





    <script type="text/javascript">



    </script>

</body>
</html>

질문 2

    
        function apple(){
            console.log('a');
            apple();
        }

        num=apple();

apple 함수 실행하는게 num ? 변수?

재귀함수

    <script type="text/javascript">
        let num=0;
        function apple(){
            if(num==10){
                console.log(num);
                return num;
            }
            num++;
            apple();
        }

        apple();


    
    </script>

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

ZeroCho의 JS 초급강좌 2-4. 배열 기본 / 4-2. 배열 push pop shift unshift / 4-3. 배열 splice / 5-2. 이차원 배열 / 6-2. 배열 map method / (0)	2021.04.14
[22일차] 20210413 fiverr slide 슬라이드 배열? 로 바꾸기 업그레이드 시키기 (0)	2021.04.13
[21일차] 20210412 반응형, 알고리즘, 재귀함수 등 (0)	2021.04.12
[20일차]20210409 fiverr 웹사이트 만들기 마지막 (0)	2021.04.09
[19일차] 20210408 fiverr웹사이트 만들기 (inspired 만 남음) (0)	2021.04.08

GOOD DAY

[21일차 연습]

질 문

질문 2

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

티스토리툴바

[21일차 연습]

질 문

질문 2

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바