BD 22일차
자바스크립트 기초 학습 정리 및 HTML, CSS 개요
자바스크립트 기초 복습
앞서 자바스크립트의 기초적인 개념들을 학습했습니다. 배운 내용은 다음과 같습니다:
- 변수와 상수: 데이터를 저장하고 관리하는 방법
- 삼항 연산자: 간단한 조건문 처리
- If문: 조건에 따라 코드 실행
- 반복문 (For문): 특정 조건에 따라 반복 실행
- 배열: 여러 데이터를 하나의 변수에 저장
이러한 개념들은 자바스크립트뿐만 아니라 PHP, 파이썬 등 다양한 프로그래밍 언어에서도 공통적으로 사용됩니다. 😊
HTML 개요 및 기본 구조
이제 본격적으로 HTML을 학습해보겠습니다. HTML은 웹사이트의 화면을 구성하는 마크업 언어입니다.
HTML 문서 작성 방법
- 새 파일을 생성합니다.
Ctrl + S를 눌러 .html 확장자로 저장합니다. 예:test.html
HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 개발 강의</title>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>중요한 요소
DOCTYPE선언: HTML5 사용을 선언합니다.html태그: 문서의 시작과 끝을 나타냅니다.head태그: 메타데이터(설명, 키워드 등)를 포함합니다.body태그: 실제 화면에 표시될 내용을 포함합니다.
메타 태그 활용하기
웹사이트의 정보를 설정할 때 메타 태그를 사용합니다.
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, 개발, 부트캠프">
<meta name="description" content="웹 개발 학습 사이트">💡 키워드와 설명을 잘 작성하면 SEO(검색엔진 최적화)에 도움이 됩니다.
HTML 태그 실습
다양한 HTML 태그를 활용해 화면을 구성해 봅시다.
제목 태그
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>💡 숫자가 클수록 글자 크기가 작아집니다.
목록 태그
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
<ol>
<li>항목 1</li>
<li>항목 2</li>
</ol>링크 태그
<a href="https://www.google.com">구글로 이동</a>이미지 삽입
<img src="https://example.com/image.jpg" alt="예제 이미지">CSS 개요 및 적용 방법
CSS는 HTML 요소의 스타일을 지정하는 언어입니다.
CSS 적용 방법
-
인라인 스타일: 태그 내부에 직접 작성
<p style="color: red;">빨간 글자</p> -
내부 스타일:
<style>태그 내에 작성<style> p { color: blue; } </style> -
외부 스타일 시트: CSS 파일을 연결
<link rel="stylesheet" href="style.css">
주요 CSS 속성
- 색상 변경
color: red; background-color: yellow; - 글자 크기 조정
font-size: 20px; - 정렬
text-align: center; - 여백 및 패딩
margin: 20px; padding: 10px;
CSS 선택자
-
태그 선택자: 특정 태그 전체에 적용
p { color: green; } -
클래스 선택자: 여러 요소에 적용 가능
.highlight { color: yellow; } -
아이디 선택자: 특정 요소에만 적용
#header { font-size: 24px; }
박스 모델
CSS의 핵심 개념 중 하나는 박스 모델입니다. 요소는 내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다.
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}💡 패딩은 내부 여백, 마진은 외부 여백입니다.
마무리
이번 포스팅에서는 HTML과 CSS의 기초 개념을 다루었습니다. 앞으로 배울 내용:
- HTML 태그 심화 학습
- CSS 레이아웃 기법 (Flexbox, Grid)
- 반응형 웹 디자인
앞으로도 꾸준히 연습하면서 개념을 확실히 다져보세요! 😊
