웹 개발 치트 시트

PDF 다운로드

실습 랩을 통해 웹 개발 배우기

실습 랩과 실제 시나리오를 통해 웹 개발을 배우십시오. LabEx 는 필수적인 HTML, CSS, JavaScript, DOM 조작 및 반응형 디자인을 다루는 포괄적인 웹 개발 과정을 제공합니다. 최신 웹 개발 워크플로우를 위해 대화형 및 반응형 웹사이트 구축을 마스터하십시오.

HTML 기본 및 문서 구조

기본 HTML 구조: <!DOCTYPE html>

모든 웹 페이지의 기반을 만듭니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="script.js"></script>
  </body>
</html>

더 나은 구조를 위해 의미 있는 HTML5 시맨틱 요소를 사용합니다.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h1>Welcome</h1>
    <p>Main content here</p>
  </section>
</main>
<footer>
  <p>© 2024 My Website</p>
</footer>
퀴즈

로그인하여 이 퀴즈에 답하고 학습 진행 상황을 추적하세요

header, main, footer 와 같은 시맨틱 HTML 요소를 사용하는 주요 이점은 무엇입니까?
페이지 로딩 속도를 높여줍니다
구조에 의미를 부여하여 접근성과 SEO 를 개선합니다
페이지를 자동으로 스타일링합니다
JavaScript 가 작동하는 데 필수적입니다

텍스트 요소: <h1> 부터 <h6> / <p>

적절한 제목 계층 구조와 단락으로 콘텐츠를 구성합니다.

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<p>
  This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.
</p>
<p>Another paragraph with a <a href="https://example.com">link</a>.</p>

목록: <ul> / <ol> / <li>

정보를 체계적으로 정리된 목록으로 만듭니다.

<!-- Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

이미지 및 미디어: <img> / <video> / <audio>

적절한 속성을 사용하여 멀티미디어 콘텐츠를 삽입합니다.

<!-- Image with alt text -->
<img src="image.jpg" alt="Description of image" width="300" />

<!-- Video element -->
<video controls width="400">
  <source src="video.mp4" type="video/mp4" />
  Your browser doesn't support video.
</video>

<!-- Audio element -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

표: <table> / <tr> / <td>

적절한 구조로 표 형식 데이터를 표시합니다.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

폼 및 사용자 입력

폼 구조: <form>

사용자 입력 및 컨트롤을 위한 컨테이너를 만듭니다.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <button type="submit">Submit</button>
</form>

입력 유형: type="text" / type="email"

다양한 데이터에 대해 적절한 입력 유형을 사용합니다.

<input type="text" placeholder="Enter your name" />
<input type="email" placeholder="email@example.com" />
<input type="password" placeholder="Password" />
<input type="number" min="1" max="100" />
<input type="date" />
<input type="checkbox" id="agree" />
<input type="radio" name="gender" value="male" />
<input type="file" accept=".jpg,.png" />

폼 컨트롤: <select> / <textarea>

사용자가 정보를 입력할 수 있는 다양한 방법을 제공합니다.

<select name="country" id="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<textarea
  name="message"
  rows="4"
  cols="50"
  placeholder="Enter your message"
></textarea>

CSS 기본 및 스타일링

CSS 선택자: element / .class / #id

다양한 선택자 유형으로 HTML 요소를 타겟팅하여 스타일을 지정합니다.

/* Element selector */
h1 {
  color: blue;
  font-size: 2rem;
}

/* Class selector */
.highlight {
  background-color: yellow;
  padding: 10px;
}

/* ID selector */
#header {
  background-color: navy;
  color: white;
}

/* Descendant selector */
.container p {
  line-height: 1.6;
}

박스 모델: margin / padding / border

CSS 박스 모델을 사용하여 간격과 레이아웃을 제어합니다.

.box {
  width: 300px;
  height: 200px;
  margin: 20px; /* Outside spacing */
  padding: 15px; /* Inside spacing */
  border: 2px solid black; /* Border properties */
}

/* Shorthand properties */
.element {
  margin: 10px 20px; /* top/bottom left/right */
  padding: 10px 15px 20px 25px; /* top right bottom left */
  border-radius: 5px; /* Rounded corners */
}
퀴즈

로그인하여 이 퀴즈에 답하고 학습 진행 상황을 추적하세요

CSS 에서 margin 과 padding 의 차이점은 무엇입니까?
차이점이 없습니다
Margin 은 요소 외부의 공간이고, padding 은 요소 내부의 공간입니다
Margin 은 수평 간격에 사용되고, padding 은 수직 간격에 사용됩니다
Margin 은 테두리에 사용되고, padding 은 콘텐츠에 사용됩니다

Flexbox: display: flex

유연하고 반응성이 뛰어난 레이아웃을 쉽게 만듭니다.

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  gap: 20px; /* Space between items */
}

.flex-item {
  flex: 1; /* Equal width items */
}

/* Flexbox direction */
.column-layout {
  display: flex;
  flex-direction: column;
}
퀴즈

로그인하여 이 퀴즈에 답하고 학습 진행 상황을 추적하세요

Flexbox 에서 justify-content: center는 어떤 역할을 합니까?
주축 (기본적으로 수평) 을 따라 플렉스 항목을 중앙에 배치합니다
항목을 수직으로 중앙에 배치합니다
항목을 균등하게 분배합니다
항목을 늘려 공간을 채웁니다

Grid 레이아웃: display: grid

복잡한 2 차원 레이아웃을 만듭니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-gap: 20px;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}

JavaScript 기본 및 프로그래밍 기초

변수: let / const / var

다양한 변수 선언으로 데이터를 저장하고 조작합니다.

// Modern variable declarations
let name = 'John' // Can be reassigned
const age = 25 // Cannot be reassigned
const colors = ['red', 'blue'] // Array (contents can change)

// Variable types
let message = 'Hello World' // String
let count = 42 // Number
let isActive = true // Boolean
let data = null // Null
let user = {
  // Object
  name: 'Alice',
  email: 'alice@example.com',
}

함수: function / 화살표 함수

다양한 함수 구문으로 재사용 가능한 코드 블록을 만듭니다.

// Function declaration
function greet(name) {
  return `Hello, ${name}!`
}

// Arrow function
const add = (a, b) => a + b

// Arrow function with block
const calculateArea = (width, height) => {
  const area = width * height
  return area
}

// Function with default parameters
function createUser(name, age = 18) {
  return { name, age }
}

조건부 논리: if / else / switch

조건문으로 프로그램 흐름을 제어합니다.

// If/else statement
if (age >= 18) {
  console.log('Adult')
} else if (age >= 13) {
  console.log('Teenager')
} else {
  console.log('Child')
}

// Ternary operator
const status = age >= 18 ? 'adult' : 'minor'

// Switch statement
switch (day) {
  case 'Monday':
    console.log('Start of work week')
    break
  case 'Friday':
    console.log('TGIF!')
    break
  default:
    console.log('Regular day')
}

루프: for / while / 배열 메서드

데이터를 반복하고 작업을 반복합니다.

// For loop
for (let i = 0; i < 5; i++) {
  console.log(i)
}

// For...of loop
for (const item of items) {
  console.log(item)
}

// Array methods
const numbers = [1, 2, 3, 4, 5]
numbers.forEach((num) => console.log(num))
const doubled = numbers.map((num) => num * 2)
const evens = numbers.filter((num) => num % 2 === 0)
const sum = numbers.reduce((total, num) => total + num, 0)

DOM 조작 및 이벤트

요소 선택: querySelector / getElementById

JavaScript 에서 HTML 요소를 찾아 접근합니다.

// Select single elements
const title = document.getElementById('title')
const button = document.querySelector('.btn')
const firstParagraph = document.querySelector('p')

// Select multiple elements
const allButtons = document.querySelectorAll('.btn')
const allParagraphs = document.getElementsByTagName('p')

// Check if element exists
if (button) {
  button.style.color = 'blue'
}

콘텐츠 수정: innerHTML / textContent

HTML 요소의 콘텐츠와 속성을 변경합니다.

// Change text content
title.textContent = 'New Title'
title.innerHTML = '<strong>Bold Title</strong>'

// Modify attributes
button.setAttribute('disabled', 'true')
const src = image.getAttribute('src')

// Add/remove classes
button.classList.add('active')
button.classList.remove('hidden')
button.classList.toggle('highlighted')

이벤트 처리: addEventListener

사용자 상호 작용 및 브라우저 이벤트에 응답합니다.

// Click event
button.addEventListener('click', function () {
  alert('Button clicked!')
})

// Form submit event
form.addEventListener('submit', function (e) {
  e.preventDefault() // Prevent form submission
  const formData = new FormData(form)
  console.log(formData.get('username'))
})

// Keyboard events
document.addEventListener('keydown', function (e) {
  if (e.key === 'Enter') {
    console.log('Enter key pressed')
  }
})

요소 생성: createElement / appendChild

새로운 HTML 요소를 동적으로 생성하고 추가합니다.

// Create new element
const newDiv = document.createElement('div')
newDiv.textContent = 'New content'
newDiv.className = 'highlight'
// Add to page
document.body.appendChild(newDiv)

// Create list item
const li = document.createElement('li')
li.innerHTML = "<a href='#'>New Link</a>"
document.querySelector('ul').appendChild(li)

// Remove element
const oldElement = document.querySelector('.remove-me')
oldElement.remove()

반응형 디자인 및 CSS 미디어 쿼리

뷰포트 메타 태그: viewport

반응형 디자인을 위해 적절한 뷰포트를 설정합니다.

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

/* CSS for responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

미디어 쿼리: @media

화면 크기 및 장치 기능에 따라 다른 스타일을 적용합니다.

/* Mobile first approach */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 20px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }
}

유연한 단위: rem / em / % / vw / vh

확장 가능하고 반응성이 뛰어난 디자인을 위해 상대 단위를 사용합니다.

/* Relative to root font-size */
h1 {
  font-size: 2rem;
} /* 32px if root is 16px */

/* Relative to parent font-size */
p {
  font-size: 1.2em;
} /* 1.2 times parent size */

/* Percentage based */
.sidebar {
  width: 30%;
} /* 30% of parent width */

/* Viewport units */
.hero {
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
}

반응형 타이포그래피: clamp()

화면 크기에 따라 크기가 조정되는 유동적인 타이포그래피를 만듭니다.

/* Fluid typography */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Min: 1.5rem, Preferred: 4vw, Max: 3rem */
}

/* Responsive spacing */
.section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 3rem);
}

/* Container queries (newer browsers) */
@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

디버깅 및 브라우저 개발자 도구

콘솔 메서드: console.log() / console.error()

콘솔 출력을 사용하여 코드를 디버깅하고 모니터링합니다.

// Basic logging
console.log('Hello, world!')
console.log('User data:', userData)

// Different log levels
console.info('Information message')
console.warn('Warning message')
console.error('Error message')

// Grouping logs
console.group('User Details')
console.log('Name:', user.name)
console.log('Email:', user.email)
console.groupEnd()

디버깅 기술: debugger / 중단점

코드 실행을 일시 중지하여 변수 및 프로그램 상태를 검사합니다.

function calculateTotal(items) {
  let total = 0
  debugger // Code will pause here when dev tools open

  for (let item of items) {
    total += item.price
    console.log('Current total:', total)
  }
  return total
}

// Error handling
try {
  const result = riskyFunction()
} catch (error) {
  console.error('Error occurred:', error.message)
}

브라우저 DevTools: Elements / Console / Network

브라우저 도구를 사용하여 HTML 을 검사하고, JavaScript 를 디버깅하며, 네트워크 요청을 모니터링합니다.

// Inspect elements in console
$0 // Currently selected element in Elements tab
$1 // Previously selected element

// Query elements from console
$('selector') // Same as document.querySelector
$$('selector') // Same as document.querySelectorAll

// Monitor functions
monitor(functionName) // Log when function is called

// Performance timing
console.time('operation')
// ... some code ...
console.timeEnd('operation')

// Common errors and solutions
// ReferenceError: Variable not defined
// console.log(undefinedVariable); //

오류 유형: TypeError / ReferenceError

일반적인 JavaScript 오류를 이해하고 수정하는 방법.

관련 링크

이전 페이지Matplotlib다음 페이지HTML