[TIL] Day 07 — Java 클래스 기초 및 CSS 박스모델/효과

[TIL] Day 07 — Java 클래스 기초 및 CSS 박스모델/효과

날짜: 2025-10-28
기술 스택: Java CSS 정렬알고리즘
부트캠프: 풀스택 개발자 부트캠프 2주차

---

Java 정렬 알고리즘

버블 정렬 (Bubble Sort)

for (int i = 0; i < arr.length - 1; i++) {
    for (int j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] > arr[j+1]) {
            int tmp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = tmp;
        }
    }
}

// 실무에서는 Arrays.sort() 사용
import java.util.Arrays;
Arrays.sort(arr);
System.out.println(Arrays.toString(arr)); // 배열 출력

랜덤값 연습 틀

// 랜덤값 10개, 최소/최대/합계/평균
int[] nums = new int;
int sum = 0, min = Integer.MAX_VALUE, max = Integer.MIN_VALUE;
for (int i = 0; i < nums.length; i++) {
    nums[i] = (int)(Math.random() * 100) + 1;
    sum += nums[i];
    if (nums[i] < min) min = nums[i];
    if (nums[i] > max) max = nums[i];
}
double avg = (double) sum / nums.length;

---

Java 클래스 기초

// 클래스 선언
public class Car {
    String color; // 필드(멤버 변수)
    int speed;

    // 생성자
    Car(String color, int speed) {
        this.color = color;
        this.speed = speed;
    }

    // 메서드(멤버 함수)
    void start() { System.out.println("출발"); }
    void stop()  { System.out.println("정지"); }
}

// 사용
public class Main {
    public static void main(String[] args) {
        Car myCar = new Car("Red", 0); // 객체 생성
        myCar.start();
        myCar.speed = 60;
        System.out.println(myCar.speed);
    }
}

• void: 반환값 없는 메서드
• 클래스: 설계도, 객체(인스턴스): 실체

---

CSS 박스 모델

[Margin]  외부 여백
[Border]  테두리
[Padding] 내부 여백
[Content] 실제 내용

.box {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px auto;
    border-radius: 8px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

---

CSS 효과 속성

/* hover 효과 */
.btn {
    opacity: 1;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    color: red;
}

/* 사용자 동작 가상 클래스 순서 (LVHFA 규칙) */
/* :link > :visited > :focus > :hover > :active */

속성	설명
opacity	투명도 (0~1)
transition	변화 애니메이션 설정
transform: scale()	크기 조절
box-shadow	그림자
border-radius	모서리 둥글게
overflow: hidden	넘치는 부분 숨김
cursor	커서 모양 (pointer, move...)

---

CSS 주의 사항

• border: 0 vs border: none — 둘 다 테두리 제거. none이 더 명시적
• ease-in-out: transition 시작과 끝이 천천히, 중간은 빠르게 진행
• :hover:not(.active): active 클래스가 없는 요소에만 hover 적용

---

더 알아볼 것

• 삽입정렬(Insertion Sort) 구현 코드
• Integer.MAX_VALUE / Integer.MIN_VALUE 사용 이유
• Java 클래스 접근 제한자: public, private, protected, default
• CSS position: relative vs absolute 차이
• CSS gradients 문법 (linear-gradient, radial-gradient)