healthy-5 님의 블로그

제29장반응형 홈페이지 만들기

HTML, CSS, JavaScript를 모두 사용하는 종합 프로젝트입니다.이 장에서 배우는 내용홈페이지 전체 구조 설계헤더와 내비게이션대표 이미지 영역콘텐츠 카드 배치모바일 메뉴 만들기반응형 화면 완성하기1. 종합 프로젝트 시작하기지금까지 HTML로 웹페이지의 구조를 만들고, CSS로 화면을 꾸미며, JavaScript로 사용자의 행동에 반응하는 방법을 배웠습니다.이번 장에서는 세 가지 기술을 모두 사용하여 하나의 완성된 홈페이지를 만들어 보겠습니다.완성할 홈페이지는 다음 영역으로 구성됩니다.헤더├─ 로고├─ 내비게이션└─ 모바일 메뉴 버튼대표 이미지 영역├─ 핵심 문구├─ 설명└─ 바로가기 버튼서비스 소개 영역└─ 콘텐츠 카드 3개회사 소개 영역├─ 이미지└─ 소개 내용문의 안내 영역└─ 문의 버튼푸..

제28장FAQ 페이지 만들기

질문을 누르면 답변이 열리는 실용적인 화면을 제작합니다.이 장에서 배우는 내용질문과 답변 구조 만들기답변 숨기기클릭 이벤트 연결CSS 클래스 추가와 제거열림과 닫힘 표시접근성을 고려한 FAQ1. FAQ란 무엇인가?FAQ는 Frequently Asked Questions의 약자로 ‘자주 묻는 질문’이라는 뜻입니다.웹사이트 이용자가 자주 궁금해하는 내용을 질문과 답변 형태로 정리한 화면입니다.FAQ는 다음과 같은 웹페이지에서 많이 사용됩니다.쇼핑몰의 배송과 교환 안내회원가입과 로그인 안내제품 사용 방법결제와 환불 안내서비스 이용 방법고객센터 문의 안내FAQ의 질문을 클릭하면 숨겨져 있던 답변이 열리고, 다시 클릭하면 답변이 닫히도록 만들 수 있습니다.이러한 형태를 아코디언 UI라고 합니다.2. 아코디언 UI..

제27장이미지 갤러리 만들기

여러 이미지를 격자로 배치하고 클릭 기능을 추가합니다.이 장에서 배우는 내용이미지 목록 구성Grid로 이미지 배치이미지 비율 맞추기마우스 오버 효과클릭한 이미지 확대모바일 갤러리 최적화1. 이미지 갤러리란?이미지 갤러리는 여러 장의 사진을 일정한 간격으로 배치하여 보여주는 화면입니다.여행 사진, 제품 사진, 작품 모음, 음식 사진, 포트폴리오 등에 활용할 수 있습니다.일반적인 이미지 갤러리에는 다음 기능이 들어갑니다.여러 이미지를 격자로 배치이미지 크기와 비율 통일마우스를 올렸을 때 효과 표시이미지를 클릭하면 크게 보기확대 화면 닫기모바일 화면에 맞게 열 개수 변경이번 장에서는 HTML, CSS, JavaScript를 함께 사용하여 반응형 이미지 갤러리를 만들어 보겠습니다.2. 실습에 사용할 이미지 준비..

웹사이트에서 로그인 화면은 사용자의 아이디와 비밀번호를 입력받는 중요한 공간입니다. 이번 장에서는 HTML의 폼 요소로 로그인 화면을 만들고, CSS로 보기 좋게 꾸민 다음 JavaScript로 입력값을 확인하는 방법을 배웁니다.다만 이번 실습에서 만드는 로그인 기능은 입력값을 확인하는 학습용 예제입니다. 실제 로그인 시스템에서는 서버, 데이터베이스, 암호화, HTTPS 같은 별도의 보안 기술이 필요합니다.1. 로그인 화면의 기본 구조일반적인 로그인 화면은 다음 요소로 구성됩니다.로그인 제목아이디 입력창비밀번호 입력창로그인 버튼아이디 저장과 같은 선택 항목입력 오류를 알려주는 메시지화면의 구조를 간단히 나타내면 다음과 같습니다.로그인아이디[ 아이디를 입력하세요 ]비밀번호[ 비밀번호를 입력하세요 ][ 로그..

지금까지 배운 HTML과 CSS를 활용하여 첫 번째 완성형 웹페이지를 제작합니다.이 장에서 배우는 내용프로필 영역 만들기사진과 자기소개 배치하기경력과 관심사 목록 만들기연락처 링크 만들기카드 형태로 디자인하기모바일 화면에 맞게 조정하기 1. 이번 장에서 만들 웹페이지이번 장에서는 자신의 이름, 사진, 소개, 경력, 관심사, 연락처를 담은 자기소개 페이지를 만듭니다.완성된 페이지에는 다음과 같은 영역이 들어갑니다.자기소개 페이지│├─ 프로필 사진├─ 이름과 간단한 소개├─ 나의 경력├─ 관심 분야└─ 연락처 단순히 HTML 요소를 나열하는 것이 아니라 CSS를 사용하여 카드 형태로 꾸미고, 스마트폰에서도 편하게 볼 수 있도록 조정하겠습니다.이번 실습을 통해 다음과 같은 과정을 경험할 수 있습니다.페이지 내..

JavaScript로 HTML 요소를 찾고 내용을 변경하는 방법을 배웁니다.이 장에서 배우는 내용DOM의 의미getElementByIdquerySelectortextContent와 innerHTMLclassList로 CSS 클래스 변경하기요소 만들기와 삭제하기1. DOM이란 무엇인가?HTML로 웹페이지를 만들면 브라우저는 HTML 문서를 읽어 각 요소를 하나의 객체로 변환합니다.이렇게 변환된 객체들의 구조를 DOM(Document Object Model)이라고 합니다.DOM을 우리말로 표현하면 문서 객체 모델입니다.다음과 같은 HTML 문서가 있다고 가정해 보겠습니다. body>h1>나의 웹페이지h1>p>JavaScript를 공부합니다.p>button>내용 변경button>body> 브라우저는 이 문서를..

사용자의 행동에 반응하는 웹페이지를 만듭니다.이 장에서 배우는 내용이벤트란 무엇인가?click 이벤트mouseover와 mouseoutinput과 changekeydown 이벤트addEventListener 사용법1. 이벤트란 무엇인가?이벤트(Event)는 웹페이지에서 발생하는 특정한 행동이나 변화를 말합니다.사용자가 버튼을 클릭하거나, 입력창에 글자를 입력하거나, 키보드의 키를 누르면 브라우저는 이러한 행동을 감지합니다.대표적인 이벤트는 다음과 같습니다.버튼을 클릭한다.마우스를 요소 위에 올린다.마우스를 요소 밖으로 이동한다.입력창에 글자를 입력한다.선택 항목을 변경한다.키보드의 키를 누른다.웹페이지의 로딩이 끝난다.JavaScript를 사용하면 이벤트가 발생했을 때 원하는 명령을 실행할 수 있습니다...

여러 명령을 하나로 묶어 반복해서 사용하는 방법을 배웁니다.이 장에서 배우는 내용함수가 필요한 이유함수 선언함수 호출매개변수와 인수return 반환값화살표 함수의 기초1. 함수란 무엇인가?함수(Function)는 여러 명령을 하나의 이름으로 묶어 놓은 코드입니다.우리가 자주 사용하는 계산기에도 더하기, 빼기, 곱하기 같은 기능이 있습니다. JavaScript에서는 이러한 기능을 함수로 만들 수 있습니다.예를 들어 다음과 같은 코드가 있다고 생각해 봅시다. console.log("안녕하세요.");console.log("JavaScript를 공부합니다.");console.log("오늘도 즐겁게 시작합니다."); 이 세 줄의 코드를 여러 번 실행해야 한다면 매번 같은 코드를 작성해야 합니다.이때 함수를 사용하..

프로그램을 만들다 보면 같은 작업을 여러 번 반복해야 하는 상황이 매우 자주 발생합니다.예를 들어 1부터 10까지 숫자를 화면에 출력한다고 생각해 보겠습니다.반복문을 사용하지 않는다면 다음처럼 작성할 수도 있습니다. console.log(1);console.log(2);console.log(3);console.log(4);console.log(5); 10개 정도라면 직접 작성할 수도 있습니다.하지만 1부터 100까지, 또는 1부터 10,000까지 출력해야 한다면 같은 코드를 계속 작성하는 것은 비효율적입니다.JavaScript에서는 이런 반복 작업을 자동으로 처리하기 위해 반복문(Loop)을 사용합니다.대표적인 반복문에는 for, while, do...while이 있습니다.🎯 한 줄 핵심 정리반복문은 ..

JavaScript 프로그램은 데이터를 저장하는 것만으로는 충분하지 않습니다.저장된 값을 더하거나 빼고, 두 값을 비교하고, 어떤 조건이 맞는지 판단한 뒤 조건에 따라 서로 다른 명령을 실행할 수 있어야 합니다.예를 들어 쇼핑몰에서는 상품 가격과 수량을 곱해 총금액을 계산합니다. 로그인 프로그램에서는 입력한 아이디와 비밀번호가 맞는지 비교합니다. 시험 점수가 60점 이상이면 합격, 그렇지 않으면 불합격이라고 판단할 수도 있습니다.이때 값을 계산하거나 비교하는 기호를 연산자(Operator)라고 하고, 조건에 따라 실행할 코드를 선택하는 문장을 조건문(Conditional Statement)이라고 합니다.🎯 한 줄 핵심 정리JavaScript의 연산자는 값을 계산·비교하고 조건의 참과 거짓을 판단하며, ..