PlayData 백엔드 부트캠프 Start 18일차

오늘 드디어 CSS 거의 마지막날 입니다. 

약간 제 생각인데, 조금씩 찾아서 만드는 것 보다 협업을 하는게 좋아보이네요.... 디자인은 저랑 안맞네요 ㅋㅋㅋ 

시작전에 다시 백준으로 몸풀기 2문제 하고 시작하겠습니다. 

 

<백준 1271번> 

 

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.math.BigInteger;
import java.util.StringTokenizer;

public class B_1271 {
    public static void main(String[] args) throws IOException {
//        첫째 줄에는 최백준 조교가 가진 돈 n과 돈을 받으러 온 생명체의 수 m이 주어진다.
//        (1 ≤ m ≤ n ≤ 10^1000, m과 n은 10진수 정수)
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine());
        //n과 m 입력받기
        BigInteger n = new BigInteger(st.nextToken());
        BigInteger m = new BigInteger(st.nextToken());
        System.out.print(n.divide(m) + "\n" + n.remainder(m));
    }
}

이건 진짜 생각보다 당황스러웠던 문제입니다. 일단bufferReader를 혼자서는 처음으로 도입한 문제입니다.ㅎㅎ;;

그리고 BigInteger가 상당히 당황스러웠습니다. int로하면 에러가 나는데 그 이유는 값이 너무 크기때문에 담지 못하는 겁니다.

그러므로 이 문제를 풀기 위해선 BufferReader와 Stringtokenizer를 알아야 합니다. 버퍼리더는 결국 문자열이기 때문에 재가공이 필수로 필요하다는 것을 인지해야한다.   

 

<백준 9498번>

import java.util.Scanner;

public class B_9498 {
    public static void main(String[] args) {
/*        시험 점수를 입력받아 90 ~ 100점은 A, 80 ~ 89점은 B, 70 ~ 79점은 C, 60 ~ 69점은 D, 
        나머지 점수는 F를 출력하는 프로그램을 작성하시오.*/
        Scanner sc = new Scanner(System.in);
        int a = sc.nextInt();
        if (a>=90){
            System.out.println('A');            
        }else if(a<=89 && a>=80){
            System.out.println('B');
        } else if (a<=79 && a>=70) {
            System.out.println('C');
        } else if (a<=69 && a>=60) {
            System.out.println('D');
        }else {
            System.out.println('F');
    }
}
}

사실 간단한 문제였습니다. 한단계 성장한것같은 기분이 드는 문제였습니다 ㅎㅎ

 

 

1. Float

Float은 가로로 만들기 위해서 사용하는 속성이다. 단어 뜻 그대로 위로 살짝 올린다는 느낌이라서 clear 속성을 이용하여

float속성을 해제해야 한다. 그런데 약간 불문율로 clearfixP::after 라는 속성을 만들어서 돌려쓴다. 그리고 이속성을 사용할때는 아래와 같다. 

<style>
.picture {
          width: 200px;
          height: 150px;
          background : red;
          float: right;
           }
 .clearfix::after {
        content: "";
        display: block;
        clear: both;
          }
</style>
<div class="picture clearfix"></div>

float을 쓸때는 무조건 clear를 해야하기 떄문에 clearfix::after를 이용하여 내리는 것을 권장한다. 또 클래스 명을 사용할때는 가운데 공백을 넣어서 기입하면 두가지 스타일을 넣을 수있으므로 인지해야 한다.

3. Position 사용법

포지션은 absolute와 relative,static, fixed로 나뉜다. 네개의 특징은 각각 다음과 같다 .

1. static : 문서의 흐름에 맞춰 배치하는 기본값이다.
2. relative : 위칫값을 지정한다.  
3. absolute: 상위요소를 기준을 위치를 지정한다.
4. fixed : 브라우저 창을 기준으로 위치를 지정해 배치한다.

4. 전환,변환

• 트랜지션은 올려 마우스 커서를 올렸을때 다심라해서 hover가 작동할때 사용하는 방식으로 마우스를 올려놓으면 아이콘이나 도형을 변화시킬수있다.아래와 같이 속성란에 넣으면 실행된다.

          /* transition: 속성이름 지속시간 딜레이 타이밍함수  */

• 트랜스폼 역시 트랜지션과 같은 원리로 작동하나 아이콘이나 도형을 변화시킬수있는 방법이다.

 

5.애니메이션 

• 애니메이션 역시; 전환 변환의 연장선으로 볼수있는 방법이다. 아래와 같이 사용하며 keyFrame을 만들어 사용한다.
  마치 영상제작프로그램인 에펙사용과 비슷한 것을 볼수있다.

        /* 이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향]*/
        
          @keyframes grow-up {
        0% {
          width: 100px;
        }
        50% {
          width: 500px;
        }
        100% {
          width: 300px;
        }
      }