withai

2025년 1월 17일 학습 기록

오늘의 학습 주제

HTML5 기초
CSS 기초
웹 개발의 3가지 핵심 요소 (HTML, CSS, JavaScript)

1. HTML5 기초

기본 개념

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다
HTML5는 HTML의 최신 버전으로, 새로운 시맨틱 요소들과 멀티미디어 지원이 강화되었습니다
웹 표준을 준수하며 크로스 브라우징을 지원합니다

핵심 내용

HTML 문서의 기본 구조 ```html <!DOCTYPE html>

문서 제목

2. 시맨틱 태그
- `<header>`: 문서나 섹션의 헤더
- `<nav>`: 네비게이션 링크
- `<main>`: 문서의 주요 콘텐츠
- `<article>`: 독립적인 콘텐츠
- `<section>`: 관련된 콘텐츠의 섹션
- `<aside>`: 부가 콘텐츠
- `<footer>`: 문서나 섹션의 푸터

3. 텍스트 관련 태그
- `<h1>` ~ `<h6>`: 제목
- `<p>`: 문단
- `<strong>`: 강조
- `<em>`: 이탤릭 강조
- `<br>`: 줄바꿈

4. 링크와 미디어
- `<a href="url">`: 하이퍼링크
- `<img src="image.jpg" alt="설명">`: 이미지
- `<video>`: 비디오
- `<audio>`: 오디오

## 2. CSS 기초

### 기본 개념
- CSS(Cascading Style Sheets)는 HTML 요소들의 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다
- HTML이 웹페이지의 뼈대라면, CSS는 디자인을 담당합니다
- CSS는 선택자(Selector)를 통해 HTML 요소를 선택하고, 속성(Property)을 통해 스타일을 적용합니다

### CSS 적용 방법
1. 인라인 스타일
```html
<div style="color: blue; font-size: 16px;">텍스트</div>

내부 스타일 시트 ```html

3. 외부 스타일 시트 (권장)
```html
<head>
  <link rel="stylesheet" href="styles.css">
</head>

기본 선택자

/* 태그 선택자 */
div { color: blue; }

/* 클래스 선택자 */
.my-class { font-size: 16px; }

/* ID 선택자 */
#my-id { background-color: gray; }

/* 복합 선택자 */
div.my-class { margin: 10px; }

주요 스타일 속성

.example {
  /* 크기 관련 */
  width: 100px;
  height: 100px;
  
  /* 여백 관련 */
  margin: 10px;  /* 외부 여백 */
  padding: 10px; /* 내부 여백 */
  
  /* 색상 관련 */
  color: #333333;           /* 텍스트 색상 */
  background-color: white;  /* 배경 색상 */
  
  /* 폰트 관련 */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  
  /* 레이아웃 관련 */
  display: flex;          /* 플렉스박스 레이아웃 */
  position: relative;     /* 위치 지정 */
  border: 1px solid #000; /* 테두리 */
}

3. 웹 개발의 3가지 핵심 요소

1. HTML (구조)

정의: HyperText Markup Language
역할: 웹 페이지의 구조와 콘텐츠를 정의
주요 기능:
- 웹 페이지의 뼈대 구성
- 콘텐츠의 의미론적 구조화
- 문서의 기본 레이아웃 설정

2. CSS (디자인)

정의: Cascading Style Sheets
역할: 웹 페이지의 시각적 표현과 레이아웃 담당
주요 기능:
- 색상, 폰트, 여백 등 스타일링
- 반응형 레이아웃 구성
- 애니메이션과 전환 효과

3. JavaScript (동작)

정의: 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어
역할: 사용자 상호작용과 동적 콘텐츠 처리
주요 기능:
- 사용자 입력 처리
- DOM 조작
- API 통신
- 동적 콘텐츠 업데이트

세 요소의 상호작용 예시

<!-- HTML: 기본 구조 -->
<!DOCTYPE html>
<html>
<head>
  <!-- CSS 연결 -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app">
    <button class="btn">클릭</button>
  </div>
  <!-- JavaScript 연결 -->
  <script src="app.js"></script>
</body>
</html>

/* CSS: 디자인 */
.btn {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: darkblue;
}

// JavaScript: 동작
document.querySelector('.btn').addEventListener('click', () => {
  // 버튼 클릭시 스타일 변경
  this.style.backgroundColor = 'green';
  // 새로운 콘텐츠 추가
  const newElement = document.createElement('p');
  newElement.textContent = '새로운 단락이 추가되었습니다!';
  document.getElementById('app').appendChild(newElement);
});

오늘의 질문과 답변

Q1: HTML과 CSS, JavaScript의 각각의 역할은 무엇인가요?

A1:

HTML: 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 웹 페이지의 뼈대를 구성합니다.
CSS: 웹 페이지의 시각적 표현을 담당하는 스타일 시트 언어입니다. 색상, 레이아웃, 폰트 등을 정의합니다.
JavaScript: 웹 페이지에 동적 기능을 추가하는 프로그래밍 언어입니다. 사용자 상호작용과 데이터 처리를 담당합니다.

Q2: HTML은 구조를 정의하고 디자인과 레이아웃은 CSS에서 한다고 했는데, 어떤 방식으로 하나요?

A2:

HTML에서는 콘텐츠의 구조만 정의합니다: ```html

제목

내용

2. CSS에서 해당 요소들의 스타일을 정의합니다:
```css
.container {
  width: 800px;
  margin: 0 auto;
}

h1 {
  color: blue;
  font-size: 24px;
}

p {
  line-height: 1.6;
  color: #333;
}

개발 모범 사례

관심사 분리 (Separation of Concerns)
- HTML, CSS, JavaScript를 별도의 파일로 관리
- 각 언어의 역할을 명확히 구분
점진적 향상 (Progressive Enhancement)
- 기본 기능은 HTML로 구현
- CSS로 디자인 개선
- JavaScript로 추가 기능 구현
유지보수성
- 모듈화된 코드 구조
- 명확한 네이밍 규칙
- 주석과 문서화