TIL은 "Today I Learned"의 약자입니다. "오늘 내가 배운 것"이라는 뜻입니다. 새롭게 알게 된 흥미로운 사실, 정보, 또는 지식을 잊지 않기 위해 기록으로 남깁니다.
학습 날짜 : 2024년 8월 26일 (월)
0. 학습 목표
1. HTML과 CSS의 역할과 사용 방법을 이해한다.
1. HTML과 CSS 이해하기
HTML (Hypertext Markup Language): HTML은 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다.
- 주요 특징:
- 태그를 사용하여 문서의 구조를 나타냅니다. 예: <head>, <body>, <div>, <p>
- 대부분의 태그는 시작 태그와 종료 태그로 구성됩니다. 예: <p>내용</p>
- 웹 페이지의 뼈대를 형성합니다.
- 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p>문단 내용</p>
</body>
</html>
- head 안에 들어가는 대표적인 요소들: <meta>, <script>, <link>, <title> 등
- body 안에 들어가는 대표적인 요소들: <div>, <p>, <img> 등
CSS (Cascading Style Sheets): CSS는 HTML 문서의 스타일과 레이아웃을 정의하는 언어입니다.
- 주요 특징:
- 선택자를 사용하여 HTML 요소를 선택하고 스타일을 적용합니다.
- 속성과 값으로 스타일을 지정합니다.
- 웹 페이지의 디자인을 담당합니다.
- 기본 문법:
선택자 {
속성: 값;
}- 예시:
p {
color: blue;
font-size: 16px;
}
HTML과 CSS의 관계
- HTML은 웹 페이지의 구조와 내용을 정의하고, CSS는 그 구조에 스타일을 입힙니다.
- CSS는 HTML 문서 내에 <style> 태그로 포함되거나, 외부 파일로 링크될 수 있습니다.
잊지 말아야 할 개념
- HTML:
- 태그와 요소
- 태그: HTML 문서의 구조를 정의하는 마크업. 예: <p>, <div>, <h1>
- 요소: 시작 태그, 내용, 종료 태그를 모두 포함한 것. 예: <p>이것은 단락입니다.</p>
- 속성
- 태그에 추가 정보를 제공하는 것.
- 형식: <태그 속성="값">
- 예: <a href="https://www.example.com">링크</a>
- 시맨틱 마크업 (의미있는 구조화)
- 의미를 가진 태그를 사용하여 문서 구조화
- 예: <header>, <nav>, <main>, <article>, <aside>, <footer>
- 장점: 검색엔진 최적화, 접근성 향상
- 태그와 요소
- CSS:
- 선택자 (클래스, ID, 요소 등)
- 요소 선택자: p { color: blue; }
- 클래스 선택자: .highlight { background-color: yellow; }
- ID 선택자: #header { font-size: 24px; }
- 복합 선택자: div p { margin: 10px; }
- 박스 모델 (margin, padding, border)
- 모든 HTML 요소는 박스로 취급됨
- 구성:
* Content: 실제 내용
* Padding: 내용과 테두리 사이의 공간
* Border: 패딩 주변의 테두리
* Margin: 요소 외부의 공간
- 레이아웃
- display 속성:
* block: 새 줄에서 시작, 전체 너비 차지
* inline: 현재 줄에 표시, 내용만큼만 차지
* inline-block: inline처럼 배치되지만 block 속성 가짐
* flex: 유연한 박스 레이아웃 - position 속성:
* static: 기본값, 일반적인 문서 흐름
* relative: 일반 위치 기준으로 상대적 배치
* absolute: 가장 가까운 위치 지정된 조상 요소 기준 배치
* fixed: 뷰포트 기준으로 고정 위치
- display 속성:
- 선택자 (클래스, ID, 요소 등)
3. HTML과 CSS에서 부모-자식 구조:
1. 기본 개념:
- HTML 문서는 트리 구조로 되어 있습니다.
- 요소들은 서로 포함 관계를 가집니다.
- 포함하는 요소를 부모, 포함되는 요소를 자식이라고 합니다.
2. 예시:
<div class="wrap">
<p>이것은 <span>단락</span>입니다.</p>
</div>
- div는 p의 부모 요소입니다.
- p는 div의 자식 요소이면서 span의 부모 요소입니다.
- span은 p의 자식 요소입니다.
3. 중요성:
- 구조 이해: 문서의 구조를 명확히 파악할 수 있습니다.
- CSS 선택: 부모-자식 관계를 이용해 요소를 선택할 수 있습니다.
- JavaScript 조작: DOM 탐색 시 이 관계를 이용합니다.
4. CSS에서의 활용:
- 자식 선택자: div > p { color: blue; }
- 자손 선택자: div p { color: red; }
5. 상속:
- 일부 CSS 속성은 부모 요소에서 자식 요소로 상속됩니다.
- 예: font-family, color 등
6. 주의사항:
- 부모 요소의 스타일 변경은 자식 요소에 영향을 줄 수 있습니다.
- 예: 부모의 width 변경은 자식 요소의 가용 공간을 변경합니다.
예시를 보면:
<div class="wrap">
<div>
<h3>1번 h3</h3>
<div id="div-1">
<h3 id="my-h3" class="italic-text">2번 h3</h4>
<h5>1번 h5</h5>
<h5 class="italic-text green-text">2번 h5</h5>
</div>
<div class="small-div">
<h3 class="green-text">3번 h3</h3>
<h3>4번 h3</h3>
<h5>3번 h5</h5>
</div>
<h5>4번 h5</h5>
</div>
</div>
이 구조에서:
- 'wrap' 클래스를 가진 div가 최상위 부모입니다.
- 그 안의 div들은 자식이면서 동시에 그 안의 요소들의 부모입니다.
- h3, h5 등은 각각의 부모 div의 자식입니다.
이런 구조를 이해하면 CSS 선택자를 효과적으로 사용할 수 있고, JavaScript로 DOM을 조작할 때도 도움이 됩니다. 또한 전체 문서의 구조를 논리적으로 파악할 수 있게 해줍니다.
4. 💡 VS Code 꿀팁!
- HTML 기본 구조는 외울 필요가 없습니다. VS Code에서 HTML 파일을 만들고 html5 를 입력하면 기본 구조가 자동으로 입력됩니다.
- HTML 상에서 줄바꿈과 연속적인 띄어쓰기는 아무런 의미를 갖지 않습니다. 하지만 코드의 정렬이 제대로 되어있지 않으면, 개발자의 입장에서 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. → 코드 정렬 단축키 (Mac) Shift + Option + F
'TIL' 카테고리의 다른 글
| [TIL] 자료 구조와 배열 (Python) 1편 - 기본 개념 (0) | 2024.09.08 |
|---|---|
| [TIL] 파이썬에서 입력 - input()은 string 이다 (0) | 2024.09.06 |
| [TIL] 좋아요 버튼 누르면 버튼 컬러가 변경되는 기능 구현하기 (1) | 2024.08.31 |
| [TIL] 자바스크립트(JavaScript) 기초 개념 - 변수, 블록 스코프, 함수 스코프, 호이스팅, 일시적 사각지대 (1) | 2024.08.27 |
| [TIL] 웹 기초 : 클라이언트와 서버에 대하여 (0) | 2024.08.26 |