대학 지원 연구 근거 · 이해와 독립적 기여 · 서울 강남·온라인

프로젝트 과정학생이 만든 결과물과 기록이 남는 과정입니다.

HTML·CSS·JavaScript로 웹사이트 만들기

준비도에 따라 배정: 휴대폰에 맞춘 반응형 레이아웃, 웹 접근성과 대체 텍스트, JavaScript...

  • 상담과 레벨 확인 무료
  • 압구정 교실 또는 온라인
  • 개별 수업 또는 소규모 그룹
  • 학원 등록번호 11882호
문제 하나가 여러 알고리즘으로 갈라지고 고른 길만 확인까지 이어지는 트리 도해
학부모를 위한 빠른 답

HTML·CSS·JavaScript로 웹사이트 만들기 과정이 준비도별 배정 학생에게 맞나요?

HTML·CSS·JavaScript로 웹사이트 만들기 과정은 현재 준비도에 맞춰 시작점을 정하는 학생을 위한 수업입니다. 휴대폰에 맞춘 반응형 레이아웃, 웹 접근성과 대체 텍스트에 관심 있는 학생에게 잘 맞으며 온라인 또는 서울 강남구 압구정 오프라인에서 개별 수업이나 소규모 그룹 수업으로 진행할 수 있습니다. 수업 결과물은 키보드·모바일·대비 점검을 통과한 포트폴리오 사이트, 실행법과 알려진 한계를 적은 README, Git 변경 기록과 접근성 점검 기록입니다.

에디터·개발자 도구·Git 저장소를 준비하고 header·main·footer처럼 문서 의미에 맞는 태그(시맨틱 HTML)로 첫 페이지를 만듭니다.

이미지 대체 텍스트와 키보드 접근을 확인하고 외부 CSS, Flexbox, 화면 폭에 따라 바뀌는 스타일(미디어 쿼리)로 휴대폰과 데스크톱에서 모두 읽기 좋은 화면을 만듭니다.

JavaScript로 폼 입력과 이벤트, fetch로 불러온 공개 데이터(JSON)를 다룬 뒤 포트폴리오를 배포하고 README에 실행법과 알려진 한계를 적습니다.

학생이 스스로 질문을 세우고 기능·모형·화면·해법을 직접 설계하고 시험해 자기 프로젝트로 만듭니다.

지원서나 면접에서는 참고한 자료와 자기가 한 일, 결과·실패·수정·한계를 구분해 설명합니다.

Google 로그인이 필요하며 기존 계정 권한에 따라 접근할 수 있습니다.

원장님과 선생님께서 상담을 너무 잘 해 주셔서, 아이도 파이썬 과정을 배우고 싶다고 했어요.
정○ 학생 학부모개별 학생의 경험이며 동일한 결과를 보장하지 않습니다.후기 더 보기
대상 연령
준비도에 따라 배정
관심 과목
컴퓨터과학·코딩같은 과목 보기
과정 유형
정규·프로젝트 과정
수업 방식
온라인 또는 압구정 오프라인 · 개별 또는 소규모 그룹
수업 언어
한국어 기본, 영어 자료 지원
교육과정 상태
수업 준비 완료모든 학습 항목에 근거, 풀이 예시, 실습과 튜터 진행 안내가 있어 CIT 수업 준비 기준을 충족합니다.

공개 연구를 읽고 학생 고유의 프로젝트로

학생은 주제에 맞는 공개 자료를 읽고 아이디어를 재현한 뒤 자기 질문, 기능이나 실험을 더합니다.

여는 자료는 모두 공개된 것이며, 회차마다 어떤 문서의 어느 부분을 여는지 적어 둡니다.

아이에게 어떻게 설명하면 좋을까요?

휴대폰에 맞춘 반응형 레이아웃, 웹 접근성과 대체 텍스트 같은 주제를 보며 자꾸 '왜?'라는 질문이 생긴다면 HTML·CSS·JavaScript로 웹사이트 만들기 과정이 잘 맞습니다.

근거로 질문을 확인한 뒤 자기만의 확장 프로젝트를 만들고 설명합니다.

어떤 관심을 보이는 학생에게 맞나요?

  • 휴대폰에 맞춘 반응형 레이아웃
  • 웹 접근성과 대체 텍스트
  • JavaScript 이벤트와 DOM

학생은 무엇을 완성하나요?키보드·모바일·대비 점검을 통과한 포트폴리오 사이트, 실행법과 알려진 한계를 적은 README, Git 변경 기록과 접근성 점검 기록

우리 아이에게 맞을까요?

소프트웨어를 만들거나 컴퓨터과학 기초를 다지고 관련 교과·대회를 준비하는 학생에게 잘 맞습니다.

짧은 상담과 예제로 시작점을 정합니다.

입문자는 안내된 작은 예제로 시작할 수 있습니다.

경험이 있는 학생은 더 어려운 활동으로 진행합니다.

무엇을 배우나요?

  1. 문서 의미에 맞는 태그와 제목 순서를 고르고 키보드만으로 모든 동작을 쓸 수 있는지 확인합니다.
  2. 외부 CSS와 박스 모델, Flexbox, 미디어 쿼리로 390px 화면과 데스크톱에서 겹침과 가로 스크롤을 없앱니다.
  3. DOM 요소를 바꾸고 클릭·입력·제출 이벤트를 함수에 연결해 사용자 입력을 안전하게 처리합니다.
  4. fetch로 공개 JSON을 불러와 로딩·빈 상태·네트워크 실패 화면을 각각 만듭니다.

수업은 어떤 순서로 진행되나요?

  1. 1
    개발 환경과 시맨틱 HTML

    에디터·개발자 도구·Git을 준비하고 header·main·footer와 section·article·nav로 문서 구조를 만듭니다.

  2. 2
    접근 가능한 콘텐츠

    뜻이 드러나는 링크 문구와 이미지 대체 텍스트를 작성하고 목록·표·버튼을 용도에 맞게 고릅니다.

  3. 3
    외부 CSS와 반응형 레이아웃

    외부 CSS와 class 선택자, 색 대비 검사, 박스 모델과 Flexbox, 미디어 쿼리로 화면을 구성합니다.

  4. 4
    폼과 사용자 입력

    모든 입력에 label을 연결하고 필수값과 오류 메시지를 키보드와 화면 읽기 흐름에서 확인합니다.

  5. 5
    JavaScript·DOM·데이터

    콘솔로 변수를 확인하고 DOM을 바꾸며 이벤트, 배열 데이터 반복 표시, fetch로 불러온 JSON을 다룹니다.

  6. 6
    포트폴리오 제작과 배포

    점검표에 맞춰 포트폴리오를 고친 뒤 HTTPS 주소로 배포해 다시 확인하고 README를 써서 발표합니다.

CIT에서 직접 만든 작업을 기록하고 설명하는 학생들

의미 있는 근거는 무엇인가요?

키보드·모바일·대비 점검을 통과한 포트폴리오 사이트, 실행법과 알려진 한계를 적은 README, Git 변경 기록과 접근성 점검 기록.

입학사정관이 이 작업에서 확인할 수 있어야 할 것

학생이 스스로 질문을 세우고 기능·모형·화면·해법을 직접 설계하고 시험해 자기 프로젝트로 만듭니다.

지원서나 면접에서는 참고한 자료와 자기가 한 일, 결과·실패·수정·한계를 구분해 설명합니다.

읽기 쉬운 코드, 테스트, 버전 기록, 설계 선택, 학생이 설명할 수 있는 작동 제품이 근거가 될 수 있습니다.

입학사정관이 보는 근거는 학생이 이해한 내용과 직접 한 일입니다.

학부모가 검색하고 상담 전에 묻는 질문

HTML·CSS·JavaScript로 웹사이트 만들기 과정이 준비도별 배정 학생에게 맞나요?

HTML·CSS·JavaScript로 웹사이트 만들기 과정은 현재 준비도에 맞춰 시작점을 정하는 학생을 위한 수업입니다.

휴대폰에 맞춘 반응형 레이아웃, 웹 접근성과 대체 텍스트에 관심 있는 학생에게 잘 맞으며 온라인 또는 서울 강남구 압구정 오프라인에서 개별 수업이나 소규모 그룹 수업으로 진행할 수 있습니다.

수업 결과물은 키보드·모바일·대비 점검을 통과한 포트폴리오 사이트, 실행법과 알려진 한계를 적은 README, Git 변경 기록과 접근성 점검 기록입니다.

HTML·CSS·JavaScript로 웹사이트 만들기 과정은 온라인·압구정 오프라인 및 개별·소규모 그룹 수업이 가능한가요?

네. 온라인 또는 서울 강남구 압구정 오프라인에서 개별 수업과 소규모 그룹 수업을 운영합니다. 준비도 상담에서 과정별 가능한 방식과 시작점을 확인합니다.

HTML·CSS·JavaScript로 웹사이트 만들기 과정을 시작하려면 미리 배운 내용이나 코딩 경험이 필요한가요?

짧은 상담과 예제로 시작점을 정합니다. 입문자는 안내된 작은 예제로 시작할 수 있습니다. 경험이 있는 학생은 더 어려운 활동으로 진행합니다.

HTML·CSS·JavaScript로 웹사이트 만들기에서 아이는 무엇을 만들거나 연습하나요?

핵심 결과물은 키보드·모바일·대비 점검을 통과한 포트폴리오 사이트, 실행법과 알려진 한계를 적은 README, Git 변경 기록과 접근성 점검 기록입니다.

선택한 이유, 시험한 결과, 받은 의견, 한계도 연령에 맞는 말로 함께 기록합니다.

HTML·CSS·JavaScript로 웹사이트 만들기에서 한 작업은 지원서에 어떻게 설명하나요?

학생이 스스로 질문을 세우고 기능·모형·화면·해법을 직접 설계하고 시험해 자기 프로젝트로 만듭니다.

지원서나 면접에서는 참고한 자료와 자기가 한 일, 결과·실패·수정·한계를 구분해 설명합니다.

읽기 쉬운 코드, 테스트, 버전 기록, 설계 선택, 학생이 설명할 수 있는 작동 제품이 근거가 될 수 있습니다.

HTML·CSS·JavaScript로 웹사이트 만들기 수업 횟수와 수강료는 어떻게 확인하나요?

학생의 현재 준비도, 목표, 수업 장소, 수업 인원과 운영 가능 시간을 확인한 뒤 과정 계획을 제안합니다. 상담과 레벨 확인은 무료이며 등록 전에 수강료를 안내합니다.

언제 시작하는 것이 좋을까요?

정해진 개강 월은 없습니다. 학생의 학기 일정과 현재 준비도, 가능한 시간을 확인한 뒤 어느 지점부터 시작할지 알려 드립니다.

선생님께서 설명도 정말 잘 해 주시고 재미있었다고 좋아했어요. 저희도 아주 기쁩니다.
윤○ 학생 학부모개별 학생의 경험이며 동일한 결과를 보장하지 않습니다.후기 더 보기

준비도를 확인한 뒤 과정을 선택하세요

CIT가 연령, 관심 과목, 현재 준비도에 따라 가까운 과정과 비교해 드립니다.