8월 3주차

< 학습 목록 >

• HTML & CSS Study
  
  • class
  • 선택자 
  • display
  • float
• Algorithm Study (Baekjoon) 
  • 조건문

 

HTML & CSS Study : 구름 edu '시선을 사로 잡는 웹'

 
강의 선정 이유 : 위 강의는 개념보다는 실습 위주의 수업
 
개념 학습은 구글링이나 유튜브 등 매체에서 흔히 접할 수 있지만 웹 사이트를 예쁘게 제작하는 것은 쉽게 접하기 어려우며 
Front-End 학습은 실습과 병행하며 해가야 실력이 늘을 수 있다고 판단
 

• class 

:  java의 class 개념과 같다.  

<div class="contents">
	<div class="section1">hi</div>
    <div class="section2">hello</div>
    <div class="section3"><h1>hello</h1><p>world</p></div>
</div>

 
<div> : division(나누다)의 약자, 컨텐츠를 묶고 싶을 때 사용 (div 내부에도 div로 묶기 가능)
 
class에 스타일 적용 시, 접근연산자(.)를 사용

contents.section1 {
	background-color: red;
}
    
contents.section2 {
	background-color: yellow;
}

 
 
class 내부의 <h1> 태그에만 스타일 적용도 가능
단, 태그에 적용 시 "띄어쓰기" 필수!

.section3 h1 {
	color: white;
}

 
* class 활용 Tip!
: 거의 비슷하지만 일부의 스타일이 다를 경우 
1.  복붙해서 일부 수정 -> 재사용성 감소, 코드가 너무 길어짐
2. 클래스 안의 클래스 생성
 
ex) 동일 구조이지만 텍스트&이미지가 다른 경우

 
 
HTML 파일에서는 클래스에서 한칸 띄어쓰기를 하고 내부 클래스명 작성

<div class="contents">
            <div class="section">
                <h2>Information</h2>
                <ul>
                    <li>yuhyuni02@daum.net</li>
                    <li>Seoul, Korea</li>
                    <li>010-1234-5678</li>
                </ul>
            </div>

            <div class="section skills">
                <h2>Skills</h2>
                <ul>
                    <li>HTML</li>
                    <li>JAVA</li>
                    <li>C</li>
                </ul>
            </div>
        </div>

 
 
공통으로 적용할 속성을 상위 클래스(section)에 작성하고 클래스 접근연산자(.)을 사용하여 변경할 스타일만 하위 클래스(skill)에 작성

.section {
    background-color: white;
    background-image:url(/img/kitty.png);
    background-repeat: no-repeat;
    background-position: top 10px right 20px;
    background-size: 50px;
    margin:20px;
    padding:15px;
}

.skills {
    background-image : url(/img/kitty2.png);
}

 

• 선택자

(1) 동일한 상위 클래스 : 위에 작성 될수록 우선

h1.wow { }
h1.wow2 { } /* 하위 클래스 */

 
하위 클래스가 상위 클래스보다 뒤에 작성되지 않으면 상위 클래스 코드에 의해 스타일이 덮어쓰기가 된다.
이를 방지하기 위해 스타일 코드 작성 시, 평소에 상위 클래스를 위로 작성하도록 습관 들이기
 
   
(2) 선택자가 같은 클래스로 끝나는 경우 : 구체적일수록  우선

h1.wow { } /* h1 이라는 구체적 상위 클래스를 가졌으므로 우선 선택 */
.wow { } /* 접근 연산자의 범위는 넓기 때문에 구체성이 떨어짐 */

 

• display : 레이아웃 결정

(1) inline : 줄바꿈 여백 크기 X
<span> <a> <b> <i> <img>

(2) block : 가로 영역 모두 차지, 줄바꿈 O
<div> <p> <h> <li> <form>

(3) inline-block : 줄바꿈X 여백 크기 O

원하는 기능이 있을 시, display 속성을 사용하여
속성 변경 가능!
ex) display : inline-block;

• float : 이미지 주변 텍스트 처리

- left : 해당 요소를 왼쪽으로 정렬
- right : 해당 요소를 오른쪽으로 정렬
- inherit : 해당 요소를 상위클래스로부터 상속
 

Algorithm Study (Baekjoon) : '조건문'

 

#2884번 : 알람 시계

시와 분을 입력받아 45분 전의 시와 분으로 출력하는 문제 (Scanner 사용) 

 int H = scan.nextInt();
 int M = scan.nextInt();

        if (M < 45) { // M(분)이 45보다 작을 경우
            H = H - 1;
            M = 60 - (45 - M);

            if (H < 0) {
                H = 23;
            }

        } else { // M(분)이 45보다 클 경우
            M = M - 45;
        }

        System.out.println(H + " " + M);

 
Tip : 45분 이하일 경우 시간 - 1이 되기에 더 복잡한 조건 이기에 먼저 if문을 시작
 
 

#2480번 : 주사위 세 개

주사위 세 개를 굴려 상금을 계산하는 문제 (BufferedReader 사용)

• 세 개가 같을 경우 : 10000원 + (나온 수 * 1000)
• 두 개가 같을 경우 : 1000원 + (나온 수 * 100)
• 모두 다를 경우 : 나온 수 중 최대 값 * 100

* BufferedReader :  문자열을 입력 받는 함수
-> 숫자 이용 시, Integer.parseInt()로 형변환 
 
* StringTokenizer() : 문자열(str)을 " "단위로 분리하여 읽는 함수

 BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        String str = br.readLine();

        StringTokenizer st = new StringTokenizer(str, " ");
        int a = Integer.parseInt(st.nextToken()); // 1번 주사위
        int b = Integer.parseInt(st.nextToken()); // 2번 주사위
        int c = Integer.parseInt(st.nextToken()); // 3번 주사위

        int prize, num, max;

        if (a == b && b == c) { // 주사위 세 개가 모두 같을 경우
            prize = 10000 + (1000 * a);
        } 
        else if (a == b || b == c || a == c) { // 주사위 두 개가 눈이 같을 경우
            num = (a == b) ? a : (b == c) ? b : c; // 삼항 비교를 위해 num 변수 생성
            prize = 1000 + (100 * num);
        } 
        else { // 주사위 세 개가 모두 다를 경우
            max = a;
            if (max < b) max = b;
            if (max < c) max = c; // a > b

            prize = 100 * max;
        }

        System.out.println(prize);