3. 이벤트 핸들링 (Event Handling)개념이벤트는 웹페이지에서 발생하는 사용자의 행동이나 브라우저의 동작임클릭, 키보드 입력, 스크롤, 폼 제출 등이 모두 이벤트임. 이벤트 핸들링은 이런 이벤트가 발생했을 때 실행할 코드(함수)를 연결하는 것! 1) 이벤트 리스너 등록 방법const button = document.getElementById('myBtn');// 방법 1: addEventListener (권장!)button.addEventListener('click', function() { console.log('버튼이 클릭되었습니다!');});설명:`addEventListener`(이벤트타입, 콜백함수)첫 번째 인자: 이벤트 종류 (문자열) - 'click', 'keydown', 's..

DOM 이란?DOM은 HTML 문서를 JavaScript가 이해할 수 있는 객체 트리 구조로 표현한 것입니다. 브라우저가 HTML을 파싱하면 DOM 트리가 만들어지고, JavaScript로 이 트리를 조작해서 웹페이지를 동적으로 변경할 수 있음. 즉, HTML은 단순한 텍스트 파일인데, 브라우저가 이걸 읽어서 JavaScript가 조작할 수 있는 "객체들의 집합"으로 바꿔놓은 것임HTML 문서가 이렇게 되어 있으면 안녕 내용 DOM 트리는 이런 구조가 됨document └── html ├── head │ └── title │ └── "제목" (텍스트 노드) └── body └──..

1. 고차함수개념고차함수는 함수를 인자로 받거나, 함수를 반환하는 함수임.JavaSCript에서 함수는 "일급 객체"이기 때문에 변수에 담거나, 다른 함수에 전달하거나 반환할 수 있음 즉, 보통 함수는 숫자나 문자열 같은 "값"을 받지만, 고차함수는 "함수 자체"를 값처럼 주고 받는 함수임 대표적인 고차함수들1) forEach - 배열 순회const fruits = ['사과', '바나나', '오렌지'];fruits.forEach(function(fruit, index) { console.log(`${index}: ${fruit}`);});// 화살표 함수로 더 간단하게fruits.forEach((fruit, index) => { console.log(`${index}: ${fruit}`);})..

Flexbox와 Grid를 공부하고나서 네비바와 카드 레이아웃을 만드는걸 해보려고 함우선은 css파일을 불러와야 하니 다음으로는 상단바 부터 만들어 보겠음 MyPortfolio 홈 소개 포트폴리오 연락처 리스트 형식으로 생성을 했으니 이제 원하는 스타일로 스타일을 추가해보면?/* 네비게이션 부분 */.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 15px 30px;}.logo { color: white; font-size: 24px; font-weig..

1. CSS 선택자HTML 요소 중 어떤 부분에 스타일을 적용할지 "찍어주는 역할" 기본 선택자 종류태그 선택자: 태그 이름으로 선택클래스 선택자: 여러 요소에 재사용 가능 (`.` 사용)아이디 선택자: 한 페이지에 1번만 사용 (`#` 사용)예제안녕p { color: blue; } /* 태그 선택자 */ .text { font-size: 20px; } /* 클래스 선택자 */ #title { font-weight: bold; } /* 아이디 선택자 */2. 텍스트 / 폰트 스타일글자의 크기, 색상, 굵기, 정렬 등을 설정하는 속성`color`: 글자 색`font-size`: 글자 크기`font-weight`: 글자 두께`text-align`: 정렬예제p { color: black; font-size..

지난번 HTML로 간단한 자기소개 페이지를 만들어 봤었음그걸 이제 CSS를 추가해서 꾸며보겠음이게 지난번 결과임 안녕하세요 이도서입니다. 자기소개 저는 React 개발자를 꿈꾸는 개발자입니다. 보유 기술 Swift Flutter HTML 학습중 JavaScript 학습중 React 학습중 연락처 Email : 이메일 비공개 프로필 사진 노션 링크 내 노션 링크 그럼 한번 해보겠음 우선 `link`로 css파일을 불러오도록함그 후 아래에 내용을 작성해보겠음 이도서 (Lee doseo) React ..

웹에서 회원가입, 로그인 같은 화면을 보면 대부분 입력창이 있음.이때 사용되는 태그가 바로 `form`과 `input`임.오늘은 이걸 다뤄보겠음form 태그란?`form`태그는 사용자가 입력한 데이터를 서버로 전송하기 위한 영역을 만드는 태그임 주 역할입력 데이터를 하나의 묶음으로 관리전송 방식 설정데이터를 보낼 서버 주소 지정기본 형태는 아래와 같음 `action` -> 데이터를 보낼 서버 주소`method` -> 전송 방식 (GET 또는 POST)`method`를 생략하면 기본값은 `GET` 방식으로 동작함이는 아래에서 더 다루겠음input 태그란?`input`태그는 실제로 사용자 입력을 받는 칸을 만드는 태그임.`type` 속성에 따라 입력 방식이 달라짐 자주 쓰는 `type` 종류`text` -..

오늘은 HTML의 기본이면서도 가장 많이 사용되는 div, span 태그와 class와 id속성에 대해 정리해볼 것임1. `div`와 `span`의 차이`div`와 `span`은 HTML에서 특별한 의미가 없는 '컨테이너'역할을 하는 태그임.다른 태그들과 달리 정해진 역할이나 필수 속성이 없고, 태그를 적용해도 다른 요소들의 모양이나 배치가 변경되지 않음.그래서 '비어있는 태그'라고도 부름 `div` -> 블록 태그한 줄 전체를 차지함자동으로 줄바꿈이 일어남레이아웃 구조를 나눌 때 주로 사용함`span` -> 인라인 태그필요한 만큼만 영역을 차지함줄바꿈 없이 같은 줄에 이어서 표시됨글자 일부에 스타일을 줄 때 자주 사용함정리하자면,`div`는 영역(박스)를 만드는 용도`span`은 글자 일부에 포인트를 ..

지금까지 배운 HTML로 UI는 신경쓰지 않고 HTML로 간단한 자기소개 페이지 만들어보겠음 안녕하세요 이도서입니다. 자기소개 저는 React 개발자를 꿈꾸는 개발자입니다. 보유 기술 Swift Flutter HTML 학습중 JavaScript 학습중 React 학습중 연락처 Email : 이메일 비공개 프로필 사진 노션 링크 내 노션 링크