Frontend
- Frontend: UI/UX를 구현하는 작업
- HTML(웹페이지 구조 정의) / CSS(웹페이지 스타일 정의) / JavaScript(웹페이지에 동적 기능 추가)
(개발 역량)
- DOM 조작 및 이벤트 처리 / 반응형 웹 디자인(RWD) / 웹 성능 최적화(Lazy Loading, Code Splitting)
- REST API 및 GraphQL 통신 / 상태관리(Redux, Recoil, Vuex, Zustand) / 웹보안(XSS, CSRF)
(개발 환경)
- 패키지 관리자(npm, yarn)
- 번들러 및 빌드 도구(Webpack, Vite)
- 스타일링(Tailwind CSS, Styled Components, Sass)
- 테스트(Jest, Cypress, React Testing Library)
(최신 트렌드)
- 웹 접근성(A11Y) 강화
- 서버리스(SPA + BaaS) 및 Edge Computing 활용
- WebAssembly
HTML
- 웹 페이지의구조와 콘텐츠를 정의하는 마크업 언어
- 구조: <!DOCTYPE html>, <html>, <head>, <body>
- 시멘틱태그(SEO): <header>, <nav>, <main>, <aside>, <section>, <article>, <footer>
- 텍스트: <h1>-<h6>, <p>, <span>, <div>, <a href>
- 리스트: <ul>, <ol>, <li>
- 테이블: <table>, <th>, <td>, <tr>
- 미디어: <img src alt>, <audio controls controlsList>, <video controls controlsList>, <source>
- 폼: <form method action>, <input type name placeholder id>, <button>, <label for>, <fieldset>, <legend>, <select>, <option value>, <textarea>, <datalist>, <option>
CSS
- 적용: 인라인(style="color: red;"), <style>, <link rel="stylesheet" href>
- 선택자: *, tag, .class, #id, [attr="val"]
- 가상 클래스/요소: :hover, :nth-child(n), ::before, ::after
- 박스모델: content, paddind, border, margin, box-sizing(border-box)
- 레이아웃: display(block, inline, inline-block, flex, grid, none), position(static, relative, absolute, fixed, sticky)
- 반응형 디자인: @media (max-width: 768px)
- 변수: :root { --main-color: #3498db; } var(--main-color)
- 투명도: opacity(0-1)
- 넘치는 내용: overflow(hidden, scroll, auto)
- 요소 순서: z-index
- 애니메이션 효과: transition, animation
'ETC > 웹개발 요약' 카테고리의 다른 글
| [웹개발] JavaScript 주요 메서드 2 (0) | 2025.04.03 |
|---|---|
| [웹개발] JavaScript 주요 메서드 1 (0) | 2025.04.03 |
| [웹개발] JavaScript 요약 (0) | 2025.04.03 |
| [웹개발] CSS (0) | 2025.04.02 |