반응형
🧠 웹 개발 학습 정리
✅ 기초 구성 요소
구분설명
| 구분 | 설명 |
| HTML | 웹 구조 담당. <div>, <span> 등 의미 없는 박스를 만드는 태그도 있음 |
| CSS | 디자인을 담당. 선택자 이해가 중요 |
| JavaScript (JS) | 동적인 기능 담당. 변수 let, 상수 const 중심 |
| React | 사용자 정의 태그(컴포넌트)로 UI를 구성. 직접 태그(컴포넌트)를 만들어 사용 |
| Node.js | 백엔드 프레임워크로 사용 가능 |
🎨 CSS 주요 개념
1. 선택자(Syntax)
css
선택자 { 속성: 값; }
선택자 종류예시
| 태그 선택자 | div, p, a 등 |
| 아이디 선택자 | #menu |
| 클래스 선택자 | .box |
| 부모 > 자식 | div > p |
| 조상 자손 | div p |
➡ 참고: CSS Selector Cheatsheet
2. 초기화
css
* {
margin: 0;
padding: 0;
}3. Flexbox 기본 정렬
css
main {
display: flex;
flex-direction: column; /* 세로 방향 */
justify-content: center; /* 세로 정렬 */
align-items: center; /* 가로 정렬 */ }🌐 웹폰트 & 아이콘 사용
📌 웹폰트
- 구글 폰트: https://fonts.google.com/
- 선택 후 Embed 복사해서 <head>에 추가
⭐ Font Awesome (아이콘 폰트)
- 접속: https://cdnjs.com/libraries/font-awesome
- 최신 버전 CDN 복사해서 <head> 삽입
- 아이콘 검색: https://fontawesome.com/search
⚙️ JavaScript 핵심
함수
js
function Hello() {
alert("안녕하세요!");
}
// 화살표 함수
const Hello = () => {
alert("안녕하세요!");
}비교 연산자
연산자의미
| = | 대입 |
| == | 값만 비교 |
| === | 값과 타입까지 비교 (자바스크립트 전용) |
문자열 백틱 (템플릿 리터럴)
js
const name = "yung";
console.log(`${name} 님. 안녕하세요!`);중요 개념
- 배열과 객체 다루기
- 바닐라 JS = 순수 JavaScript
- ES6 지원 브라우저 참고: W3Schools ES6
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
💻 기타 도구 및 단축키
기능단축키
| 코드 정렬 (VSCode) | Shift + Alt + F |
반응형
'HTML CSS 자바스크립트' 카테고리의 다른 글
| 자바스크립트 객체와 DOM 이벤트로 구현한 온도 단위 변환기 (0) | 2025.05.22 |
|---|---|
| 자바스크립트 ES6로 배우는 배열과 함수 문법 (0) | 2025.05.21 |
| 배열과 반복문 JS 회문 검사 배열 변형 (0) | 2025.05.21 |
| VSCode Git HTM CSS JS GitHub git (0) | 2025.05.21 |
