healthy-5 님의 블로그

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

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

제26장 로그인 화면 만들기

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

제25장 자기소개 페이지 만들기

지금까지 배운 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의 연산자는 값을 계산·비교하고 조건의 참과 거짓을 판단하며, ..

JavaScript로 프로그램을 만들려면 먼저 데이터를 저장하고 사용하는 방법을 알아야 합니다.예를 들어 쇼핑몰에서는 상품의 이름과 가격을 기억해야 하고, 로그인 화면에서는 사용자가 입력한 아이디를 처리해야 합니다. 게임에서는 점수를 저장해야 하고, 웹페이지에서는 사용자가 버튼을 눌렀는지와 같은 상태를 기억해야 할 수도 있습니다.프로그램에서는 이러한 데이터를 필요할 때 다시 사용할 수 있도록 이름을 붙여 다룰 수 있습니다.이때 사용하는 가장 기본적인 개념이 변수(Variable)입니다.그리고 변수에 저장되는 값에는 문자열, 숫자, 참·거짓 등 여러 종류가 있습니다. 이러한 데이터의 종류를 자료형(Data Type)이라고 합니다.🎯 한 줄 핵심 정리JavaScript의 변수는 프로그램에서 사용할 값에 이..

지금까지 HTML과 CSS를 이용하여 웹페이지의 구조를 만들고 디자인하는 방법을 배웠습니다.HTML은 제목, 문단, 이미지, 버튼과 같은 웹페이지의 구조와 의미를 만들고, CSS는 색상, 글꼴, 크기, 배치와 같은 화면의 표현을 담당합니다.하지만 실제 웹사이트는 단순히 화면을 보여주는 것에 그치지 않습니다.사용자가 버튼을 누르면 메뉴가 열리고, 입력한 내용을 확인하며, 이미지가 바뀌거나 새로운 정보가 화면에 나타나기도 합니다.이처럼 웹페이지가 사용자의 행동에 반응하고, 데이터를 처리하며, 화면의 내용을 동적으로 변경하도록 만드는 데 핵심적으로 사용되는 프로그래밍 언어가 JavaScript입니다.🎯 한 줄 핵심 정리JavaScript는 웹페이지에서 사용자의 행동과 여러 사건(Event)을 감지하고, 데이..