WEB-FE-01 · 브라우저와 화면의 구조
브라우저는 웹 파일을 읽어 화면을 만들고 사용자 입력을 받습니다. 대시보드에서는 HTML이 연도 선택 메뉴와 표를 놓고, CSS가 카드와 표를 보기 좋게 배치하며, JavaScript가 연도 선택에 맞춰 숫자를 바꿉니다. 역할을 구분하면 문제를 찾기 쉽습니다.
HTML·CSS·JavaScript가 맡는 일
| 구분 | 담당하는 일 | 이 실습의 예 |
|---|---|---|
| HTML | 제목·문단·버튼·표·입력처럼 화면의 내용과 의미를 구성 | index.html의 KPI 제목과 분개 표 |
| CSS | 색·간격·배치·크기와 화면 폭에 따른 표현을 지정 | KPI 카드 색과 좁은 화면의 표 배치 |
| JavaScript | 클릭·입력에 따라 데이터와 화면을 변경 | 연도 변경 시 KPI·차트 재계산 |
더 큰 앱에서 React를 쓰더라도 세 역할은 같습니다. React는 화면 요소와 상태 변경을 정리하는 방법입니다. 지금 만드는 단일 HTML 대시보드를 이해하는 데 React를 먼저 배울 필요는 없습니다.
<button id="save-button">저장</button>
<p id="message" aria-live="polite"></p>#save-button {
background: navy;
color: white;
}document.querySelector("#save-button").addEventListener("click", () => {
document.querySelector("#message").textContent = "저장 요청을 시작했습니다."
})버튼이 보이지 않으면 먼저 HTML·컴포넌트가 만들어졌는지 확인합니다. 버튼은 보이지만 배치나 색이 틀리면 CSS를 확인하고, 클릭해도 변화가 없으면 이벤트와 JavaScript 오류를 확인합니다.
브라우저와 백엔드의 경계
브라우저에 전달된 코드는 사용자가 내려받아 확인하고 바꿀 수 있습니다. 따라서 화면에서 버튼을 숨기거나 입력을 검사하는 것만으로 권한과 업무 규칙을 보호할 수 없습니다. 빠른 안내를 위한 검사는 프론트엔드에도 두되, 권한·입력·저장 가능 여부는 백엔드가 다시 검증합니다.
API 키, 데이터베이스 비밀번호와 서버 전용 토큰은 브라우저 코드에 넣지 않습니다. 빌드 시 환경변수로 넣더라도 최종 JavaScript에 포함되면 사용자에게 공개될 수 있습니다.
화면을 만들 때 확인할 내용
- 제목과 버튼이
div만으로 구성되지 않고 의미에 맞는 HTML 요소를 사용하는가 - 키보드만으로 입력·버튼·링크를 사용할 수 있는가
- 색 외에 문구나 아이콘으로도 성공·경고·오류를 구분하는가
- 화면 폭이 달라져도 중요한 내용과 동작이 사라지지 않는가
- 브라우저에 전달되면 안 되는 비밀정보가 코드와 응답에 없는가
1-01 · 거래처 변경 데이터 연결하기에서 기존 컴포넌트와 스타일을 먼저 확인하고 앱 셸과 모집단 화면을 연결합니다.
공식 근거
- MDN · HTML로 콘텐츠 구성하기 — HTML 요소와 의미 있는 문서 구조
- MDN · CSS 스타일링 기초 — HTML 표현을 CSS로 제어하는 기본 원리
- MDN · JavaScript 동적 스크립팅 — 사용자 동작과 화면 변경