Front-End Master 개발자 위키

HTML, CSS, JavaScript, ES6+, Sass, RWD 종합 레퍼런스

Source: 이듬(EUID) Front-End Master

1. HTML 기초

1.1 HTML 기본 구조

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8">
  <title>문서 제목</title>
</head>
<body>
  <!-- 콘텐츠 -->
</body>
</html>

영역	역할
head	메타데이터, 타이틀, 스타일시트 연결
body	실제 화면에 표시되는 콘텐츠

1.2 HTML 기본 문법

<태그이름 속성="값">콘텐츠</태그이름>

HTML 용어

용어	영문	설명
요소	Element	HTML의 기본 단위
여는 태그	Open tag	`<태그>`
닫는 태그	Close tag	`</태그>`
속성	Attribute	요소의 추가 정보
값	Value	속성에 할당되는 데이터

1.3 시멘틱 마크업

의미에 맞는 적절한 태그를 사용하여 문서의 구조를 명확하게 표현

시멘틱 태그 목록

태그	용도
`<header>`	머리글 영역
`<nav>`	내비게이션
`<main>`	주요 콘텐츠
`<article>`	독립적인 콘텐츠
`<section>`	구획
`<aside>`	사이드바
`<footer>`	바닥글 영역

1.4 HTML 리스트

비순차 목록 (Unordered List)

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

순차 목록 (Ordered List)

<ol>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ol>

정의 목록 (Definition List)

<dl>
  <dt>용어</dt>
  <dd>정의 설명</dd>
</dl>

규칙:

<ul>, <ol> 내부에는 <li>만 사용 가능
<li> 내부에는 모든 요소 포함 가능

1.5 주요 HTML 요소

텍스트 관련

태그	용도
`<h1>` ~ `<h6>`	제목 (1이 가장 큼)
`<p>`	문단
`<strong>`	강조 (굵게)
`<em>`	강조 (기울임)
`<br>`	줄바꿈
`<hr>`	수평선

링크와 이미지

<!-- 링크 -->
<a href="https://example.com" target="_blank">링크 텍스트</a>

<!-- 이미지 -->
<img src="image.jpg" alt="대체 텍스트">

<!-- 이미지 + 캡션 -->
<figure>
  <img src="image.jpg" alt="설명">
  <figcaption>이미지 캡션</figcaption>
</figure>

2. CSS 기초

2.1 CSS 기본 문법

선택자 {
  속성1: 값1;
  속성2: 값2;
}

2.2 CSS 적용 방법 3가지

1) 인라인 스타일 (Inline)

<p style="color: red;">텍스트</p>

2) 내부 스타일 (Internal)

<head>
  <style>
    p { color: red; }
  </style>
</head>

3) 외부 스타일 (External) ✅ 권장

<head>
  <link rel="stylesheet" href="styles.css">
</head>

2.3 CSS 선택자

기본 선택자

선택자	문법	예시
전체	`*`	`* { margin: 0; }`
태그	`태그명`	`p { color: red; }`
클래스	`.클래스명`	`.box { width: 100px; }`
아이디	`#아이디명`	`#header { height: 50px; }`

속성 선택자

/* href 속성을 가진 a 태그 */
a[href] { color: blue; }

/* type이 text인 input */
input[type="text"] { border: 1px solid; }

가상 클래스 선택자

선택자	상태
`:hover`	마우스 오버
`:active`	마우스 클릭 중
`:focus`	키보드 포커스
`:first-child`	첫 번째 자식
`:last-child`	마지막 자식
`:nth-child(n)`	n번째 자식

/* 접근성을 고려한 스타일 */
a:hover,
a:focus {
  border-bottom: 1px solid #000;
}

가상 요소 선택자

/* 요소 앞에 콘텐츠 추가 */
.item::before {
  content: "▶ ";
}

/* 요소 뒤에 콘텐츠 추가 */
.item::after {
  content: " ◀";
}

/* 첫 번째 줄 */
p::first-line { font-weight: bold; }

/* 첫 번째 글자 */
p::first-letter { font-size: 2em; }

2.4 CSS 상속과 캐스케이드

상속 (Inheritance)

부모 요소의 스타일이 자식에게 전달
color, font-family 등 텍스트 관련 속성은 상속됨
margin, padding, border 등은 상속되지 않음

캐스케이드 우선순위

1. !important (최우선)
2. 인라인 스타일
3. #id 선택자
4. .class 선택자
5. 태그 선택자
6. 상속된 스타일

3. JavaScript 기초

3.1 변수 선언과 할당

// 변수 선언
var name;

// 값 할당
name = "JavaScript";

// 선언과 할당 동시에
var course = "Front-End Master";

3.2 데이터 타입

원시 타입 (Primitive)

타입	예시	설명
String	`"Hello"`, `'World'`	문자열
Number	`42`, `3.14`	숫자
Boolean	`true`, `false`	논리값
undefined	`undefined`	미정의
null	`null`	빈 값
Symbol	`Symbol()`	고유 식별자 (ES6)

참조 타입 (Reference)

타입	예시
Object	`{ name: "Kim", age: 30 }`
Array	`[1, 2, 3, 4, 5]`
Function	`function() { }`

리터럴 (Literal)

소스 코드의 고정된 값을 대표하는 표현

var stringLiteral = '온라인 강의';  // 문자 리터럴
var numberLiteral = 42;            // 숫자 리터럴
var booleanLiteral = true;         // 불리언 리터럴
var arrayLiteral = [1, 2, 3];      // 배열 리터럴
var objectLiteral = { a: 1 };      // 객체 리터럴

3.3 연산자

산술 연산자

연산자	설명	예시
`+`	더하기	`5 + 3` → `8`
`-`	빼기	`5 - 3` → `2`
`*`	곱하기	`5 * 3` → `15`
`/`	나누기	`6 / 3` → `2`
`%`	나머지	`5 % 3` → `2`

비교 연산자

연산자	설명
`==`	동등 (타입 변환)
`===`	일치 (타입 포함) ✅ 권장
`!=`	부등
`!==`	불일치
`>`, `<`	크다, 작다
`>=`, `<=`	크거나 같다, 작거나 같다

논리 연산자

연산자	설명
`&&`	AND (그리고)
`\|\|`	OR (또는)
`!`	NOT (부정)

4. ES6+ 모던 자바스크립트

4.1 JavaScript vs ECMAScript

구분	설명
JavaScript	프로그래밍 언어 (브라우저에서 동작)
ECMAScript	JavaScript의 표준 사양 (ECMA-262)
TC39	ECMAScript 표준화 위원회

4.2 let과 const

var의 문제점

// var는 함수 스코프
if (true) {
  var x = 10;
}
console.log(x); // 10 (접근 가능 - 문제!)

let (블록 스코프 변수)

// let은 블록 스코프
if (true) {
  let y = 10;
}
console.log(y); // ReferenceError (접근 불가)

let 특징:

블록 {} 내에서만 유효
선언 전 접근 시 ReferenceError
재선언 불가, 재할당 가능

const (상수)

const PI = 3.14159;
PI = 3.14; // TypeError: 재할당 불가

// 단, 객체의 속성은 변경 가능
const user = { name: "Kim" };
user.name = "Lee"; // 가능
user = {};         // TypeError: 재할당 불가

const 특징:

읽기 전용 참조 생성
재선언, 재할당 불가
객체 내부 값은 변경 가능

권장 사용법

// 변경되는 값 → let
let count = 0;
count++;

// 변경되지 않는 값 → const
const API_URL = 'https://api.example.com';
const config = { debug: true };

4.3 템플릿 리터럴

const name = "Kim";
const age = 30;

// 기존 방식
var message = "이름: " + name + ", 나이: " + age;

// ES6 템플릿 리터럴
const message = `이름: ${name}, 나이: ${age}`;

// 여러 줄 문자열
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

4.4 화살표 함수

// 기존 함수
function add(a, b) {
  return a + b;
}

// 화살표 함수
const add = (a, b) => a + b;

// 매개변수가 하나일 때
const double = x => x * 2;

// 본문이 여러 줄일 때
const greet = name => {
  const message = `Hello, ${name}!`;
  return message;
};

4.5 구조 분해 할당

배열 구조 분해

const colors = ['red', 'green', 'blue'];

// 기존 방식
var first = colors[0];
var second = colors[1];

// 구조 분해
const [first, second, third] = colors;

객체 구조 분해

const user = { name: 'Kim', age: 30, city: 'Seoul' };

// 기존 방식
var name = user.name;
var age = user.age;

// 구조 분해
const { name, age, city } = user;

// 새 변수명 지정
const { name: userName, age: userAge } = user;

4.6 스프레드 연산자

// 배열 펼치기
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 객체 펼치기
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 함수 인자로 사용
const numbers = [1, 2, 3];
Math.max(...numbers); // 3

5. Sass 프리프로세서

5.1 Sass란?

CSS 전처리기(Preprocessor)로, CSS를 더 효율적으로 작성할 수 있게 해주는 도구

Sass vs SCSS

구분	특징
Sass	들여쓰기 기반, 중괄호/세미콜론 없음
SCSS	CSS와 유사한 문법, 중괄호/세미콜론 사용 ✅ 권장

5.2 주요 기능

변수 (Variables)

// 변수 정의
$primary-color: #3498db;
$font-size: 16px;
$spacing: 20px;

// 사용
.button {
  background-color: $primary-color;
  font-size: $font-size;
  padding: $spacing;
}

중첩 (Nesting)

.nav {
  background: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        
        &:hover {
          color: yellow;
        }
      }
    }
  }
}

믹스인 (Mixins)

// 정의
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button($bg-color) {
  background: $bg-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

// 사용
.container {
  @include flex-center;
}

.btn-primary {
  @include button(#3498db);
}

확장/상속 (Extend)

%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

.btn-primary {
  @extend %button-base;
  background: blue;
}

.btn-secondary {
  @extend %button-base;
  background: gray;
}

6. 반응형 웹 디자인 (RWD)

6.1 RWD란?

Responsive Web Design: 다양한 기기와 화면 크기에 적응하는 웹 설계 방식

6.2 핵심 요소

1) 유연한 그리드 (Fluid Grids)

.container {
  width: 100%;
  max-width: 1200px;
}

.column {
  width: 33.33%; /* 비율 기반 */
}

2) 유연한 이미지 (Fluid Images)

img {
  max-width: 100%;
  height: auto;
}

3) 미디어 쿼리 (Media Queries)

/* 모바일 (기본) */
.container {
  width: 100%;
}

/* 태블릿 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 데스크탑 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
  }
}

/* 대형 화면 */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

6.3 브레이크포인트

기기	브레이크포인트
모바일	< 768px
태블릿	768px ~ 1023px
데스크탑	1024px ~ 1199px
대형 화면	≥ 1200px

6.4 뷰포트 메타 태그

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

속성	설명
`width=device-width`	기기 너비에 맞춤
`initial-scale=1.0`	초기 확대 비율
`user-scalable=no`	사용자 확대/축소 비활성화

Quick Reference

HTML 필수 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>제목</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
  <script src="script.js"></script>
</body>
</html>

CSS 박스 모델

┌─────────────────────────────┐
│          margin             │
│  ┌──────────────────────┐   │
│  │       border         │   │
│  │  ┌───────────────┐   │   │
│  │  │    padding    │   │   │
│  │  │  ┌─────────┐  │   │   │
│  │  │  │ content │  │   │   │
│  │  │  └─────────┘  │   │   │
│  │  └───────────────┘   │   │
│  └──────────────────────┘   │
└─────────────────────────────┘

ES6 vs ES5 비교

기능	ES5	ES6+
변수	`var`	`let`, `const`
문자열	`'Hello ' + name`	`Hello ${name}`
함수	`function(x) { return x; }`	`x => x`
객체	`{ name: name }`	`{ name }`

Source: 이듬(EUID) Front-End Master

더 많은 인사이트가 필요하신가요?

📚 너드보드 기술블로그 더보기 →

🚀 너드보드 7일 무료체험 해보기 →

🔥 7일 한정 특가: ~~99,000원~~ → 29,000원

shane-shim/frontend_master_wiki.md

Front-End Master 개발자 위키

목차

1. HTML 기초

1.1 HTML 기본 구조

1.2 HTML 기본 문법

HTML 용어

1.3 시멘틱 마크업

시멘틱 태그 목록

1.4 HTML 리스트

비순차 목록 (Unordered List)

순차 목록 (Ordered List)

정의 목록 (Definition List)

1.5 주요 HTML 요소

텍스트 관련

링크와 이미지

2. CSS 기초

2.1 CSS 기본 문법

2.2 CSS 적용 방법 3가지

1) 인라인 스타일 (Inline)

2) 내부 스타일 (Internal)

3) 외부 스타일 (External) ✅ 권장

2.3 CSS 선택자

기본 선택자

속성 선택자

가상 클래스 선택자

가상 요소 선택자

2.4 CSS 상속과 캐스케이드

상속 (Inheritance)

캐스케이드 우선순위

3. JavaScript 기초

3.1 변수 선언과 할당

3.2 데이터 타입

원시 타입 (Primitive)

참조 타입 (Reference)

리터럴 (Literal)

3.3 연산자

산술 연산자

비교 연산자

논리 연산자

4. ES6+ 모던 자바스크립트

4.1 JavaScript vs ECMAScript

4.2 let과 const

var의 문제점

let (블록 스코프 변수)

const (상수)

권장 사용법

4.3 템플릿 리터럴

4.4 화살표 함수

4.5 구조 분해 할당

배열 구조 분해

객체 구조 분해

4.6 스프레드 연산자

5. Sass 프리프로세서

5.1 Sass란?

Sass vs SCSS

5.2 주요 기능

변수 (Variables)

중첩 (Nesting)

믹스인 (Mixins)

확장/상속 (Extend)

6. 반응형 웹 디자인 (RWD)

6.1 RWD란?

6.2 핵심 요소

1) 유연한 그리드 (Fluid Grids)

2) 유연한 이미지 (Fluid Images)

3) 미디어 쿼리 (Media Queries)

6.3 브레이크포인트

6.4 뷰포트 메타 태그

Quick Reference

HTML 필수 태그

CSS 박스 모델

ES6 vs ES5 비교

더 많은 인사이트가 필요하신가요?