0829

position: 요소가 배치되는 방식

static 기본값, 흐름대로 배치

relative: 기본위치에서 위치 이동가능 top left right bottom

fixed: 사용자의 브라우저 기준 절대 좌표를 사용하여 위치 고정

sticky: 평소엔 기본 위치에 위치하고 있다가 스크롤바를 내렸을 때 위치를 고정한다. top left right bottom 으로 위치를 설정해둬야 작동한다

 

    .wrapper {

        display: grid;

        grid-gap: 10px;

        grid-template-columns: 1fr 1fr 1fr; 한줄에 들어가는 갯수

        /* fraction */

        grid-template-rows: 100px 100px 100px;  크기

    }

    #a{

        grid-column:1/3; 위치

    }

    #b{

        grid-row: 1/3;

        grid-column: 3;

    }

    #c{grid-column: 2/4;

        grid-row: 3;

    }

    #d{

        grid-row: 2/4;

    }

그리드

 

- color : 색상 - text-align (center / left / right / justify) : 정렬 - text-decoration (none / underline / overline / line-through) : 꾸미기 - text-indent : (문단) 들여쓰기 - letter-spacing : 글자 간격 - line-height : 행 간격 - word-spacing : 단어(띄어쓰기 기준) 간격 - white-space : 내용이 긴 경우 줄바꿈 설정

 

 

    img {

    width: 300px;

   

    }

   

    @media (min-width:701px) {

        img{width: 500px;}

    }

    @media (min-width:750px) {

        img{width: 600px;}

    }

    @media print {

        body{

            font-size: 3rem;

        }

 

 

console.log() (dir / info / warn / error)

warn 은 경고창 같은 정보를 담고자 색깔이 있다. 

 

innerHTML을 이용한 개체 추가

 

백틱을 사용하여 값을 출력할 수 있는 방법

 

 

let score = 90.5;

console.log(Number(score));

console.log(parseInt(score));

let height = '177.3';

console.log(Number(height));

console.log(parseInt(height));

let bool = true;

console.log(Number(bool));

console.log(parseInt(bool));

형변환

 

 

type of 변수명 : 자료

replace