Web GuideHTMLCSS자바스크립트
HTML·CSS·자바스크립트가 하는 일
웹페이지는 세 가지 기술로 이루어져 있습니다.
각각 무엇을 담당하는지 알면 문제가 생겼을 때 어디를 봐야 할지 감이 잡힙니다.
01역할 나누기
집을 짓는 것에 비유하면, HTML은 구조, CSS는 마감, 자바스크립트는 설비입니다. 각각 하는 일이 다릅니다.
셋이 함께 동작해 하나의 페이지를 만듭니다.
HTML — 내용과 구조
제목, 문단, 이미지, 링크. 무엇이 있는지
CSS — 모양과 배치
색, 크기, 위치, 여백. 어떻게 보이는지
자바스크립트 — 동작
클릭 반응, 데이터 요청, 화면 변화. 무엇을 하는지
02HTML이 가장 중요하다
구조가 제대로 되어 있어야 검색엔진이 읽고, 화면 낭독 프로그램이 이해하고, 나중에 스타일을 바꾸기 쉽습니다.
보기 좋게 만드는 것에 집중하다 구조가 엉망이 되면 여러 문제가 생깁니다.
검색엔진HTML 구조를 읽어 내용을 파악합니다.
화면 낭독구조에 따라 읽어 줍니다. 제목, 목록, 표가 구분됩니다.
AI 크롤러구조화된 내용을 더 잘 이해합니다.
유지보수구조가 명확하면 나중에 수정하기 쉽습니다.
스타일 변경구조가 잘 되어 있으면 디자인만 바꿀 수 있습니다.
03자바스크립트에 너무 의존하면
화면 내용을 자바스크립트로 만들어 넣으면, 검색엔진이 읽지 못하는 경우가 있습니다. 실행이 실패하면 빈 화면이 되기도 합니다.
꼭 필요한 동작에만 쓰고, 기본 내용은 HTML에 있어야 합니다.
자바스크립트 의존
내용을 스크립트로 생성 · 검색엔진이 못 읽을 수 있음 · 실패 시 빈 화면 · 느린 환경에서 문제
기본 내용은 HTML에
검색엔진이 읽음 · 스크립트가 실패해도 내용은 보임 · 자바스크립트는 개선에만 사용
04문제가 생겼을 때 어디를 볼까
증상에 따라 어느 쪽 문제인지 대략 짐작할 수 있습니다. 전달할 때 이 구분을 언급하면 소통이 빨라집니다.
내용이 안 보임
HTML 또는 데이터 문제. 내용 자체가 없는 경우.
모양이 이상함
CSS 문제. 색, 크기, 배치가 어긋난 경우.
레이아웃 깨짐
CSS 문제. 특히 반응형 설정.
눌러도 반응 없음
자바스크립트 문제일 가능성이 큽니다.
일부 브라우저만
CSS나 자바스크립트의 호환성 문제.
느림
여러 원인. 이미지, 스크립트, 서버 모두 가능.
CHECK POINT
□ 기본 내용이 HTML에 담겨 있는가
□ 자바스크립트가 실패해도 내용이 보이는가
□ 제목과 목록이 제대로 마크업되어 있는가
□ 검색엔진이 내용을 읽을 수 있는가
□ 문제를 전달할 때 증상을 구체적으로 설명하는가
#HTML#CSS#자바스크립트#웹 기초#검색엔진#구조#문제 진단#홈페이지 개발#웹비스타#홈페이지 제작