TIL 2023.02.01 CSS & JavaScript 1

CSS

태그 숨기기

display: none;
visibility: hidden;
opacity 0;

각을 둥글게

border-radius 50px;

배경관련

background-image: url("dd.png");
background-repeat: no-repeat;
background-position: 0% 50%;
background-attachment: fixed;

그라데이션

background-image: linear-gradient(red, rgba(255,255,255,1),rgba(255,255,255,0));

transition

transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: ease-in-out;

@keyframe

animation-name: ani1;
animation-duration: 5s;
animation-timing-function: ease-in-out;
@keyframes ani1 {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes ani2 {
   0%{
      margin-left: 0px;
  }
  50%{
      margin-left: 500px;
  }
  100%{
      margin-top: 600px;
  }
}

@media

@media print{
    hi{
        font-weight: normal;
    }
}
@media screen and (max-width: 600px ) {
    body{
        background-color: black;
        color: white;
    }
}
@media screen and (min-width: 601px) and (max-width: 1023px) {
    body{
        background-color: gray;
    }
}
@media screen and(min-width: 1024px) {
    body{
        background-color: blue;
    }
}

grid system

.row{
    clear: both;
}
.container .grid1, .container .grid2, .container .grid3, .container .grid4, 
.container .grid5, .container .grid6, .container .grid7, .container .grid8, 
.container .grid9, .container .grid10, .container .grid11, .container .grid12{
    float: left;
}
@media screen and (max-width: 1199px) {
    .container{
         width: 100%;
    }
    .container .grid1,.container .grid2,.container .grid3,
    .container .grid4,.container .grid5,.container .grid6,
    .container .grid7,.container .grid8,.container .grid9,
    .container .grid10,.container .grid11,.container .grid12{
        float: left;
        background-color: tomato;
    }
    .container .grid1{width: 8.3%;}
    .container .grid2{width: 16.6%;}
    .container .grid3{width: 24.9%;}
    .container .grid4{width: 33.2%;}
    .container .grid5{width: 41.5%;}
    .container .grid6{width: 49.8%;}
    .container .grid7{width: 58.1%;}
    .container .grid8{width: 66.4%;}
    .container .grid9{width: 74.7%;}
    .container .grid10{width: 83%;}
    .container .grid11{width: 91.3%;}
    .container .grid12{width: 99.6%;}

    .container .mgrid1{width: 8.3%;}
    .container .mgrid2{width: 16.6%;}
    .container .mgrid3{width: 24.9%;}
    .container .mgrid4{width: 33.2%;}
    .container .mgrid5{width: 41.5%;}
    .container .mgrid6{width: 49.8%;}
    .container .mgrid7{width: 58.1%;}
    .container .mgrid8{width: 66.4%;}
    .container .mgrid9{width: 74.7%;}
    .container .mgrid10{width: 83%;}
    .container .mgrid11{width: 91.3%;}
    .container .mgrid12{width: 99.6%;}

    .containerw{
        width: 100%;
    }
    .containerw .grid1,.containerw .grid2,.containerw .grid3,
    .containerw .grid4,.containerw .grid5,.containerw .grid6,
    .containerw .grid7,.containerw .grid8,.containerw .grid9,
    .containerw .grid10,.containerw .grid11,.containerw .grid12{
        float: left;
        background-color: tomato;
    }
    .containerw .grid1{width: 8.3%;}
    .containerw .grid2{width: 16.6%;}
    .containerw .grid3{width: 24.9%;}
    .containerw .grid4{width: 33.2%;}
    .containerw .grid5{width: 41.5%;}
    .containerw .grid6{width: 49.8%;}
    .containerw .grid7{width: 58.1%;}
    .containerw .grid8{width: 66.4%;}
    .containerw .grid9{width: 74.7%;}
    .containerw .grid10{width: 83%;}
    .containerw .grid11{width: 91.3%;}
    .containerw .grid12{width: 99.6%;}

    .containerw .mgrid1{width: 8.3%;}
    .containerw .mgrid2{width: 16.6%;}
    .containerw .mgrid3{width: 24.9%;}
    .containerw .mgrid4{width: 33.2%;}
    .containerw .mgrid5{width: 41.5%;}
    .containerw .mgrid6{width: 49.8%;}
    .containerw .mgrid7{width: 58.1%;}
    .containerw .mgrid8{width: 66.4%;}
    .containerw .mgrid9{width: 74.7%;}
    .containerw .mgrid10{width: 83%;}
    .containerw .mgrid11{width: 91.3%;}
    .containerw .mgrid12{width: 99.6%;}
}
@media screen and (min-width: 1200px) {
    .container {
        width: 1200px;
        margin: 0px auto;
    }
    .container .grid1,.container .grid2,.container .grid3,
    .container .grid4,.container .grid5,.container .grid6,
    .container .grid7,.container .grid8,.container .grid9,
    .container .grid10,.container .grid11,.container .grid12{
        float: left;
    }
    .container .grid1{width: 100px;}
    .container .grid2{width: 200px;}
    .container .grid3{width: 300px;}
    .container .grid4{width: 400px;}
    .container .grid5{width: 500px;}
    .container .grid6{width: 600px;}
    .container .grid7{width: 700px;}
    .container .grid8{width: 800px;}
    .container .grid9{width: 900px;}
    .container .grid10{width: 1000px;}
    .container .grid11{width: 1100px;}
    .container .grid12{width: 1200px;}

    .containerw {
        width: 1200px;
        margin: 0px auto;
    }
    .containerw .grid1,.containerw .grid2,.containerw .grid3,
    .containerw .grid4,.containerw .grid5,.containerw .grid6,
    .containerw .grid7,.containerw .grid8,.containerw .grid9,
    .containerw .grid10,.containerw .grid11,.containerw .grid12{
        float: left;
    }
    .containerw .grid1{width: 100px;}
    .containerw .grid2{width: 200px;}
    .containerw .grid3{width: 300px;}
    .containerw .grid4{width: 400px;}
    .containerw .grid5{width: 500px;}
    .containerw .grid6{width: 600px;}
    .containerw .grid7{width: 700px;}
    .containerw .grid8{width: 800px;}
    .containerw .grid9{width: 900px;}
    .containerw .grid10{width: 1000px;}
    .containerw .grid11{width: 1100px;}
    .containerw .grid12{width: 1200px;}
    
}

javascript

컴파일 단위가 하나의 스크립트이다.

타입

<script type="text/javascript">
    var a;
    // Number 
    a = 1234.3;
    console.log(a, typeof a);
    // Boolean
    a = true;
    console.log(a, typeof a);
    // String
    a = "abcd1234";
    console.log(a, typeof a);
    // Array
    a = new Array();
    console.log(a, typeof a);
    // Object
    a = new Object();
    console.log(a, typeof a);
    // Null
    a = null;
    console.log(a, typeof a);
    // undefined
    var b;
    console.log(b, typeof b);
    // function
    b = console.log;
    console.log(b, typeof b);
</script>

연산

<script type="text/javascript">
    var su = parseInt('300원');
    console.log(su+1);
    console.log(su-1);
    console.log(su*2);
    console.log(su/2);
    console.log(su%2);
    var b = 5>=4;
    console.log(b);
</script>

조건문

<script type="text/javascript">
    if(true){
        console.log('참입니다.');
    } else {
        console.log('거짓입니다.');
    }
    var a = 1;
    switch(a) {
        case 1>0 :console.log('2입니다.');break;
        case 1:console.log('1입니다.');break;
        case 0+1:console.log('0입니다.');break;
        case -1:console.log('-1입니다.');break;
        case '음수':console.log('-2입니다.');break;
        default : console.log('몰라입니다');break;
    }
</script>

반복문

<script type="text/javascript">
    for(i = 0; i < 5; i++){
        console.log(i);
    }
    console.log("-------------");
    var a = 5;
    while(a){
        console.log('실행' +a);
        a--;
    }
    do{
        console.log('한번은 실행됨');
    } while(false);
    
    
</script>

배열

<script type="text/javascript">
    var arr1 = [1,3,5,7,9];
    // arr1.push(11);
    arr1[10] = 11;
    console.log(arr1);
    for(i = 0; i < arr1.length; i++){
        console.log(arr1[i]);
    }
    console.log(typeof arr1)
    
    var x = [5];
    x.push(222);
    x.unshift(333);
    // while(x.length){
        // console.log(x.pop());
        // console.log(x.shift());
    // }
    console.log(x.reverse());
    
    for(z in x) {
      console.log(z, x[z]);
    }
    for(z of x){
      console.log(z);
    }
</script>

Object

<script type="text/javascript">
    var obj = {'key3':'val3'};
    obj['key1']='val1';
    obj['key2']= 22222;
    obj[1234]=3333;
    var b = new String("key5");
    obj[b] = 'val5';
    c = 3333;
    console.log(c);
    console.log(obj['key1']);
    console.log(obj['key2']);
    console.log(obj['key3']);
    console.log(obj[b], obj["key5"]);
    console.log(obj.key5);

    console.log(typeof window.c)
</script>