자바 웹 개발 과정 4주차🌞

국비지원 강의를 들으며 매주 공부한 내용을 포스팅으로 남기고 있다.
이번 주에는 또 어떤 내용을 배웠는지 총정리하는 시간을 가져보자!

Back-end

다차원 배열을 활용한 반복문

1. 2차원 배열 선언

int[][] nums = new int[2][10]

2. 다차원 배열을 이용한 반복문

String[][] rows = new String[2][]; // 이차원 배열 선언

	FileInputStream fis = new FileInputStream("C:\\Users\\이민주\\Downloads\\제주특별자치도_코로나현황_20201214.csv");
	Scanner fscan = new Scanner(fis);
		
	String line = fscan.nextLine();
		
	for(int i=0; i<2; i++) {
		line = fscan.nextLine();
		rows[i] = line.split(","); // 반복문을 돌며 line.split(",") 된 것을 rows[i] 라는 참조 변수의 이름으로 지어주겠다
	}
		
	for(int i=0; i<2; i++) {
		for(int j=0; j<10; j++) {
			System.out.printf("%s", rows[i][j]); // 2차원 배열에 담긴 값을 출력하기
			
			if(j<9) 
				System.out.printf(", ", rows[i][j]);
		}
		
		System.out.println();	
	}
		
	fis.close();
	fscan.close();

구조체

1. 구조체 정의

• 연관성이 있는 서로 다른 자료형을 하나의 집합으로 묶어 새롭게 정의한 사용자 정의 자료형

// 구조체 정의
public class Covid19 {
  String date;
  int positive;
  int dead;
}

2. 구조체를 활용한 코드

// 정의한 구조체의 속성에 값 할당하기
Covid19 row = new Covid19();
row.date = "2020-11-23";
row.positive = 23;
row.dead = 1;

배열과 구조체 사용 시 메모리는 어떻게 동작할까?

아래 예시를 통해 함께 알아보자.

Covid19 list = new Covid19[20]; 
list[0] = new Covid19(); 

• Covid19 list = new Covid19[20];
  stack 영역의 main 블럭에서 list를 준비해놓고, new 연산자를 통해 heap 영역에는 20개의 요소가 담길 수 있는 배열이 생김(해당 배열의 요소는 모두 null값), stack 영역의 list 변수는 heap 영역의 list 배열을 가리킴
• list[0] = new Covid19();
  new 연산자를 통해 heap 영역에 Covid19 클래스가 생기고, heap 영역에 있는 list 배열의 0번째 요소가 Covid19 클래스를 가리키게 됨
  

---

Front-end

CSS - grid 속성

1. grid-template-columns
각 그리드 아이템의 컬럼(column) 폭을 명시할 수 있다.

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px;

2. grid-template-rows
각 그리드 아이템의 로우(row) 폭을 명시할 수 있다.

.grid-container {
  display: grid;
  grid-template-rows: 300px 300px 300px;

3. fraction
너비 또는 높이의 크기를 동등하게 배분할 수 있다.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 전체 너비를 1:2의 비율로 나눠 가진다 */

4. repeat()
2개 이상의 트랙 너비 또는 높이가 동일하게 반복된다면 repeat() notation을 사용할 수 있다.

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 300px);

5. auto-fill
설정한 너비 혹은 크기만큼 컨테이너 영역을 자동으로 반복해서 채운다.

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fill, 200px); /* 전체 너비의 크기를 200px로 반복해서 등분하며 채운다 */

6. auto-fit
설정한 너비 혹은 크기만큼 컨테이너 영역을 자동으로 반복해서 채우는 것은 auto-fill과 동일하지만, auto-fit은 그리드 컨테이너 내부에 빈 트랙이 존재할 경우 그 공간을 나눠 맞춘다는 점에서 차이점이 있다.

.grid-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, 200px); /* 전체 너비의 크기를 200px로 반복해서 등분하며 채우지만, 남는 여백이 있을 경우 반복 횟수만큼 반복된 트랙에 빈 트랙 공간을 나눠 핏팅 */

7. grid-area
grid-column과 grid-row를 grid-area를 이용해 함께 쓸 수 있다.

/* grid-column: 1 / 3;  그리드 아이템의 너비 크기가 라인번호 1부터 3까지이다 
grid-row: 2 / 4;  그리드 아이템의 높이 크기가 라인번호 2부터 4까지이다 */
grid-area: 2/1/4/3; /* 그리드 아이템의 영역을 반시계 방향으로 설정 */

8. grid-template-area
grid-template-area 속성을 사용해 영역에 이름을 부여할 수 있다.

 #root {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: /* 영역에 이름 부여 */
    "header spare spare"
    "main main main"
    "footer footer spare1";
  }

  .box1 {
      background-color: red;
      grid-area: header; /* 부여한 이름 사용 */
  }

  .box2 {
      background-color: gold;
      grid-area: main; /* 부여한 이름 사용 */
  }

  .box3 {
      background-color: green;
      grid-area: footer; /* 부여한 이름 사용 */
  }

9. media query
콘텐츠의 너비 또는 높이가 특정 크기 이상이거나 이하일 때 media-query를 이용해 변화를 줄 수 있다.

/* screen의 너비가 500 이하일 경우 아래 속성을 적용 */
@media screen and (max-width: 500px) {
    .container {
      margin: 10px;
    }
}