프로그래머도전기 64일차

프로그래머가 될거야!

by Choyee 2023. 11. 7. 23:32

오늘은

오늘은 굉장히 추운 날이었습니다

가을을 느낄새도 없이 겨울이 올것만 같은 날씨였는데요

계절이 바뀌어 감에 따라 꽤 많은 날이 지났음이 느껴지면서

새삼 다시 마음을 다잡아야겠다고 생각하였습니다

학원 수업 & CSS 공부

학원에서도 css 수업을하다보니 진도가 겹치는 부분이 생기게 되어

이번에는 내용을 같이 정리하였습니다

<<반응형 디자인>>
= 사용하는 기기의 화면 크기에 따라 반응하는 웹사이트를 만드는 것
   디스플레이의 크기 혹은 기기의 방향에 따라 페이지 레이아웃이 변함
=> 미디어 쿼리를 통해서 이 작업을 할 수 있다

크롬 -> 개발자 모드 -> 토글 디바이스 툴바 = 웹 페이지를 다른 버전으로 보는 방법

<미디어 쿼리>
= CSS와 스타일 시트에서 작성할 수 있다
   스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다
   = 화면 너비, 기기 종류, 기기 방향에 맞춰서 스타일을 조정

= @media로 시작 -> () 괄호 안에 미디어 기능을 다양하게 넣을 수 있다
                           = 너비와 높이 같은 특징 등
                           => and 를 사용하여 연결할 수도 있다

html
=> <meta name="viewport" content="width=device-width, initial-scale=1.0">

css의 미디어 쿼리(media query)로 구현
=> @media screen and (min/max-width: )

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>화면 해상도에 따라 배경 이미지 바꾸기</title>
    <style>
        /* 모바일 기준 (768px 미만)*/
        body {
            background: url(./images/bg3.jpg) no-repeat;
            background-size: cover;
        }
        /* 태블릿 기준 (768px 이상) */
        @media screen and (min-width: 768px) {
            body {
                background: url(./images/bg2.jpg) no-repeat;
                background-size: cover;
            }
        }
        /* PC 기준 (1024px 이상, 저해상도) */
        @media screen and (min-width: 1024px) {
            body {
                background: url(./images/bg1.jpg) no-repeat;
                background-size: cover;
            }
        }
        /* PC 기준 (1600px 이상, 고해상도) */
        @media screen and (min-width: 1600px) {
            body {
                background: url(./images/bg0.jpg) no-repeat;
                background-size: cover;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

애니메이션 효과
속성: 속성값(함수)
transform: translate(), rotate(), scale(), skew()
skewX(20deg) = x축 기준 각도만큼 비틈
skewY(20deg) = y축 기준 각도만큼 비틈
trsansition: s(ms)속성, 시간

애니메이션 이름
animation: 이름; = 선언
@keyframes 이름 {
from{변경전}
to{변경후}
} = 애니메이션이 바뀌는 지점을 설정
name = 이름
duration = 지연 시간 => 필수 입력
direction = 방향
iteration = 반복 횟수
animation = 속기법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation 속성</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: #99f;
            border: 2px solid #ccc;
            box-sizing: border-box;
            margin: 60px;

            /* 애니메이션 이름 선언 */
            /* animation-name: change_bg; */
            /* 애니메이션 재생 시간 */
            /* animation-duration: 3s; */

            /* 반복 횟수 */
            /* animation-iteration-count: 4; */
            /* animation-iteration-count: infinite;  무한반복 */

            animation: change_bg 3s infinite;
        }
        @keyframes change_bg {
            from{
                background: #99f;
                border-radius: 0;
            }
            to{
                background: #f9f;
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

viewport
글자 크기
1. px(고정 크기), %(상대 크기)
2. em(부모 크기 기준), rem(브라우저 크기 기준)
3. vw, vh = 반응형 => 브라우저 크기에 반응

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 웹 폰트 크기 - vw, vh</title>
    <style>
        h1 {
            text-align: center;
            /* font-size: 5em;  5x16 = 80px */

            /* vw(width 기준), vh(height 기준) => 브라우저가 1000px이면 (5x1000)÷100 = 50px */
            /* font-size: 5vw; */
            font-size: 5vh;
        }
    </style>
</head>
<body>
    <h1>안녕하세요</h1>
</body>
</html>

Coding Test Practice

Description
행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

function solution(arr1, arr2) {
    var answer = [];
    for(var i = 0; i < arr1.length; i++){
        var inner = [];
        for(var j =0; j < arr1[i].length; j++){
            inner.push(arr1[i][j] + arr2[i][j]);
        }
        answer.push(inner);
    }
    return answer;
}

Description
This new ride at an amusement park is very popular and runs nonstop. The original fee of this ride is price, but it is determined that when using the ride for the Nth time, the fee will increase as N times of the original fee. That is, if the original fee is 100, it will be 200 for the second time, and 300 for the third time. Write a function solution to return the insufficient money when the ride is used count times. However, return 0 when the owed amount is sufficient.

function solution(price, money, count) {
    var answer = -1;
    var total = 0;
    // price = 수수료
    // money = 고객이 갖고있는 돈
    // count = 이용횟수
    // 부족한 돈 반환
    // 돈이 충분하면 0 반환
    for(var i = 1; i <= count; i++){
        total += price * i;
    }
    if(money >= total){
        return 0;
    }else {
        return total - money;
    }
}

=> 왠지 모르겠지만 문제가 영어로 나와서 더 어렵게 느껴졌던 문제...

Description
문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.

function solution(s) {
    var answer = s.split('').sort().reverse().join('');
    return answer;
}

2023. 11. 07 (화)

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

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 66일차 (2)	2023.11.12
프로그래머 도전기 65일차 (3)	2023.11.09
프로그래머 도전기 63일차 (0)	2023.11.05
프로그래머 도전기 62일차 (2)	2023.11.04
프로그래머 도전기 61일차 (2)	2023.11.01