healthy-5 님의 블로그

제3회. 단어의 중심 의미를 만드는 어근

라틴어·그리스어 어근으로 단어의 가족 찾기영어 단어를 살펴보면 형태는 다르지만 비슷한 철자와 의미를 공유하는 단어들이 있습니다.visible: 눈에 보이는vision: 시력, 시야, 비전visual: 시각의revise: 수정하다이 단어에는 모두 ‘보다’와 관련된 의미가 들어 있습니다. 중심에는 라틴어에서 유래한 vis, vid라는 어근이 있습니다.영어 단어에서 중심 의미를 담당하는 부분을 어근(root)이라고 합니다. 접두어가 뜻의 방향을 바꾸고 접미어가 품사나 기능을 결정한다면, 어근은 그 단어가 무엇에 관한 것인지 알려 줍니다.이번 글에서는 영어에서 자주 사용하는 어근을 보고, 듣고, 말하고, 쓰고, 이동하고, 만드는 등의 의미로 나누어 살펴보겠습니다.1. 어근은 왜 단어의 중심일까?어근은 여러 단어..

제2회. 뜻의 방향을 바꾸는 접두어

부정·반복·위치·방향·수량을 나타내는 접두어영어 단어를 읽을 때 단어의 첫 부분을 자세히 살펴보면 뜻을 짐작할 수 있는 경우가 많습니다.예를 들어 rewrite를 처음 보더라도 write가 ‘쓰다’라는 뜻이고 re-가 ‘다시’라는 뜻임을 알면 ‘다시 쓰다’라고 추론할 수 있습니다.unhappy도 마찬가지입니다.un- : 아닌, 반대의happy : 행복한unhappy : 행복하지 않은이처럼 단어의 앞에 붙어서 원래 단어의 뜻에 새로운 방향을 더하는 요소를 접두어(prefix)라고 합니다.이번 글에서는 영어에서 자주 사용하는 접두어를 부정·반복·시간·위치·방향·수량·정도의 의미로 나누어 살펴보겠습니다.1. 접두어는 단어의 뜻을 어떻게 바꿀까?접두어는 어근이나 기본 단어의 앞에 붙습니다.접두어 + 어근 또는 ..

제1회. 영어 단어는 어떻게 만들어질까?

접두어·어근·접미어의 기본 원리영어 단어를 공부하다 보면 이런 의문이 생깁니다.“왜 어떤 단어들은 생김새가 비슷할까?”“처음 보는 단어의 뜻을 짐작할 수는 없을까?”“긴 단어를 무조건 통째로 외워야 할까?”영어 단어는 아무 의미 없이 여러 글자를 이어 붙여 만든 것이 아닙니다. 많은 단어가 의미를 가진 작은 부분들의 결합으로 만들어집니다.대표적인 구성 요소가 바로 다음 세 가지입니다.접두어(prefix)어근(root)접미어(suffix)이 세 가지를 이해하면 긴 단어도 여러 조각으로 나누어 볼 수 있습니다. 단어를 통째로 외우는 대신 그 안에 들어 있는 의미를 찾아내는 것입니다.이번 글에서는 영어 단어가 만들어지는 기본 원리부터 접두어·어근·접미어를 구분하는 방법까지 차근차근 알아보겠습니다.1. 영어 단..

기초 과정을 마친 뒤 어떤 내용을 배워야 하는지 정리합니다.이 장에서 배우는 내용Git과 버전 관리GitHub로 코드 저장하기TypeScript의 역할React 등 프론트엔드 도구Node.js와 백엔드 개발AI를 활용한 웹 개발 학습법1. 기초 과정은 끝이 아니라 출발점이다지금까지 HTML, CSS, JavaScript를 사용하여 웹페이지의 구조를 만들고, 화면을 꾸미며, 사용자 동작을 처리하는 방법을 배웠습니다.다음과 같은 화면도 직접 만들어 보았습니다.자기소개 페이지로그인 화면이미지 갤러리FAQ 아코디언반응형 홈페이지모바일 내비게이션이제 웹페이지의 기본적인 작동 원리를 이해하게 되었습니다.하지만 실제 웹 개발에서는 코드를 작성하는 것 외에도 다음과 같은 기술이 필요합니다.변경된 코드 기록하기다른 개발..

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

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

여러 이미지를 격자로 배치하고 클릭 기능을 추가합니다.이 장에서 배우는 내용이미지 목록 구성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> 브라우저는 이 문서를..