728x90
반응형
728x90
반응형
// 1번 15부터 30까지 순서대로 값을 출력하세요 
// 그리고 15부터 30까지의 합계와 평균을 출력하세요.

let num = 0;

for (let i = 15; i <= 30; i++) {
    num += i;
};
console.log(`합계 ${num}  평균 ${num / 16}`)


// 2번 3단 구구단을 출력하세요. 3x1 부터 3x9.까지 
// 여기서 곱의 결과가 9의 배수는 제외하고 출력하세요
// 3 x 1 = 3
// 3 x 2 = 6
// 3 x 8 = 24

for (let i = 1; i < 10; i++) {
    if((3 * i) % 9 !== 0){
        console.log(`3 x ${i} = ${3 * i}`)
    }
};


let i = '2';

// 묵시적 : 프로그램이 알아서
console.log(i + 'test');
console.log(i - 0 + 5);
console.log(+i);

// 명시적 : 프로그래머가 직접 작성
let result = parseInt(i);
console.log(result);
Number(10);
Number('10');
Number(true);
//  숫자를 문자열로
Number.toString(12344);
let n = 26;
n.toString();
n.toFixed(); // 소수점 0 번쨰 자리까지 문자열



// 심볼(Symbol)
let sym = Symbol();
let sym2 = Symbol();
console.log(sym == sym2);
let sym3 = Symbol("테스트");
console.log(sym == sym3);
console.log(sym3.toString());
sym3 = Symbol.for('테스트');
console.log(Symbol.keyFor(sym3));


let message = 'This \
is test';
message = `This
is test`;
message = String.raw`This
is test`;
console.log(message);


let card = { 
    'rank' : "A", 
    price : "1500"
};
card.rank = 'B';
card.price = 3000;
console.log('rank' in card);
card.name = '푸른 눈의 백룡'
delete card.price;
console.log(card.price);
console.log(card["rank"]);
console.log(card.name);

loop1:while(true){
    while(true){
        console.log(1);
        break loop1;
    }
};

// 예외 처리 try-catch
// try 안에는 처리해야 할 코드를 작성
// catch에는 에러(예외)가 발생했을 경우 처리할 코드를 작성
try{ // 안에 있는 구문을 시도함.. 시도하다가 에러 발생 시 catch 문으로 이동함
    console.log('시도합니다');
    console.log(card[aaa]);
    console.log('완료했습니다.');
}
catch(e){ // 에러가 발생하면 실행됨
    console.log('에러가 발생했습니다.')
    console.log(e);
}
finally{ // 에러가 발생 하든 안하든 무조건 실행됨.
    console.log('프로그램 종료')
}





let computer = {
    'cpu' : 'i5',
    'ram' : '16GB',
    'graphic' : 'Gforce-1000'

};
// pro 라는 이름의 변수에 compute의 프로퍼티가 순선대로 저장되면서 실행됨
for(let pro in computer){
    //computer.pro
    console.log(`프로퍼티: ${pro}, 값: ${computer[pro]}`)  
};

let arr = [10, 20, 30, 40, 50];
//  in 인덱스 / of 벨류 가져옴
for(let value of arr){
    console.log(value)
};





























728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

js 연습1  (0) 2023.01.01
js 기초 3  (2) 2023.01.01
js 기초  (0) 2023.01.01
요소 정렬 방법  (0) 2023.01.01
flex 설명  (0) 2023.01.01
728x90
반응형
// 변수 var, let, const 키워드를 사용해서 변수를 생성
// const : 상수. 변수를 생성했을 때 값을 할당해야 한다.
// boolean : true / false (참, 거짓)
// 

// var v1 = 2.5
// v1 = 3;
// var v1 = 44;
// console.log(v1);

// let v2 = true;
// v2 = 4;
// console.log(v2);


// let massage = 'This is test';
// console.log(massage);

// // 공백문자 == 띄어쓰기
// let version = 'ECMAScript';
// let versionNumber = 6; 
// console.log('C:\\Users\\Administrator')
// console.log('This script is ' + version + versionNumber);


/*********** 연산자 ***************/
// +, -, /, *, %(나머지 연산)
// 5 % 2 => 몫:2, 나머지:1
// const a1 = 5;
// const a2 = 2;
// console.log(a1 + '/' + a2 + '-> 몫: ' + (a1 / a2) + '나머지 : ' + (a1 % a2));

// console.log(`${a1} / ${a2} -> 몫: ${a1/a2}, 나머지: ${a1%a2}`)





// const v3 = 0x10; // -> 10진수로 16


// 변수 명명규칙 CamelCase, PascalCase, SnakeCase
// LowerCamelCase: 단어마다 대문자, 시작은 소문자
// thisIsCamelCase
// PascalCase, UppwerCamelCase: 단어마다 대문자, 시작도 대문자
// ThisIsCamelCase
// SnakeCase: 단어마다 _ 로 잇기 (전부 소문자)
// this_is_snake_case 
// JS에서 권고하는 방식 
// 함수, 변수 => 카멜케이스로 작성
// 클래스 => 파스칼케이스

//  변수 > 카멜,  함수 > 스네이크, 클래스 > 파스칼



/*--- 220927 ---*/

// 조건문, 절 (if, switch)
// JS에서의 비교 연산
// a == b : a값이 b값과 동일한가 ? 에 대한 결과를 반환. 단, 형변환을 할 수 있다면 형변환 후 판단
// a != b : a값이 b값과 동일하지않은가 ? 에 대한 결과를 반환. 단, 형변환을 할 수 있다면 형변환 후 판단
// a === b : a값이 b값과 동일한가? 에 대한 결과를 반환, 형변환하지 않고 그 값 그대로 판단
// a !== b : a값이 b값과 동일하지않은가? 에 대한 결과를 반환, 형변환하지 않고 그 값 그대로 판단
// true == '1'
let num1 = 10;
const num2 = 5;
console.log(`num1 < num2 -> ${num1 < num2}`);
console.log(`num1 <= num2 -> ${num1 <= num2}`); 

// if(조건) {
//     조건이 참일때 실행할 실행문
// }
// if - else if - else
if(num1 < num2) {
    console.log('참')
} 
else if(num1 === num2){
    console.log('같다')
}

else{
    console.log('거짓')
}

// && : AND, ||: OR, !: NOT


// switch : 하나의 데이터 값을 다른 여러 데이터랑 비교 연산을 함
// switch(판단하고 싶은 데이터){
//     case 데이터와 비교할값:
//         break;
//     defaule:
//         break;
// }

num1 = 5;
switch(num1){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(5);  
    case num2:
        console.log('num2');
    default:
        console.log('해당없음');
}

// ++, -- 증감연산
// +=, -=. *=, /=, %=, &=, |=, ??= 대입연산
// a &= b   >   a && b 여부를 a에게 대입
// a |= b   >   a || b 여부를 a에게 대입
// a ??= b  > a가 null이거나 undefined 일 때만 b 값을 a에게 대입
// 증감연산, 1 ( 한 단계) 증가, 또는 감소시킨다
let n1 = 4;
++n1;
n1++; // n1 은 5가 된다 > n1 = n1 + 1; > n1 += 1;
n1--; // n1은 4가 된다 > n1 = n1 - 1; > n1 -= 1;
--n1;


let number1 = 1;
let number2 = 1;
let result1 = number1++; //후위: 현재 명령(연산)을 끝낸 후, 증가
let result2 = ++number2; //전휘: 현재 명령(연산)을 하기 전에 증가
console.log(`number1 : ` + number1)
console.log(`number2 : ` + number2)
console.log(`result1 : ` + result1)
console.log(`result2 : ` + result2)

// 반복절 (문)
// for - 반복횟수가 있을 때 사용하면 좋음, while - 조건이 있을 떄 사용하면 좋다.

// while(조건){ 조건이 맞을 떄 실행 할 명령문 }
let number = 0;
while(number < 10){
    console.log(number);
    number++;
}

// for(초기화식; 조건식; 증감식) { 조건이 true 일 떄 실행할 명련문}
// 초기화식 : 변수를 생성하거나 변수에 값을 대입함
// 조건식: for 반복을 언제까지 진행할지에 대한 조건식
// 증감식 : 변수의 값을 변경하거나 증감/감소 시킴
for(let a = 1; a < number; a++){
    console.log(`실행${a}`);
}







 

 

 

 

 

// 출력 ( 모니터 결과를 보여주세요.)
// stdout(standard out.) 기본 출력 -> 모니터
// 자바스크립트 : 웹 브라우저의 콘솔창.
// 자바 : 이클립스 혹은 인텔리제이 등의 콘솔창.
// console.log(데이터)


//산술연산자(+, -, /, *, &)
//대입연산자(+=, -=, *=, /=, %=)
// 자기 자신에게 연산해줌
let a = 10;
a += 3; // a = a + 3;
//증감연산자(++, --)
// ++, -- 가 앞에 있으면 전위 , 뒤에 있으면 후위 연산
a++;
++a;
//관계연산자(>, <, <=, >=, ==, !=)
// 자바스크립트는 + (===, !==)
// === 실제 그대로 값을 비교
// == 형변환 가능하면 형변환 후 비교
//논리연산자(&&, ||, !)


//조건(if, switch)
let c = 10;
if(c == 10){
    console.log('10과 같아요');
}


// 조건문(switch)
let e = 50;
switch(e){
    case 50:
        console.log('50입니다.');
        break;
    case 70:
        console.log('70입니다.');
    default :
        console.log('아무 값도 해당없습니다.')

}

//반복문 (while)
let f = 10;
while(f < 20){
    console.log(f);
    f++;
}

//반복문 (for)

for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 다중(중첩) while, for

// 반복문 내부에 반복문 존재...
let g = 0;
while(g < 10){
    let f = 0;
    while(f < 10){
        console.log(`g: ${g}`);
        console.log(`f: ${f}`);
        f++;        
    }
    g++;
}


for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
        console.log(`i: ${i}`);
        console.log(`j: ${j}`);
    }
}




//배열(값을 여러 개 가지는 하나의 구조)
// let 변수명 = [값1, 값2, 값3 ...]
let arr = [1, 2, 3, 4, 5, 6];
let s = "string";
//index : 배열 혹은 반복가능객체(문자열)에 저장되어 있는 값의 위치 번호(0부터 시작)
// 배열에서 값 가져오기 : 배열이름[index번호]
// 배열의 값 변경하기 : 배열이름[index] = 새로운값
console.log(arr[4]);
console.log(s[3]); // 자바에서는 불가능
arr[5] = 500;
console.log(arr[5]);

arr.push(800); //배열의 마지막 요소로 값을 추가
arr.unshift(1000);// 배열의 첫 요소로 값을 추가
console.log(arr.pop()); // 배열의 마지막 요소를 제거하고 가져옴
console.log(arr.shift()); // 배열의 첫 요소를 제거하고 가져옴
console.log(arr);


for (let i = 0; i < arr.length / 2; i++) {
    let num1 = arr[i];
    let num2 = arr[arr.length - 1 - i];
    arr[0] = num2;
    arr[arr.length - 1 - i] = num1;
}
console.log(arr)


function welcome() {
    console.log('안녕하세요!');
}
welcome();

function greet(name, message='하이') {
    console.log(`${name}씨, ${message}`);
}
greet('김김김', '안녕하세요~');

function get_message(){
    return "System - 오류입니다.";
}
let m = get_message();
console.log(m);


function sum(num1, num2){
    return num1 + num2;
}
console.log(sum(10, 100));




let test = () => {
    console.log('test실행')
}
test();

// 숫자 2개를 함수에 전달하고 숫자 2개의 사이 값들을 전부 합한
// 결과를 반환하는 함수 calc를 생성하세요.

let calc = (num1, num2) => {
    if(num1 > num2){
        let tmp = num1;
        num1 = num2;
        num2 = tmp;
    }
    let sum = 0;
    for (let i = num1+1; i < num2; i++) {
        sum += i;
    }
    return sum;
}
console.log(calc(1,4));






728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

js 기초 3  (2) 2023.01.01
js 기초2  (0) 2023.01.01
요소 정렬 방법  (0) 2023.01.01
flex 설명  (0) 2023.01.01
grid실습  (0) 2023.01.01
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
        /* 
            요소의 정렬 방법들...
            *Flexbox를 사용하여 정렬 (전부 가능)*
                - 부모 요소에 justify-content: center
                - 부모 요소에 align-items: center
                ====> 정 중앙 정렬
            인라인 요소의 정렬 방법(수평)
                - 정렬 대상 요소의 부모 요소에 text-align: center를 지정
            인라인 요소의 정렬 방법(수직)
                1) 한줄일 때
                    - 정렬 대상 부모 요소에 padding-topm padding-bottom을 동일하게 적용
                    - padding 적용이 불가능할 경우, 정렬할 요소에 line-height, height값을 동일하게 적용해줌
                    - 여러 줄일떄는 line-height 비추천
                    2) 여러 줄일 때
                    - 정렬 대상 부모 요소에 padding-top, padding-bottom을 동일하게 적용
                    - vertical-align을 적용할 요소에 middle로 지정 (table에서 가능)


            블럭 요소의 정렬 방법(수평)
                - 정렬 대상 요소에 width값을 지정하고, margin-left, margin-right에 auto를 해준다.
                블럭 요소의(여러개)의 정렬 방법(수평)
                - 정렬 대상 요소에 display: inline-block 으로 변경 후 부모 요소에 text-align: center를 지정
            블럭 요소의 정렬 방법(수직)
                1) 부모 요소를 기준을 ㅗ절대 위치 지정(position지정 필수 > 자식: absolute 부모: static이 아니여야됨)
                - 자식에게 top : 50%, margin-top : - (자신의 height 값 / 2)px; <- height가 존재할 경우
                - 자식에게 top: 50%, transform: translateY(-50%);
            블럭 요소의 정렬 방법(수평 수직)
                1) 요소의 width, height 값 있을 경우에 가능
                    - 자식에게 top:50%, left:50%, transform: translate(-50%, -50%);
            
            
         */
        div {
            position: relative;
            width: 200px;
            height: 200px;
            line-height: 10px;
            box-sizing: border-box;
            border: 1px solid black;
            background-color: rgb(243, 233, 138);
            text-align: center;    
        }

        span{
            background-color: darkcyan;
            vertical-align: middle; /* 요소를 정렬할 기준이 있어야 함*/
        }

        div > div {
            position: absolute;
            background-color: cornflowerblue;
            margin: 0 auto;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    </style>
    <link rel="stylesheet" href="../../A1/페이지/랜딩페이지.css">
</head>
<body>
    <div>
        <!-- 인라인요소 -->
        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, atque corporis alias optio vel dicta omnis odio dolores quaerat earum nobis, accusamus autem. Quaerat ipsum numquam quisquam a dolores deleniti.</span>
    </div>
    <div>
        <!-- 블럭요소 -->
        <div>BOX</div>
        <div>BOX</div>
    </div>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

js 기초2  (0) 2023.01.01
js 기초  (0) 2023.01.01
flex 설명  (0) 2023.01.01
grid실습  (0) 2023.01.01
grid예제2  (0) 2023.01.01
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
    <!-- 
        1. Flexbox 부모 == container. 정렬할 자식을 가지는 요소
        1-1)* flex-direction:
            flex 컨테이너의 주측 방향을 설정한다 (row, column)
        1-2)* flex-wrap:
            flex 컨테이너의 item(자식들)을 한 줄, 여러줄 설정함 - wrap
            만약 요소의 크기가 커서 컨테이너를 벗어날 시, 밖으로 나와버림
            그럴 땐, overflow 속성으로 조절하면 된다.
        1-3) flex-flow:
            flex-direction 속성과 flex-wrap 속성을 함께 설정 기본 row nowrap
        1-4)* justify-content:
            flex의 컨테이너와 주축 기준으로 item들을 수평 정렬함
        1-5)* align-item:
            flex의 item들을 주축의 반대축방향으로 (교차방향으로)정렬 (수직정렬)
        1-6) align-content:
            flex의 컨테이너의 교차축을 기준으로 item들을 수직정렬한다.

        2. Flexbox 자식들 == item. 정렬당하는 요소들
            - float, clear, vertical-align 속성에 영향 받지 않음
        2-1) order:
            flex item의 배치 순서를 지정함. HTML 코드 변경 없이 재배치 가능
            기본 배치는 작성 순서. 같은 순서를 가지는 자식이 있으면 HTML코드 순번을 따름
            기본값:0, 높을수록 맨 뒤로 이동
        2-2) flex-grow:
            Flex item의 너비에 대한 확대정돌르 지정함. 기본값: 0, 음수는 x
        2-3) flex-shrink:
            flex item의 너비에 대한 축소정도를 지정함. 기본값:1, 음수는 x
            0을 지정하면 원래 형태로 돌아간다.(기존 너비값으로 함)
        2-4) flex-basis:
            Flex item의 너비 기본값을 정해준다. px, % 등의 단위로 지정함. 기본 auto
        2-5) flex:
        flex-grow, flex-shrink, flex-basis 속성을 함께 지정 할 수 있는 속성.
            기본값: 0 1 auto
        2-6) align-self:
            align-item 보다 우선적용
            수직방향으로 정렬
            Flex 컨테이너의 수직 방향 보다 우선 적용 되는 자신만의 정렬속성을 지정
    -->

     <style>
        #container {
            display: flex;
            position: absolute;
            background-color: beige;
            width: 1000px;
            height: 500px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-weight: bold;
            overflow: scroll;

            justify-content: flex-start;
            flex-direction: row;
            flex-wrap: wrap;
            
            /* flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: center; */

        }
        .item {
            box-sizing: border-box;
            border: 2px solid black;
            background-color: darkcyan;
            width: 150px;
            height: 50px;
        }

        .item1 {
            order:2;
        }

        .item2 {
            order: 2;
        }

        .item3 {
            flex-grow: 2;
        }
        
        .item4 {
            flex-grow: 5;
        }

        .item5 {
            flex-basis: 100px;
            align-self: stretch;
            /* flex-shrink: 5; */
        }



     </style>
</head>
<body>
    <div id="container">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item item4">item4</div>
        <div class="item item5">item5</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
        <div class="item">item</div>
    </div>
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

js 기초  (0) 2023.01.01
요소 정렬 방법  (0) 2023.01.01
grid실습  (0) 2023.01.01
grid예제2  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
728x90
반응형

HTML코드

<!DOCTYPE html>
<html lang="ko">
<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>
    <link rel="stylesheet" href="2_grid실습.css">


</head>
<body>
    <div id="wrapper">
        <div class="card">
            <header>
                <h3>모바일 HTML</h3>
            </header>
            <figure><img src="../Resource/books/book1.jpg" alt="HTML"></figure>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos commodi harum voluptas inventore quo dolor numquam quaerat perspiciatis! Similique dignissimos voluptatum officiis repellendus quos hic molestias, optio iste sequi.</p>
        </div>
        <div class="card">
            <header>
                <h3>CSS3</h3>
            </header>
            <figure><img src="../Resource/books/css.jpg" alt="CSS"></figure>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius veniam quibusdam repudiandae, doloremque nam aperiam. Ipsa vero minus quam at minima possimus nostrum ab, facilis facere voluptatem soluta optio voluptas?</p>
        </div>
        <div class="card">
            <header>
                <h3>바닐라 자바스크립트</h3>
            </header>
            <figure><img src="../Resource/books/js.jpg" alt="JAVA"></figure>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem et enim at eos suscipit necessitatibus atque? Ex dolorum harum autem beatae, natus vitae assumenda? Non cumque accusantium adipisci autem nobis.</p>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

CSS코드

body{
    font-size: 16px;
    background-color: black;
}

#wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.card {
    background-color: #fff;
    box-shadow: 5px 10px 25px white;
    text-align: center;
}

.card > header {
    font-size: 2rem;
    padding: 0.5px;
}

.card > p {
    line-height: 1.6em;

}

img {
    display: block;
    margin: auto;
    max-width: 100%;
    min-height: 30rem;
}

728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

요소 정렬 방법  (0) 2023.01.01
flex 설명  (0) 2023.01.01
grid예제2  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
        #wrapper {
            display: grid;
            width: 700px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            grid-template-areas: 
                "box1 box1 box1"
                "box2 box3 box3"
                "box2 . box4"
            ;    
            grid-gap: 10px 10px;
        }
        .box {
            border: 1px solid black;
            color: white;
            text-align: center;
            font-weight: bold;
        }

        .box1{
            background-color: darkcyan;
            grid-area: box1;
        }
        .box2{
            background-color: rgb(1, 155, 103);
            grid-area: box2;
            grid-area: box2;
        }
        .box3{
            background-color: rgb(0, 190, 79);
            grid-area: box3;
        }
        .box4{
            background-color: rgb(103, 6, 141);
            grid-area: box4;
        }


    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>
    
</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

flex 설명  (0) 2023.01.01
grid실습  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
animation 예제2  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
    #container {
        display: grid; /* grid 형식으로 배치*/  
        /* grid-template-columns : 각 열들의 너비를 지정 */
        grid-template-columns: 200px 200px 200px 200px 200px;
        /* 너비가 전부 같은 열 3개 만드세여 */
        /* fr단위 : 비율 */
        grid-template-columns: repeat(3, 1fr);
        /* minmax(100px auto) : 줄 높이를 최소 100px로 해주세요  */
        grid-template-rows: 200px 300px; 
        /* grid-gap : 각 셀들의 간격을 지정( 세로, 가로 ) */
        grid-gap: 50px 30px;
        
    }

    .items {
        padding: 10px;
        border: 1px solid black;
        background-color: aquamarine;

    }

    /* 홀수번째 items */
    .items:nth-child(odd) {
        background-color: aqua;
    }


    </style>
</head>
<body>
    <div id="container">

        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        
    </div>
    

</body>
</html>
728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

grid실습  (0) 2023.01.01
grid예제2  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<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>
        .container {
            display: flex;
            width: 700px;
            box-sizing: border-box;
            border: 2px solid blue;
        }


        .box {
            width: 80px;
            margin: 5px;
            padding: 5px 45px;
            color: white;
            background-color: black;
        }

        #opt1 {
            flex-direction: row-reverse;
        }

        #opt2 {
            flex-direction: column;
        }
        #opt3 {
            flex-wrap: wrap;
        }

        #opt4 {
            height: 400px;
            flex-direction: row; /* 기준 축을 설정함*/
            /* 가운데 정렬 담당 비슷한 친구 */
            justify-content: flex-end; /* 기준 축 기준 오른쪽 정렬*/
            justify-content: flex-start; /* 기준 축 기준 왼쪽 정렬*/
            justify-content: space-around; /* 모든 공간에서 동일하게 나눠 가짐*/
            justify-content: space-between; /* 양쪽은 붙이고 나머지 공간은 동일하게 (주축간격)*/
            align-items: center; /* 기준축의 반대 축을 기준으로 정렬 (교차축 정렬)*/
            align-content: center; /* 기준축의 반대 축들의 요소들의 나눠 가지는 영역을 지정 (교차축간격)*/
        }

        #opt1 > div:first-child{
            flex: 1;
            background-color: aqua;
        }
        #opt1 > div:last-child{
            flex: 2;
            background-color: aqua;
        }




    </style>
</head>
<body>
    <div class="container" id="opt1">
        <div class="box"><p>1</p></div>
        <div class="box"><p>2</p></div>
        <div class="box"><p>3</p></div>
    </div>
    <div class="container" id="opt2">
        <div class="box"><p>1</p></div>
        <div class="box"><p>2</p></div>
        <div class="box"><p>3</p></div>
    </div>
    <div class="container" id="opt3">
        <div class="box"><p>1</p></div>
        <div class="box"><p>2</p></div>
        <div class="box"><p>3</p></div>
        <div class="box"><p>4</p></div>
        <div class="box"><p>5</p></div>
        <div class="box"><p>6</p></div>
        <div class="box"><p>7</p></div>
        <div class="box"><p>8</p></div>
        <div class="box"><p>9</p></div>
        <div class="box"><p>10</p></div>
    </div>
    <div class="container" id="opt4">
        <div class="box"><p>1</p></div>
        <div class="box"><p>2</p></div>
        <div class="box"><p>3</p></div>
    </div>
</body>
</html>

실행창

728x90
반응형

'코딩일지 > WEB' 카테고리의 다른 글

grid예제2  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
transform연습  (0) 2022.12.29

+ Recent posts

728x90
반응형
">