[15일차] 자바스크립트 기초 개념
1️⃣ 1강 – JS 기초 개념 & 출력문
JS의 두 가지 구성 요소
① 데이터 – 저장/처리할 대상
-
숫자: 1, 1.5
-
문장(String): "안녕", 'a', "잘가세요."
-
논리(Boolean): true, false
-
객체(Object): {이름: "홍길동", 나이: 22}
-
함수(Function): function() { ... }
② 제어 요소 – 흐름 제어
-
조건문 (if / else if / else)
-
반복문 (while, for)
2️⃣ JS가 CSS보다 우선순위가 높은 이유
-
JS → 실행 시점에 스타일 조작
-
CSS가 렌더링 전에 선언됐더라도, JS가 DOM 조작하면 JS가 우선적으로 스타일을 덮어씀
js
el.style.backgroundColor = "red";
이런 식으로 JS는 HTML/CSS 이후에도 최종값 결정권을 가짐을 보여줌.
빨간색>초록색>파란색 순으로 폰트 색상이 변경된다
중요도 순서: 인라인 > 내부 스타일 > 외부 스타일
■ 인라인 css : HTML 요소 내부의 style 속성에 직접 CSS를 작성한 방식
html
<div style="color: red;">인라인 스타일</div>■ 내부 스타일 : <style> 태그를 HTML <head>에 작성함.
HTML 문서 안에 있지만 코드와 스타일이 분리됨.
html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: blue;
}
</style>
</head>
<body>
<div class="box">내부 스타일</div>
</body>
</html>■ 외부 스타일
.css 파일을 따로 만들어 <link> 태그로 불러옴.
실무에서 가장 많이 씀. 유지보수 좋음.
html
<!-- HTML 파일 -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">외부 스타일</div>
</body>css
/* style.css 파일 */
.box {
color: green;
}■ 요약 테이블
| 구분 | 설명 |
|---|---|
| 데이터 요소 | 숫자, 문자열, 불리언, 객체, 함수 |
| 제어 요소 | 조건문(if/else), 반복문(for/while) |
| 출력문 | console.log()는 디버깅용 |
| 실행 흐름 | 선언 후 위→아래 순서대로 실행 |
| JS vs CSS 우선순위 | JS는 실행 시점에 스타일 덮어쓰기 가능 |
| 협업 방법 | JS는 클래스 토글만, CSS가 스타일 관리 |
\n = Enter 줄바꿈(New Line)을 의미함.
js
console.log("안녕\n잘가");
// 출력:
// 안녕
// 잘가
안녕하세요