HTML CSS 자바스크립트
HTML CSS 선택자 Flexbox 웹폰트 웹아이콘 javascript 백틱
aiyoon
2025. 5. 21. 15:22
반응형
🧠 웹 개발 학습 정리
✅ 기초 구성 요소
구분설명
| 구분 | 설명 |
| 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 |
반응형