프로그래머스 데브코스 TIL 4일차

프로그래머스 데브코스 TIL 4일차이다.

 

슬슬 다른 수업에서 진행하는 기초적인 프론트의 기술들은 거의 다 배운 것 같다.

 

오늘은 JS의 처음을 배웠고 내일까지 하면 JS까지 전부 마무리 되지 않을까 싶다.

 

 

 

 

---

 

 

CSS 반응형 웹 디자인과 JavaScript 기초 정리

1. 반응형 웹이란?

반응형 웹(Responsive Web)은 사용자가 접속한 스마트폰, 태블릿, 데스크톱 등 다양한 기기의 화면 크기에 맞춰 웹 페이지의 레이아웃을 유동적으로 조절하는 기술입니다. 하나의 웹사이트로 여러 환경에 대응할 수 있도록 설계되어 있으며, 유지 보수가 용이하고 사용자 경험을 향상시키는 장점이 있습니다.

반응형 웹의 장점

• HTML과 CSS로 구성되어 있어 웹 표준을 지원하는 다양한 스마트 기기(웨어러블, 스마트 TV, 게임 콘솔 등)에서 접근이 가능합니다.
• 기기를 가로로 회전하거나 화면 너비가 변경되면 CSS가 자동으로 레이아웃을 조절해 자연스러운 화면 구성이 가능합니다.
• 하나의 웹사이트로 여러 기기를 대응하기 때문에 사이트 관리 및 유지보수가 효율적입니다.
• 단점으로는 구형 브라우저에서는 일부 반응형 기능이 제한될 수 있다는 점이 있습니다.

---

2. 뷰포트(Viewport)란?

뷰포트란 사용자가 실제로 웹사이트를 볼 수 있는 화면의 영역을 의미합니다. 반응형 웹을 구현할 때 뷰포트 설정은 매우 중요하며, 다음과 같은 메타 태그로 정의할 수 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

주요 속성

속성 설명 예시

width	뷰포트 너비 설정	device-width
height	뷰포트 높이 설정	device-height
user-scalable	확대/축소 가능 여부	yes / no
initial-scale	초기 배율	1.0
minimum-scale	최소 배율	0.25
maximum-scale	최대 배율	1.6

---

3. 미디어 쿼리(Media Queries)

미디어 쿼리는 기기의 조건(화면 너비, 방향 등)에 따라 CSS 스타일을 다르게 적용할 수 있도록 도와주는 기능입니다.

기본 문법

@media [not | only] 미디어유형 [and 조건] {
    /* 스타일 코드 */
}

연산자 설명

• and: 조건을 추가할 때 사용합니다.
• , (쉼표): 여러 조건을 동시에 적용할 때 사용합니다.
• only: 미디어 쿼리를 지원하지 않는 브라우저에서 스타일을 무시하도록 합니다.
• not: 특정 조건을 제외할 때 사용합니다.

미디어 유형

유형 설명

all	모든 장치
screen	화면 장치 (PC, 모바일 등)
print	인쇄 장치
tv	TV 화면
handheld	휴대용 장치 (패드 등)

예시: 화면 크기에 따른 배경 변경

body {
    background: url(images/choco5.jpg) no-repeat fixed;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    body {
        background: url(images/choco9.jpg) no-repeat fixed;
        background-size: cover;
    }
}

@media screen and (max-width: 768px) {
    body {
        background: url(images/choco8.jpg) no-repeat fixed;
        background-size: cover;
    }
}

@media screen and (max-width: 320px) {
    body {
        background: url(images/choco7.jpg) no-repeat fixed;
        background-size: cover;
    }
}

화면 회전 대응

@media screen and (orientation: landscape) {
    body { background-color: orange; }
}

@media screen and (orientation: portrait) {
    body { background-color: yellow; }
}

---

JavaScript 기초 정리

1. JavaScript란?

JavaScript는 웹 브라우저에서 동작하는 스크립트 언어로, HTML과 CSS와 함께 웹 프론트엔드의 3대 핵심 기술 중 하나입니다. JavaScript는 인터프리터 언어로 별도 컴파일 없이 브라우저에서 직접 실행되며, 동적인 웹 애플리케이션 개발에 널리 사용됩니다.

탄생과 발전

• 1995년 Netscape의 브렌던 아이크가 개발
• 1996년 Microsoft의 Internet Explorer에 탑재
• ECMAScript라는 표준화 작업이 1997년부터 시작
• 2008년 이후 웹 애플리케이션의 성장과 함께 대중화

---

2. JavaScript의 특징

• 인터프리터 언어: 코드를 실행 시 즉시 해석
• 동적 타입 언어: 변수에 타입을 명시하지 않으며, 실행 중 타입이 변할 수 있음
• 프로토타입 기반 객체지향 언어: 클래스가 아닌 프로토타입으로 객체를 상속함
• 함수는 일급 객체: 함수 자체도 값처럼 다룰 수 있음
• 클로저 지원: 함수 내부에서 외부 변수에 접근 가능

---

3. JavaScript 문법 기초

변수 선언

var x = 10;
let y = 20;
const z = 30;

데이터 타입

• 숫자형: 10, 3.14
• 문자형: "문자열", '문자열'
• 불리언형: true, false
• null: 값이 없음
• undefined: 선언되었으나 값이 없음

출력 방법

alert("경고창 출력");
console.log("콘솔 출력");
document.write("문서에 출력");

---

4. 연산자

산술 연산자

let a = 10, b = 3;
a + b;  // 덧셈
a - b;  // 뺄셈
a * b;  // 곱셈
a / b;  // 나눗셈
a % b;  // 나머지

대입 및 증감 연산자

let x = 5;
x += 2;   // x = x + 2
x++;      // x = x + 1

비교 연산자

10 == '10';     // true (값만 비교)
10 === '10';    // false (값 + 타입 비교)
10 != '10';     // false
10 !== '10';    // true

논리 연산자

true && false;  // false
true || false;  // true
!true;          // false

---

5. 문자 결합

let txt1 = "노는게 제일 좋아";
let txt2 = " 친구들 모여라";
let result = txt1 + txt2;
document.write(result);

---

6. 실습 예제

// 멤버 수 합산
let newJeans = 5;
let ive = 6;
let leSserafim = 6;
let total = newJeans + ive + leSserafim;

alert("뉴진스 + 아이브 + 르세라핌 은 총 " + total + "명 입니다.");
console.log("뉴진스 + 아이브 + 르세라핌 은 총 " + total + "명 입니다.");
document.write("뉴진스 + 아이브 + 르세라핌 은 총 " + total + "명 입니다.<br>");

// 수식 결과 출력
let result = 10 / (50 - 10) * 10;
document.write("수식 결과: " + result);

---

 

4일차도 끝이 났다.

 

오늘은 피곤해서 일찍 자야 할 것 같다... 내일도 화이팅!!