9월 3주차

< 학습 목록 >

• HTML & CSS Study
  
  • BOX MODEL
  • Grid

• Algorithm Study (Baekjoon) 
  
  • 1차원 배열
  • 문자열

 

 

HTML & CSS Study 

• BOX MODEL

<부모 자식간 margin 겹침 발생 시>

1. 부모에 padding : 1px; 적용 !! ⇒ 시각적으로 보일 수 있음

2. 부모에게 overflow: hidden;

3. margin 겹침 현상은 block 요소간의 겹침이기에 after 가상요소에 block이 아닌 display: table;

 

.clearfix:before,
.clearfix:after {
	content: ' ';
	display: table;
	}

 

<div class="margin clearfix"></div>

 

이렇게 따로 클래스를 정의 해서 필요 시 마다 html 태그에서 사용

 

<float를 이용한 sidebar 제작>

float : right; 를 고려하여 float 속성을 사용할 영역의 코드를 상위에 작성해 주어야 float 속성이 올바르게 적용

<div class="l_wrapper">
	<div class="l_sidebar">
    </div>
    <div class="l_main">
    </div>
</div>

 

 

 

Tip) 여러 페이지에 공통으로 사용되는 레이아웃은 따로 클래스로 지정하여 필요 시 마다 사용

       ex) l_main, l_sidebar

• Grid

: <ul> 태그 내에 여러 <li>를 추가하여 그리드 제작이 가능

<ul>
	<li class="grid">
	<img class="item" src="/img/item1.jpg">
	</li>
	
	<li class="grid">
	<img class="item" src="/img/item2.jpg">
	</li>
	
	<li class="grid">
	<img class="item" src="/img/item3.jpg">
	</li>
</ul>

 

width를 %개념으로 적용하여

ex) width : 20% : 5단 그리드, width: 33.333% : 3단 그리드

 

5단 그리드 제작 -> 전체 (100/5)로 너비를 맞춰준다. width: 20%;

 

너비를 33.33333%로 설정 -> 첫줄에 그리드 세개가 오면 100%(33% + 33% + 33%)가 차기 때문에

다음 줄로 그리드가 오게 된다.

 

보통 그리드 제작 시 16column, 12column을 사용, style sheet에 미리 작성을 해 두고 필요에 맞게 클래스를 사용하면 편리

/* Grid */
.l_col_12_12 { width: 100%;}
.l_col_11_12 { width: 91.66666667%;}
.l_col_10_12 { width: 83.33333333%;}
.l_col_9_12 { width: 75%;}
.l_col_8_12 { width: 66.66666667%;}
.l_col_7_12 { width: 58.33333333%;}
.l_col_6_12 { width: 50%;}
.l_col_5_12 { width: 41.66666667%;}
.l_col_4_12 { width: 33.33333333%;}
.l_col_3_12 { width: 25%;}
.l_col_2_12 { width: 16.66666667%;}
.l_col_1_12 { width: 8.33333333%;}

 

ex) 4_12 그리드 → 12column 중 4column = 12 / 4 = > 3단

      6_12 그리드 → 12column 중 6column = 12 / 6 = > 2단

 

이미지마다 크기가 다르기에 그리드에 넣을 때, max-width: 100%를 설정해주면

설정한 그리드에 맞게 이미지가 맞추어져 pixel 깨지지 않고 그대로 삽입이 가능

 

<반응형 웹 (모바일) 적용 시>

@media (max-width: 480px) {
    .l_col_mobile_12_12 { width: 100%;}
}

최대 너비가 480px로 변할 때 (모바일 화면 크기) 12/ 12 = 1단 그리드 (그리드 하나씩 세로 배치)

 

<li class="l_col l_col_3_12 l_col_mobile_12_12">
                    <div class="item">
                        <img class="item-cover" src="/img/dori5.jpg">
                    </div>
                </li>

HTML 코드의 각 <li>마다 데스크탑 적용 클래스 뒤에 모바일 클래스 추가

(데스크탑 적용 시 : l_col_3_12, 모바일 적용 시 l_col_12_12)

 

 

 

Algorithm Study (Baekjoon)

• 문자열

#11720번 : 숫자의 합

문자열 입력 알고리즘이므로 BufferedReader로 입력 받음

문자열변수.charAt() : 해당 문자열 중 한글자를 char로 반환

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class _11720 {
    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));

        int input = Integer.parseInt(br.readLine()); // 입력받을 숫자 개수
        String str = br.readLine(); // 입력 받은 수를 받아올 문자열 생성
        int sum = 0;

        for (int i = 0; i < input; i++) { // 입력된 n만큼 string 입력
            int n = str.charAt(i) - 48; // 아스키 코드상 문자 '0'이 10진수로 48 (문자인 수 - 48 = 숫자)
            sum += n;
        }

        System.out.println(sum);
    }
}

 

• 1차원 배열

#10810 : 공 넣기

정수 입력 알고리즘이므로 Scanner 이용

최후에 남아 있는 공 번호 출력

import java.util.Scanner;

public class _10810 {
    public static void main(String[] args) {
        Scanner scan = new Scanner(System.in);

        int n = scan.nextInt(); // 바구니의 개수 (번호)
        int m = scan.nextInt(); // 공을 넣을 횟수
        int[] busket = new int[n];

            for (int i = 1; i <= m; i++) {
                int I = scan.nextInt();
                int J = scan.nextInt();
                int K = scan.nextInt(); // 대입 할 공의 번호

                for (int j = I-1; j < J; j++) { // I번 바구니부터 J번 바구니까지 공 대입
                    busket[j] = K; // 이미 들어 있는 공 제거하고 새 공 대입
                }
            }

            for (int k = 0; k < busket.length; k++) {
                System.out.print(busket[k] + " "); // 각 바구니마다 최후에 남아 있는 공 번호 출력
            }
        }
    }

 

 

#10813 : 공 바꾸기

import java.util.Scanner;

public class _10813 {
    public static void main(String[] args) {
        Scanner scan = new Scanner(System.in);

        int n = scan.nextInt(); // 바구니의 개수 (번호)
        int m = scan.nextInt(); // 공을 바꿀 횟수
        int temp; // 공을 바꾸기 위한 임시 변수 선언

        int[] busket = new int[n+1]; // 바구니 개수+1 만큼 배열 생성
                                    // -> 원래 배열은 0번 부터 이지만 1번 배열부터 요구하기 때문!

            for (int i = 1; i <= n; i++) { // 바구니와 같은 공 번호 대입
                busket[i] = i;
            }

            for (int i = 1; i <= m; i++) { // I번과 J번 바구니의 공 교환
                int I = scan.nextInt();
                int J = scan.nextInt();

                temp = busket[I];
                busket[I] = busket[J];
                busket[J] = temp;
            }

            for (int i = 1; i <= n; i++) {
                System.out.print(busket[i] + " ");
            }
    }

 

 

#10811 : 바구니 뒤집기

import java.util.Scanner;

public class _10811 {
    public static void main(String[] args) {
        Scanner scan = new Scanner(System.in);

        int n = scan.nextInt(); // 바구니 개수 (번호)
        int m = scan.nextInt(); // 바구니 순서를 바꿀 횟수
        int temp;
        int[] busket = new int[n+1];

        for (int i = 1; i <= n; i++) { // 각 바구니에 번호 대입
            busket[i] = i;
        }

        for (int i = 1; i <= m; i++) { // I번부터 J번 바구니의 순서 바꾸기
            int I = scan.nextInt();
            int J = scan.nextInt();

           while (I < J) { // 바깥 값끼리 바꾸기 ex) 1 3 4 -> 4 3 1
               temp = busket[I];
               busket[I] = busket[J];
               busket[J] = temp;
               I++; J--; // 내부 값 바꾸기
           }
        }

        for (int k = 1; k <= n; k++) {
                System.out.print(busket[k] + " ");
        }
    }
}