1. 오류 발견:
   • 유효성 검사를 하면 문법 오류나 태그 누락, 잘못된 속성 사용 등 코딩 실수를 쉽게 찾을 수 있어요.
   • 예를 들어, 닫는 태그가 빠졌거나 오타가 있을 때 브라우저가 제대로 해석하지 못할 수 있는데, 이런 문제를 미리 찾아서 고칠 수 있어요.

2. 웹 표준 준수:
   • HTML과 CSS가 W3C 같은 웹 표준을 따르게 되면, 다양한 브라우저와 기기에서 일관되게 페이지가 보여지고 작동해요.
   • 표준을 지키면 유지보수와 협업도 쉬워집니다.

3. 접근성 및 SEO 개선:
   • 올바른 코드 구조는 스크린 리더와 같은 보조 기술이 페이지 내용을 올바르게 읽어줄 수 있게 도와줘요.
   • 검색 엔진도 표준에 맞는 코드를 선호하기 때문에, SEO(검색 엔진 최적화)에도 긍정적인 영향을 줍니다.

4. 유지보수 용이성:
   • 오류 없는, 깔끔한 코드는 나중에 수정하거나 기능을 추가할 때도 쉽고 빠르게 작업할 수 있도록 해줘요.
     

이처럼 HTML과 CSS 파일을 유효성 검사를 하면, 코드를 깔끔하게 유지하고, 예기치 않은 문제를 예방하며, 사용자와 검색 엔진 모두에게 좋은 웹 페이지를 제공할 수 있습니다 :)

1. 인라인 방식 (Inline Event Handler)

예시 코드:

<!-- HTML 내에 직접 이벤트 핸들러를 작성 -->
<button onclick="alert('인라인 방식 이벤트')">클릭하세요</button>

장점:

• 간단함: HTML 태그에 바로 작성하므로 빠르게 이벤트를 설정할 수 있어요.

2. 프로퍼티 리스너 (Property Listener)

예시 코드:

<!-- HTML -->
<button id="propBtn">클릭하세요</button>

// JavaScript
const propBtn = document.getElementById("propBtn");
propBtn.onclick = function() {
  alert("프로퍼티 리스너 이벤트");
};

장점:

• 직관적 관리: 자바스크립트 코드 내에서 요소의 프로퍼티를 사용해 이벤트를 등록할 수 있어요.

3. 이벤트 등록 메서드 (addEventListener)

예시 코드:

<!-- HTML -->
<button id="eventBtn">클릭하세요</button>

// JavaScript
const eventBtn = document.getElementById("eventBtn");
eventBtn.addEventListener("click", function() {  // 보통 on을 빼면 됨. 원래 onclick이었음.
  alert("addEventListener 이벤트");
});

장점:

• 유연성: 한 요소에 여러 이벤트 핸들러를 등록할 수 있고, 이벤트 캡처링/버블링 등 다양한 옵션을 제어할 수 있어요.

보통 유지보수와 기능 확장 측면에서 addEventListener 방식이 많이 사용됩니다.

함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로 참조하려는 함수가 ~보다 반드시 위에 작성되어야 합니다.

여기서 ~는 중요한게 아니고. 암튼 먼저 작성되어야 한다는 사실인데

함수 표현식이란?

함수를 변수에 할당하거나 다른 곳에 전달할 때 사용하는 표현 방식

1. 익명 함수 표현식 (Anonymous Function Expression)
   이름 없이 함수를 선언해서 변수에 할당해요.

   var greet = function(name) {
     return "Hello, " + name;
   };
   
   console.log(greet("Alice")); // 출력: Hello, Alice

2. 이름 있는 함수 표현식 (Named Function Expression)
   함수에 이름을 붙여서 디버깅이나 재귀 호출 시 유리해요. 단, 외부에서는 이름으로 직접 호출할 수 없고 변수로 접근해야 해요.

   var greet = function sayHello(name) {
     return "Hello, " + name;
   };
   
   console.log(greet("Bob")); // 출력: Hello, Bob
   // sayHello는 함수 내부에서만 사용 가능해요.

3. 화살표 함수 표현식 (Arrow Function Expression)
   ES6부터 추가된 간결한 문법의 함수 표현식이에요. this를 상위 스코프에서 가져오고, 코드가 짧아지는 장점이 있어요.

   const greet = name => "Hello, " + name;
   console.log(greet("Charlie")); // 출력: Hello, Charlie

4. 즉시 실행 함수 표현식 (Immediately Invoked Function Expression, IIFE)
   함수를 선언하자마자 바로 실행하는 형태예요. 주로 변수의 스코프를 제한할 때 사용됩니다.

   (function() {
     console.log("즉시 실행 함수가 실행되었습니다!");
   })();

이처럼 함수 표현식은 익명, 이름 있는, 화살표, IIFE 등 여러 종류로 나뉘며, 상황에 맞게 적절한 형태를 선택해서 사용합니다.

선언과 할당부가 분리된다는 건?

함수 표현식을 예로 들면, 함수를 만드는 두 단계가 있다는 뜻이에요.

1. 선언 단계:
   먼저, 변수 이름을 선언합니다. 이 단계에서는 아직 함수가 들어있지 않아서 변수는 비어 있거나 undefined 상태예요.

2. 할당 단계:
   나중에 그 변수에 실제 함수(함수의 코드)를 할당합니다. 이때부터 그 변수는 함수로 동작하게 돼요.

// 1. 변수 선언 단계 (hoisting에 의해 변수는 선언되지만, 값은 아직 없음)
var myFunction;

console.log(myFunction); // 출력: undefined

// 2. 할당 단계: 변수에 함수가 할당됨
myFunction = function() {
  console.log("안녕하세요!");
};

myFunction(); // 출력: "안녕하세요!"

이렇게 함수 표현식에서는 함수를 선언(변수 생성)한 후에 함수를 할당하기 때문에, 선언과 할당이 분리되어 있다고 말해요.

반면, 함수 선언문은 한 번에 함수의 이름과 내용을 모두 정의하기 때문에, 선언과 할당이 동시에 이루어집니다.

form은 웹 페이지에서 사용자에게 정보를 입력받기 위해 사용됩니다.
예) 회원가입, 로그인, 설문조사, 검색 등

2. 자주 쓰이는 form 요소

1. input
   • 사용자로부터 한 줄의 텍스트, 숫자, 이메일, 비밀번호 등 다양한 데이터를 입력받을 때 사용.
2. select
   • 드롭다운 목록을 만들어 사용자가 미리 정해진 옵션 중 하나를 선택.
3. label
   • 폼 요소(input, select 등)에 어떤 내용(설명, 제목)이 들어가는지.
     label을 클릭하면 연결된 입력 요소로 포커스가 이동해서 편리.

3. label, input, select의 관계

관계:
label 태그는 input이나 select 같은 폼 요소의 설명을 붙여줍니다.

label의 for 속성에 폼 요소의 id 값을 지정하면, label과 폼 요소가 연결돼요. 이렇게 연결하면 label을 클릭할 때 해당 폼 요소에 바로 포커스가 가요.

예시: 실제 웹페이지 "프로필 등록" 폼. 라디오 버튼(성별 선택), 체크박스(관심사 선택), 파일 첨부(프로필 사진), 그리고 콤보박스(국가 선택)가 포함

<form id="profileForm">
  <h2>프로필 등록</h2>

  <!-- 라디오 버튼: 성별 선택 -->
  <fieldset>
    <legend>성별 선택</legend>
    <label for="male">
      <input type="radio" id="male" name="gender" value="male">
      남성
    </label>
    <label for="female">
      <input type="radio" id="female" name="gender" value="female">
      여성
    </label>
  </fieldset>

  <br>

  <!-- 체크박스: 관심사 선택 -->
  <fieldset>
    <legend>관심사 (여러 개 선택 가능)</legend>
    <label for="music">
      <input type="checkbox" id="music" name="interests" value="music">
      음악
    </label>
    <label for="sports">
      <input type="checkbox" id="sports" name="interests" value="sports">
      스포츠
    </label>
    <label for="movies">
      <input type="checkbox" id="movies" name="interests" value="movies">
      영화
    </label>
  </fieldset>

  <br>

  <!-- 파일 첨부: 프로필 사진 -->
  <div>
    <label for="profilePic">프로필 사진 첨부:</label>
    <input type="file" id="profilePic" name="profilePic">
  </div>

  <br>

  <!-- 콤보박스: 국가 선택 -->
  <div>
    <label for="countrySelect">국가 선택:</label>
    <select id="countrySelect" name="country">
      <option value="">선택하세요</option>
      <option value="kr">대한민국</option>
      <option value="us">미국</option>
      <option value="jp">일본</option>
    </select>
  </div>

  <br>

  <button type="submit">제출</button>
</form>

1. 체크박스 (Checkbox):

   • 여러 관심사를 선택할 수 있도록 합니다.
   • 예시에서는 "음악", "스포츠", "영화" 중 원하는 항목을 여러 개 선택할 수 있어요.

2. 라디오 버튼 (Radio):

   • 성별 같이 단 하나만 선택할 수 있는 옵션에 사용해요.
   • 같은 name 값을 가진 입력 중 하나만 선택됩니다.

3. 파일 첨부 (File):

   • 사용자가 컴퓨터에서 파일(예: 프로필 사진)을 선택할 수 있게 해줘요.

4. 콤보박스 (Select):

   • 드롭다운 목록을 제공하여 미리 정해진 옵션(국가) 중 하나를 선택할 수 있도록 합니다.

이렇게 form을 구성하면, 사용자가 정보를 쉽게 입력하고 선택할 수 있으며, label 덕분에 어떤 정보를 입력해야 하는지 한눈에 알 수 있음!!

• 오래전부터 쓰여온 방법으로, 주로 id, class, 태그 이름 등 특정 기준으로 요소를 찾을 때 사용해요.
• 예시:*
  • document.getElementById("myId"): id가 "myId"인 요소 하나를 찾아요.
  • document.getElementsByClassName("myClass"): class가 "myClass"인 모든 요소들을 찾아요.

// id로 요소 찾기
const elementById = document.getElementById("myId");
console.log(elementById);

// class로 여러 요소 찾기
const elementsByClass = document.getElementsByClassName("myClass");
console.log(elementsByClass);

query 메서드

• CSS 선택자 문법을 사용하여 요소를 찾는 방법이에요.
  원하는 조건을 아주 유연하게 조합할 수 있어서, 요즘 많이 쓰여요.
• 예시:
  • document.querySelector("#myId"): id가 "myId"인 첫 번째 요소를 찾아요.
  • document.querySelectorAll(".myClass"): class가 "myClass"인 모든 요소들을 찾아요.

// CSS 선택자로 id로 요소 찾기
const elementByQuery = document.querySelector("#myId");
console.log(elementByQuery);

// CSS 선택자로 class로 여러 요소 찾기
const elementsByQuery = document.querySelectorAll(".myClass");
console.log(elementsByQuery);

뭐가 더 자주 쓰이나요?

query 메서드

• 요즘에는 querySelector와 querySelectorAll이 많이 쓰여요.
• 이유는 CSS 선택자 문법을 사용하기 때문에, 복잡한 조건도 쉽게 적용할 수 있어서 편리해요.

get 메서드

• 단순하게 id나 class, 태그만 정확하게 찾을 때는 여전히 많이 사용돼요.
• 특히, getElementById는 매우 빠르고 자주 사용됩니다.

query 메서드가 더 유연해서 최근에는 많이 쓰이지만, 상황에 따라 get 메서드도 유용하게 사용.

여기서 유연이란?

"유연하다"는 말은 querySelector와 querySelectorAll을 사용할 때, CSS 선택자 문법을 그대로 활용할 수 있다는 의미. 이를 통해 여러 조건을 한 번에 결합하여 복잡한 요소 선택 가능.

예,

• id와 class를 동시에 선택:

  document.querySelector("#myId.myClass");

  위 코드는 id가 "myId"이고, 동시에 class가 "myClass"인 요소를 찾습니다.

• 특정 속성을 가진 요소 선택:

  document.querySelector("[data-role='admin']");

  위 코드는 data-role 속성이 "admin"인 요소를 찾습니다.

즉, 단순히 id나 class만 찾는 get 메서드보다, CSS 선택자처럼 다양한 조건을 조합해서 원하는 요소를 더 세밀하게 선택할 수 있는 장점이 있어서 "유연하다"고 표현합니다.

화살표 함수는 자바스크립트에서 함수를 더 짧고 간단하게 쓸 수 있도록 도와주는 문법! 전통적인 함수 표현식보다 코드가 훨씬 깔끔.

구조 비교

• 전통적인 함수:

  function add(a, b) {
    return a + b;
  }

• 화살표 함수:

  const add = (a, b) => {
    return a + b;
  }

화살표 함수를 사용하면 function 키워드를 쓰지 않고, 대신 => 기호를 사용해서 함수를 정의할 수 있어요.

간단한 문법들

1. 리턴문이 한 줄인 경우

리턴할 내용이 한 줄이면, 중괄호와 return 키워드를 생략할 수 있어요.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 출력: 5

2. 매개변수가 하나인 경우

매개변수가 하나일 때는 괄호를 생략할 수 있어요.

const square = x => x * x;
console.log(square(4)); // 출력: 16

3. 매개변수가 없는 경우

매개변수가 없으면 빈 괄호를 사용해요.

const sayHello = () => console.log("안녕!");
sayHello(); // 출력: 안녕!

자주 쓰이는 방식

• 짧은 문법으로 코드 간결하게 만들기:
  화살표 함수는 특히 배열의 각 요소를 처리할 때 자주 사용돼요.

  const numbers = [1, 2, 3, 4];
  const squares = numbers.map(x => x * x);//매개변수가 하나라 괄호 없음
  console.log(squares); // 출력: [1, 4, 9, 16]

• 콜백 함수로 사용하기:
  다른 함수에 인자로 넘길 때도 많이 쓰여요.

  setTimeout(() => {
    console.log("3초 후에 실행됩니다.");
  }, 3000);

정리

• 간단함: 전통적인 함수보다 코드가 짧고 읽기 easy
• 문법:
  • 여러 매개변수: (a, b) => ...
  • 하나의 매개변수: x => ...
  • 매개변수 없음: () => ...
• 리턴: 한 줄로 리턴할 때는 중괄호와 return 생략 가능.

화살표 함수를 잘 활용하면 자바스크립트 코드를 더 깔끔하게 작성 가능!

1. 표현식 평가:

   • switch(표현식) 내부의 값을 평가합니다.

2. case 매칭:

   • 평가된 값과 각 case에 작성된 값들을 엄격 비교(===)합니다.
   • 일치하는 case가 있으면, 그 위치로 점프하여 실행을 시작합니다.

3. 코드 실행 및 fall-through:

   • 일치한 case부터 시작해서 break를 만나기 전까지 아래쪽의 코드들이 모두 실행됩니다.
   • 이 현상을 fall-through라고 부릅니다.

4. default 실행:

   • 모든 case와 일치하지 않을 경우, default 블록의 코드가 실행됩니다.
   • default는 보통 마지막에 작성하지만, 위치에 따라 실행 순서에 영향을 줄 수 있습니다.

5. break 의 역할:

   • 각 case(또는 default) 끝에 break를 작성하면, 그 시점에서 switch 문을 종료시켜 이후 코드 실행을 막습니다.
   • 만약 break가 없다면 fall-through 현상으로 다음 case의 코드도 실행됩니다.

예시 코드

예시 1: 기본적인 switch 흐름과 fall-through

let value = 2;

switch (value) {
  case 1:
    console.log("첫 번째 case");
    // break가 없으면 아래 case도 실행됨
  case 2:
    console.log("두 번째 case");
    // break가 없으므로, value가 2이면 fall-through 발생
  case 3:
    console.log("세 번째 case");
    break; // 여기서 switch 종료
  default:
    console.log("default case");
    break;
}
// value가 2인 경우 "두 번째 case"와 "세 번째 case"가 출력됩니다.

예시 2: default 위치에 따른 실행 흐름

let animal = "rabbit";

switch (animal) {
  case "dog":
    console.log("개");
    break;
  default:
    console.log("알 수 없는 동물");
    // break가 없으므로, default 실행 후 아래 case가 실행될 수 있음
  case "cat":
    console.log("고양이");
    break;
}

// animal이 "rabbit"일 경우,
// "알 수 없는 동물"이 출력되고, break가 없으므로 이어서 "고양이"도 출력됩니다.
//
// animal이 "cat"일 경우,
// switch문은 "cat" case로 바로 점프하여 "고양이"만 출력됩니다.

요약

• 점프: switch는 조건에 맞는 case를 찾으면 그 위치로 바로 이동하여 실행합니다.
• fall-through: break 없이 작성된 경우, 일치한 case 이후의 모든 코드가 실행됩니다.
• default: 모든 case와 일치하지 않을 때 실행되는 기본 코드 블록으로, 보통 마지막에 작성하지만 위치에 따라 실행 순서가 달라질 수 있습니다.
• break: 각 case나 default 뒤에 작성하여 해당 case 실행 후 switch문을 종료시킵니다.

switch 문의 흐름과 fall-through, 그리고 default의 역할을 쉽게 이해할 수 있습니다.

<div class="grid-container">
  <div class="item item1">1번 아이템</div>
  <div class="item item2">2번 아이템</div>
  <div class="item item3">3번 아이템</div>
</div>

위 HTML을 위한 CSS는 다음과 같습니다.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px; /* 4개의 열, 각각 100px */
  gap: 10px; /* 아이템 사이에 10px 간격 */
  background-color: #eee;
  padding: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}

/* 2번 아이템의 시작 위치를 조정 */
.item2 {
  grid-column-start: 3; /* 이 아이템은 3번째 열에서 시작 */
}

이 코드의 동작 원리

1. 그리드 컨테이너 설정:

   • grid-template-columns: 100px 100px 100px 100px;는 컨테이너 안에 4개의 열을 만들고, 각각의 너비를 100px로 설정합니다.
   • 그리드 라인:
     • 열이 4개라면 왼쪽 가장자리부터 오른쪽 가장자리까지 총 5개의 그리드 라인(경계선)이 생깁니다.
     • 이 라인들은 1, 2, 3, 4, 5번으로 번호가 붙습니다.

2. 기본 배치:

   • 특별한 위치 지정 없이 아이템은 첫 번째 그리드 라인부터 차례대로 배치됩니다.
   • 따라서, item1은 1번째 열, item2는 기본적으로 2번째 열, item3은 3번째 열에 위치합니다.

3. grid-column-start 사용:

   • .item2 { grid-column-start: 3; }는 2번 아이템이 기본 순서와 상관없이 3번째 그리드 라인에서 시작하도록 지시합니다.
   • 즉, 아이템은 3번째 열에서 시작하게 됩니다.
   • 만약 grid-column-end 속성과 함께 사용한다면, 아이템이 몇 개의 열을 차지할지도 지정할 수 있습니다.

시각적 예시

• 원래 배치:

  • 아이템1: 1번 열
  • 아이템2: 2번 열
  • 아이템3: 3번 열

• grid-column-start: 3; 적용 후!!

  • 아이템1: 여전히 1번 열
  • 아이템2: 3번 열부터 시작
  • 아이템3: 자동 배치되므로 4번 열(혹은 그리드 설정에 따라 달라짐)

이처럼 grid-column-start를 사용하면, 특정 아이템을 원하는 열에서 시작하게 하여 레이아웃을 보다 세밀하게 조정 가능~

@keyframes example {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  100% {
    background-color: blue;
    transform: translateX(100px);
  }
}

• @keyframes example { ... }

  • 여기서 example은 애니메이션의 이름입니다. 이 이름을 통해 나중에 CSS 규칙에서 애니메이션을 참조하게 됩니다.

• 0% (시작 상태):

  • background-color: red;
    • 애니메이션 시작 시, 요소의 배경색을 빨간색으로 설정합니다.
  • transform: translateX(0);
    • 요소의 위치를 수평 방향으로 0픽셀 이동, 즉 원래 위치에 있도록 지정합니다.

• 100% (끝 상태):

  • background-color: blue;
    • 애니메이션이 끝날 때, 요소의 배경색을 파란색으로 변경합니다.
  • transform: translateX(100px);
    • 요소를 오른쪽으로 100픽셀 이동시킵니다.

중간 상태를 더 추가하고 싶다면 0%와 100% 사이에 25%, 50%, 75%와 같이 키프레임을 추가할 수 있어요.

2. 애니메이션 적용

.element {
  width: 100px;
  height: 100px;
  animation: example 2s infinite;
}

• .element { ... }

  • 이 클래스가 적용된 요소에 대해 스타일을 지정합니다.

• width: 100px;와 height: 100px;

  • 요소의 가로, 세로 크기를 100픽셀로 지정하여, 애니메이션 효과가 잘 보이도록 합니다.

• animation: example 2s infinite;

  • example: 위에서 정의한 애니메이션 이름을 참조합니다.
  • 2s: 애니메이션이 2초 동안 실행됩니다. (즉, 0%에서 100%까지 2초 걸림)
  • infinite: 애니메이션을 무한 반복합니다. 즉, 2초마다 처음부터 다시 실행됩니다.

전체 동작 요약

1. 시작:

   • .element에 빨간색 배경과 원래 위치에서 시작합니다.

2. 2초 동안 진행:

   • 시간이 지나면서 요소의 배경색이 빨간색에서 파란색으로 점차 바뀌고,
   • 동시에 요소가 오른쪽으로 100픽셀 이동합니다.

3. 반복:

   • 애니메이션이 끝나면 다시 처음 상태로 돌아가 같은 효과를 무한 반복하게 됩니다.

이 예제 코드를 통해 CSS의 @keyframes를 사용하여 간단한 애니메이션을 어떻게 정의하고 적용하는지, 그리고 애니메이션의 각 단계를 어떻게 설정하는지 이해할 수 있어요.

detail

1. value="1" (따옴표 사용)

   • HTML 표준에서는 속성 값을 문자열로 인식합니다.
   • 따라서 따옴표 안의 값은 항상 문자열로 간주됩니다.
   • 예를 들어, value="1"은 "1"이라는 문자열을 나타냅니다.

2. value=1 (따옴표 생략)

   • 따옴표가 없을 경우, HTML에서는 기본적으로 속성 값을 문자열로 자동 변환합니다.
   • 예를 들어, value=1을 작성하면 브라우저는 내부적으로 이를 value="1"로 변환해서 처리합니다.

정리

• HTML에서는 따옴표가 있든 없든 결과적으로 속성 값은 문자열로 처리됩니다.
• 즉, value="1"과 value=1은 브라우저 상에서 동일하게 동작합니다.

그러면 왜 따옴표를 사용하는가?

1. 값에 공백이나 특수 문자가 포함된 경우에는 반드시 따옴표를 사용

   <option value="hello world">Hello World</option> <!-- 따옴표 필수 -->

2. 일관성 있는 코드 스타일을 유지

요약:

• value="1"과 value=1은 브라우저에서 동일하게 처리됩니다.
• 하지만 HTML 표준에서는 따옴표를 사용하는 것이 더 안전하고 일관성 있는 작성법입니다. 😊

위 코드는 알람 예약 선택지를 만드는 방법 중 하나이다. for문을 쓰기에 -> 내가 하나하나 모든 숫자를 입력할 필요가 없는 방법

option.textContent = i.toString().padStart(2, "0");

이 부분은 i를 문자열로 바꾸고, padStart는 말 그대로 패드가 2개라는 것이다. 앞이 비면 0으로 채우겠다. 이런 뜻! i가 3이면 03이겠지요?

그치만 이것보다 더 UI/UX 쪽으로 좋은 방법이 있습니다.

<div>
            <input id="hour" type="number" class="time-input" placeholder="시" min="0" max="23" />
            :
            <input id="minute" type="number" class="time-input" placeholder="분" min="0" max="59" />
            :
            <input id="second" type="number" class="time-input" placeholder="초" min="0" max="59" />
            <button id="add-alarm-button" class="control-button">추가</button>
        </div>

이런 식으로 아예 input으로 받아버리는 방법 하루종일 스크롤할일 없겠죠?

batteryStatus.textContent = `배터리: ${batteryLevel}%`; 이건 템플릿 리터럴(template literal)이라는 자바스크립트 문법~!

1. batteryStatus.textContent

이 부분은 HTML에 있는 특정 요소(여기선 batteryStatus라는 ID를 가진 요소)의 내용을 바꾸는 역할을 해요.

• batteryStatus: 자바스크립트가 HTML에서 id="batteryStatus"인 요소를 찾아서 저장한 변수.
• .textContent: 이 속성은 HTML 요소 안의 텍스트 내용을 가져오거나 바꾸는 기능이에요.

예를 들어, 아래 HTML이 있다면:

<div id="batteryStatus"></div>

batteryStatus.textContent는 이 상자 안의 텍스트를 "배터리: 50%" 같은 내용으로 채우게 됩니다.

2. 배터리: ${batteryLevel}%

이 부분은 템플릿 리터럴이라는 문법을 사용한 거예요.

템플릿 리터럴이란?

• 템플릿 리터럴은 문자열을 만들 때 사용하는 새로운 방법
• 백틱(backtick)이라고 불리는 기호()를 사용해요. 보통 문자열을 만들 땐 작은따옴표(')나 큰따옴표(")를 쓰잖아요? 템플릿 리터럴은 백틱()을 씁니다.
• 문자열 안에 변수나 표현식을 쉽게 넣을 수 있는 장점이 있다.

${batteryLevel}의 의미

• ${} 안에 변수를 넣으면, 그 값이 문자열 안에 자동으로 들어가요.
• 예를 들어 batteryLevel이 50이라면, ${batteryLevel}은 50으로 바뀌어요.

3. 전체 문자열 만들기

배터리: ${batteryLevel}%는 두 가지를 합쳐서 하나의 문자열로 만드는 거예요:

1. 고정된 텍스트: 배터리:와 %는 그냥 문자열이에요. 항상 그대로 출력돼요.
2. 변수 값: ${batteryLevel}은 변수의 값을 문자열에 끼워 넣는 역할을 해요.

만약 batteryLevel = 75라면, 이 표현은 자동으로 이렇게 바뀝니다:

배터리: 75%

전체 코드의 역할

batteryStatus.textContent = `배터리: ${batteryLevel}%`;

이 한 줄 코드는

1. 배터리 상태를 나타내는 문자열을 만들어서,
   • 예: "배터리: 75%"
2. HTML 요소(batteryStatus)의 텍스트 내용을 그 문자열로 바꾸는 역할을 해요.

템플릿 리터럴의 장점

템플릿 리터럴을 쓰면 아래처럼 복잡한 코드가 간단해집니다:

batteryStatus.textContent = '배터리: ' + batteryLevel + '%';

위처럼 문자열을 더하는 대신, 배터리: ${batteryLevel}%로 쉽게 쓰는 거죠!

요약

batteryStatus.textContent = `배터리: ${batteryLevel}%`;는 템플릿 리터럴을 사용해서 "배터리: 75%" 같은 문자열을 만들고, 그걸 HTML의 텍스트로 표시하는 코드예요! 😊

반응형 웹은 화면 크기에 따라 웹사이트가 자동으로 예쁘게 변하는 거야. 핸드폰에서는 글씨가 작아지고, 사진이 한 줄로 나오는 거지~

1. CSS 레이아웃

   • 화면을 어떻게 나눌지 정하는 방법이야.
   • Float, Flexbox, Grid를 사용해서 정렬하고 배치해.

2. 미디어 쿼리

   • 화면 크기에 따라 다른 스타일을 적용해.
   • 예를 들어, 핸드폰 화면에서는 글씨를 크게 하고, 사진을 한 줄로 보여줘.

3. 단위 사용법 (%, em, rem)

   • %: 부모에 따라 비율로 크기를 정해.
   • em, rem: 글씨나 요소 크기를 조절(상대적) em은 부모의 ~배. 가장 바깥친구는 기본으로 배정되는 16px 기준이다. rem은 최고 루트의 ~배. 기본 브라우저에 16px 기준. 만약 내가 따로 24px로 설정했다면 그것에 따라 정해짐. 부모와 상관 없음. %는 em 대신에 쓰일 수 있다. 부모의 ~ %니까. 기본적으로 ~v***는 브라우저 너비 or 높이의 ~%를 쓰겠다. 근데 이제 vmax는 너비와 높이 중에 큰 친구에 대한 값으로 쓰겠다.

출처: https://www.youtube.com/watch?v=7Z3t1OWOpHo

참고

• CSS 반응형 가이드
• 미디어 쿼리 배우기
• 동영상으로 배우기

결론

반응형 웹은 어떤 화면에서도 깔끔하게 보이게 만드는 기술 :)

스타일 초기화를 위한 간단한 reset.css 와 normalize.css

1. reset.css

• 완전히 리셋(초기화) 하는 스타일.
• 모든 브라우저의 기본 스타일(여백, 크기, 폰트 등)을 없애버려서 완전히 깨끗한 상태.

예: 자주 초기화되는 것들

/* 모든 여백 제거 */
body, h1, h2, h3, p, ul, ol {
  margin: 0;
  padding: 0;
}

/* 리스트 점 없애기 */
ul, ol {
  list-style: none;
}

/* 박스 크기 초기화 */
* {
  box-sizing: border-box;
}

쉽게 말해: "브라우저 기본 스타일 다 지우고, 내가 스타일을 처음부터 다 정리할게!"라는 느낌이야.

2. normalize.css

• 리셋하지 않고, 조정하는 스타일.
• 브라우저마다 기본 스타일이 다르니까, 비슷하게 맞추기 위해 조정만.

예: 자주 조정되는 것들

/* HTML5 요소 스타일 정리 */
article, aside, footer, header, nav, section {
  display: block;
}

/* 폰트 상속 문제 해결 */
button, input {
  font: inherit;
}

/* 테이블 테두리 조정 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

쉽게 말해: "브라우저 기본 스타일을 완전히 없애지는 않고, 조정해서 보기 좋게 만들자!"라는 느낌이야.

차이점

table에 관한 코드가 reset.css와 normalize.css 둘 다에 해당할 수 있느냐를 따져보면, 상황에 따라 다르다고 할 수 있다.

1. reset.css의 경우

reset.css는 기본적으로 스타일을 전부 제거하거나 0으로 초기화하는 데 집중해.
따라서 border-collapse: collapse;와 border-spacing: 0; 같은 코드는 기본 브라우저 스타일을 없애는 역할로 볼 수 있어.
즉, reset.css에서 충분히 등장할 수 있는 코드야.

2. normalize.css의 경우

normalize.css는 브라우저마다 다른 기본 스타일을 통일하는 데 집중해.

• 테이블의 border-collapse와 border-spacing은 일부 브라우저에서 기본값이 다를 수 있기 때문에, normalize.css에서도 등장할 가능성이 있어.
  다만, normalize.css에서는 테이블의 기본 스타일을 완전히 초기화하기보다는 적당한 초기값으로 조정하는 방향으로 다룬다고 보면 돼.

결론

table { border-collapse: collapse; border-spacing: 0; }는 reset.css와 normalize.css 둘 다에서 등장할 수 있는 코드야.

• reset.css: 테이블 스타일을 완전히 제거하는 목적.
• normalize.css: 브라우저 간 차이를 줄이고, 기본값을 통일하기 위한 목적.

언제 어떤 걸 쓰지?

• reset.css: 완전히 깨끗한 상태에서 시작하고 싶을 때.
• normalize.css: 기본 스타일을 살리면서 편하게 작업하고 싶을 때.

자주 쓰이는 코드 설명

1. html, body

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

• 기본 여백 제거: 브라우저는 body나 html에 기본적으로 여백(margin)과 안쪽 여백(padding)을 추가하는데, 이걸 없애서 레이아웃을 깔끔하게 만들어.
• 테두리 제거: 기본적으로 붙는 테두리(border)도 없앰.

2. ol, ul

ol, ul {
  list-style: none;
}

• 리스트 스타일 초기화: 브라우저는 ul(순서 없는 리스트)과 ol(순서 있는 리스트)에 점이나 숫자 같은 리스트 스타일을 붙여. 이걸 없애서 깔끔한 리스트를 만들도록 초기화한 거야.

3. table

table {
  border-collapse: collapse;
  border-spacing: 0;
}

• 테이블 간격 없애기:
  • border-collapse: collapse;: 테이블 셀(border) 사이의 간격을 없앰.
  • border-spacing: 0;: 셀 사이의 간격을 0으로 설정.
• 테이블이 붙어 있는 깔끔한 스타일을 만들 때 필요해.

reset.css랑 normalize.css는 스타일 초기화를 위한 CSS 파일인데, 웹 브라우저마다 기본 스타일이 다르기 때문에, 모두 비슷하게 보이도록 만들어주는 역할을 해.

참고 😊

• 이 초기화 스타일은 필수는 아니지만 많은 개발자들이 레이아웃 작업 전에 사용하는 기본 템플릿이야.
• 프로젝트의 성격에 맞게 필요한 태그를 추가하거나, 불필요한 부분은 빼려무나.

.card__button--primary와 .card__button 중에서 누가 우선 적용되느냐(누가 "높냐")는 CSS의 "구체성"에 따라 달라져. 구체성이 높다 → 더 우선적으로 적용된다 (강한 스타일). 이름이 길다. 구체성이 낮다 → 덮어씌워질 가능성이 크다 (약한 스타일).

CSS 구체성의 기본 규칙

1. 인라인 스타일: <div style="..."> → 가장 우선 적용됨
2. 아이디 선택자: #id-name → 두 번째로 강함
3. 클래스, 속성 선택자: .class-name, [attr] → 세 번째
4. 요소 선택자: div, h1, button → 가장 낮음

.card__button과 .card__button--primary의 구체성 비교

1. .card__button:

   • 구체성 점수: 0, 0, 1 (클래스 선택자 1개)
   • 카드의 모든 버튼에 적용되는 기본 스타일.

2. .card__button--primary:

   • 구체성 점수: 0, 0, 1 (클래스 선택자 1개)
   • .card__button보다 더 세부적인 스타일(수정자)을 적용하기 위한 선택자.

둘 다 구체성 점수는 동일하지만, HTML에서 뒤에 선언된 스타일이 우선 적용돼.
즉, CSS에서 .card__button이 먼저 선언되고, .card__button--primary가 나중에 선언되었다면 .card__button--primary가 우선 적용돼.

코드 예시

HTML

<button class="card__button card__button--primary">버튼</button>

CSS

/* 기본 버튼 스타일 */
.card__button {
  background-color: gray;
  color: white;
}

/* 수정자 버튼 스타일 */
.card__button--primary {
  background-color: blue;
}

결과 😊

• .card__button은 기본적으로 회색 배경을 설정하지만,
• .card__button--primary는 파란색 배경으로 덮어써.

수정자 클래스(--primary)는 기본 클래스(.card__button) 위에 추가로 스타일을 덧씌우지롱.

정리

1. 구체성은 CSS 규칙의 우선순위를 결정하는 점수 체계로, 선택자가 더 구체적일수록 높은 우선순위를 가짐.
2. 구체성 점수 체계: 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 클래스 선택자 > 태그 선택자.
3. 동일한 구체성이라면, 나중에 선언된 스타일이 우선 적용됨.

BEM(BEM: Block, Element, Modifier)은 CSS를 체계적으로 쓰는 방법! 코드가 많아질수록 정리가 안 되고 헷갈리기 쉬운데, BEM은 그걸 깔끔하게 관리하도록 도와줌~

쉽게 말하면, 블록(Block), 요소(Element), 수정자(Modifier)라는 3가지 규칙으로 CSS 이름을 짓는 것!

1. Block(블록)

• 웹 페이지에서 독립적인 한 덩어리.
• 예 ➡️ 네비게이션 바, 버튼, 카드 같은 큰 덩어리!
• 이름 예시➡️ menu, card, button

2. Element(요소)

• 블록 안에 있는 작은 부분들.
• 예➡️ 버튼 안의 텍스트, 카드 안의 이미지 같은 것!
• 이름 예시➡️ menu__item, card__image (블록 이름__요소 이름)

3. Modifier(수정자)

• 블록이나 요소의 모양이나 상태를 바꿀 때 쓰는 거야.
• 예 ➡️ "초록색 버튼"이나 "활성화된 메뉴 항목" 같은 상태.
• 이름 예시➡️ button--primary, menu__item--active (이름--수정자)

참고

--(수정자)의 역할

--는 수정자(Modifier)를 나타내는 표시야. ➡️ "원래 있던 것에서 조금 다른 버전"이라고 생각하면 돼.

예시: 버튼

• 기본 버튼

  <button class="button">기본 버튼</button>

• 파란색 버튼

  <button class="button button--blue">파란 버튼</button>

• 작은 버튼

  <button class="button button--small">작은 버튼</button>

button--blue와 button--small처럼 --를 붙이면 기본 버튼의 변형(blue, small)을 만들 수 있어.

비유: 아이스크림 🍦

• 기본 아이스크림: ice-cream
• 초콜릿 맛: ice-cream--chocolate
• 딸기 맛: ice-cream--strawberry

이렇게 하면 "이건 기본 아이스크림인데, 초콜릿 맛이네!" 하고 쉽게 알아볼 수 있어.

/* Block: 기본 카드 스타일 */
.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
}

/* Modifier: 특수한 카드 스타일 */
.card--featured {
  background-color: #f0f8ff; /* 파란색 배경 */
  border-color: #007bff; /* 파란색 테두리 */
}

/* Element: 카드 제목 */
.card__title {
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Element: 버튼 스타일 */
.card__button {
  padding: 10px 15px;
  font-size: 1em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* Modifier: 버튼 색상 */
.card__button--primary {
  background-color: #007bff;
  color: white;
}

.card__button--secondary {
  background-color: #6c757d;
  color: white;
}

언제 쓰이나?

1. 큰 프로젝트에서 CSS 관리
   예를 들어, 쇼핑몰 사이트처럼 복잡한 페이지에서는 버튼, 카드, 네비게이션 등 요소가 많아. 이런 경우 이름이 중복되거나 어디에 쓰이는지 헷갈릴 수 있어.
   BEM은 규칙에 따라 이름을 정하기 때문에 클래스 이름이 중복되지 않고, 이해하기 쉽게 관리할 수 있어.

2. 팀 프로젝트에서 협업
   여러 명이 CSS를 작성하면, 누가 만든 코드인지 파악하기 어려울 수 있어.
   BEM을 쓰면 모두가 같은 규칙으로 이름을 정하니까 코드가 일관성 있게 유지돼.

3. 스타일 재사용
   BEM은 블록, 요소, 수정자로 나눠져 있어서 필요한 부분만 수정하거나 재사용하기 쉬워.

justify-content vs text-align

공통점

두 속성 모두 수평 방향 정렬에 사용

차이점

1. 적용 대상
   • Flexbox (display: flex): 모든 자식 요소(block 요소: div, section 등, inline 요소: span, a 등)를 정렬할 수 있음.
   • Text-align: 텍스트나 inline 요소(span, a 등)를 정렬할 때 주로 사용.

2. 정렬 방식
   • Flexbox (justify-content): 부모 요소 안에서 자식 요소들의 위치와 간격을 유연하게 제어.
     예) justify-content: center; (가운데), justify-content: flex-end; (오른쪽 끝)
   • Text-align: text나 inline 요소를 부모 요소 기준으로 정렬.
     예) text-align: center; (가운데), text-align: right; (오른쪽 끝)

3. 언제 사용?
   • Flexbox: 여러 자식 요소(div, button 등)를 동적으로 정렬하거나, 수평뿐 아니라 수직 정렬(Flexbox는 수평뿐만 아니라 수직 정렬도 가능. 이를 위해 align-items나 align-self를 사용함.)이 필요할 때.
   • Text-align: 단순히 텍스트(h1, p)나 inline 요소(a, span)를 정렬할 때.

예시

Flexbox

.parent {
  display: flex;
  justify-content: center; /* 자식 요소를 가운데 정렬 */
}

• 자식 요소: div, button 같은 block 요소 정렬 가능.

Text-align

.parent {
  text-align: center; /* 텍스트와 inline 요소를 가운데 정렬 */
}

• 자식 요소: span, a 같은 inline 요소와 텍스트 정렬에 적합.

결론

• Flexbox: 다양한 자식 요소를 동적이고 유연하게 정렬.
• Text-align: 텍스트 중심의 간단한 정렬.

HTML에서 parameter (name, value)는 태그에 정보를 추가하는 역할. 쉽게 말해, 태그가 "어떻게 동작해야 하는지" 알려줌. 태그의 형식: *<와 >**로 감싸여 있다.

기본 형식

name="value"

• name: 설정의 이름
• value: 설정의 값

예시

1. 링크

<a href="https://example.com">이동하기</a>

• href (name): 링크의 주소를 알려줌
• https://example.com (value): 이동할 URL

2. 이미지

<img src="image.jpg" alt="예쁜 그림">

• src (name): 이미지의 파일 경로
• image.jpg (value): 표시할 이미지 파일
• alt (name): 이미지가 안 보일 때 대신 나올 텍스트

3. 입력폼

<form action="/submit" method="GET">
    <input type="text" name="username" value="학생">
    <button type="submit">보내기</button>
</form>

• name (name): 서버로 보낼 데이터의 이름 (username)
• value (value): 기본 값 (학생)

요약

• name: 설정의 이름 (뭘 설정할지 알려줌)
• value: 설정의 값 (어떤 값을 사용할지 알려줌)
• 예: href="https://example.com"은 링크가 어디로 가야 하는지 알려주는 역할!

참고

HTML에서는 name="value" 형식을 사용하지만, parameter (name, value)로 표현한 이유는 프로그래밍 전반에서 "파라미터"를 설명할 때 흔히 사용하는 표현 방식 때문이다.

• JavaScript에서 함수는 1급 객체입니다.

• 1급 객체란, 다른 값처럼 자유롭게 다룰 수 있는 객체를 말합니다.

이게 무슨 뜻?

• 함수를 변수에 저장할 수 있습니다.
• 함수를 다른 함수의 인자로 전달할 수 있습니다.
• 함수를 다른 함수의 반환값으로 사용할 수 있습니다.

예시 코드

// 1. 함수는 변수에 저장 가능
const sayHello = function () {
  console.log("Hello!");
};
sayHello(); // 출력: Hello!

// 2. 함수는 다른 함수의 인자로 전달 가능
function callFunction(func) {
  func(); // 전달받은 함수 실행
}
callFunction(sayHello); // 출력: Hello!

// 3. 함수는 다른 함수의 반환값으로 사용 가능
function createGreeting() {
  return function () {
    console.log("Hi there!");
  };
}
const greeting = createGreeting();
greeting(); // 출력: Hi there!

2. Object의 개념

• 키-값 쌍으로 데이터를 저장하는 구조.

• 사람의 정보를 저장하려고 할 때, 이름, 나이, 직업 등을 묶어서 하나로 표현하는 것이 객체.

객체의 기본 구조

• 키(key): 데이터 이름.
• 값(value): 데이터 내용.

예시 코드

// 객체 생성
const person = {
  name: "Alice", // 키: name, 값: "Alice"
  age: 25,       // 키: age, 값: 25
  job: "Developer", // 키: job, 값: "Developer"
};

// 객체 사용
console.log(person.name); // 출력: Alice
console.log(person.age);  // 출력: 25

// 키-값 추가
person.country = "USA";
console.log(person.country); // 출력: USA

// 함수도 값이 될 수 있음
person.sayHello = function () {
  console.log("Hello, I'm " + this.name);
};
person.sayHello(); // 출력: Hello, I'm Alice

⭐요약

1. 1급 객체:

   • 함수도 숫자나 문자열처럼 값처럼 사용 가능.
   • 변수에 저장, 전달, 반환이 자유롭다.

2. Object(객체):

   • 키-값 쌍으로 데이터를 저장하는 구조.
   • 다양한 데이터를 묶어서 한 번에 관리할 수 있다!!

Rest Parameter는 함수에 전달되는 여러 개의 값을 하나의 배열로 모아주는 기능. 쉽게 말해, 함수가 얼마나 많은 값을 받을지 모를 때 유용.

설명

• 함수가 호출될 때 전달된 값(인자)을 배열로 처리할 수 있습니다.
• ... (점 세 개)를 사용합니다.

예시 코드

function sum(...numbers) {
  // numbers는 배열로 모든 인자를 받음
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100

한 줄 요약

함수에 여러 값을 넘겨주면 Rest Parameter가 배열로 묶어서 처리!!

**2. Arrow Function (화살표 함수)

Arrow Function은 간단하게 함수를 작성할 수 있는 방법.
일반적인 함수 선언보다 코드가 짧아지고 간결.

설명

• function 대신 => (화살표)를 사용하여 함수 작성.
• 코드가 짧아질 뿐 아니라, this 키워드가 다른 함수와 다르게 작동해서 더 직관적. 즉, 일반 함수(function)과 달리 this를 고정시킵니다.// 추가 공부 예정. 넘나 어려운 것. this는 함수가 작성된 위치의 주인을 사용합니다. (헷갈리지 않음!)

예시 코드

// 일반 함수 선언
const add = function (a, b) {
  return a + b;
};

// 화살표 함수로 동일한 기능 작성
const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(addArrow(2, 3)); // 5

추가 예시 (1줄 함수)

화살표 함수로 한 줄로 작성이 가능:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Alice")); // Hello, Alice!

요약

• Rest Parameter: 여러 값을 함수로 전달할 때 배열로 처리.
• Arrow Function: 함수를 짧고 간단하게 화살표(=>)로 작성.

참고

일반 함수에서의 this

예시 1: 객체 안에서 함수 호출

const obj = {
  name: "Alice",
  sayName: function () {
    console.log(this.name); // 'this'는 obj를 가리킴
  },
};

obj.sayName(); // 출력: Alice

여기서 this는 obj를 가리켜. 왜냐하면 sayName()을 obj가 호출했기 때문!

예시 2: 그냥 호출하면?

function sayName() {
  console.log(this.name); // 'this'는 전역 객체를 가리킴
}

sayName(); // 출력: undefined (브라우저에서는 window.name)

함수가 독립적으로 호출되면, this는 브라우저에서는 window를, Node.js에서는 전역 객체를 가리켜.

Arrow Function에서의 this

Arrow Function은 this를 "고정"시킴 일반 함수는 호출 방식에 따라 this가 바뀌지만, Arrow Function은 this가 작성된 위치의 주인을 사용해.

예시: 일반 함수와 Arrow Function의 차이

const obj = {
  name: "Alice",
  sayName: function () {
    const inner = () => {
      console.log(this.name); // Arrow Function은 obj를 그대로 사용
    };
    inner();
  },
};

obj.sayName(); // 출력: Alice

Arrow Function은 "이 함수가 어디에 작성되었는지"만 보고 this를 고정하기 때문에 obj를 가리킨다.