일상
9주차 - Web 본문
1. Web 개요
1-1. Web 이란?
- 전 세계 컴퓨터들이 인터넷으로 연결되어 정보를 주고받는 거대한 네트워크
- 웹 브라우저를 통해 텍스트, 이미지, 동영상 등 다양한 정보에 접근할 수 있다. URL 주소를 입력하여 전 세계 어디서든 원하는 웹페이지를 조회한다.
1-2. Web Server
- 정보를 제공하는 컴퓨터로, 웹페이지 파일들을 저장한다.
- 사용자 웹페이지 요청 시 해당 파일을 찾아 전송한다. 24시간 운영되어 언제든지 웹페이지를 제공한다.
1-3. Client
- 정보를 요청하는 사용자이다.
- 웹 브라우저(Chrome, Firefox, Safari 등)를 사용하는 사용자 또는 컴퓨터를 지칭한다.
- 웹 서버에게 웹페이지를 요청하고, 서버로부터 받은 웹페이지를 화면에 표시한다.
1-4. 웹 전체 동작 과정
- 사용자(클라이언트)가 웹 브라우저에서 웹사이트 주소를 입력한다.
- 웹 서버가 요청을 받아 HTML, CSS, JavaScript 파일을 전송한다.
- 브라우저가 전송받은 파일들을 해석하여 사용자에게 완성된 웹페이지를 표시한다.
1-5. 핵심 기술
- HTML : 웹페이지의 뼈대 (구조)
- CSS : 웹페이지의 디자인
- JavaScript : 웹페이지에 생명력 부여 (동작)
- Servlet : 서버에서 실행되는 자바 프로그램
- JSP : HTML + 자바가 결합된 동적 페이지
2. HTML
2-1. HTML 의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html> : html 문서의 선언부이다. html 버전에 따라 문서의 선언부가 다르다.
- <html> : 모든 html 요소를 감싸는 최상위(루트) 컨테이너
- <head> : 웹 문서의 메타 데이터를 명시하는 영역, 즉 설정 정보 영역으로 문서의 정보를 나타낸다. 사용자에게는 보이지 않지만 검색 엔진, 브라우저 등에는 중요한 정보이다.
- <meta> : 메타 데이터 - 데이터를 설명하는 데이터
- charset = "UTF-8" : 전 세계 모든 문자를 표현할 수 있는 인코딩, 한글 깨짐을 방지한다.
- name = " " content = " " : 반응형 웹을 위한 설정, 모바일에서도 잘 보이도록 설정하는 필수 메타 태그이다.
- <title> : 브라우저 탭에 표시되며, 검색 엔진에 의해 검색 결과에 표시된다.
- <style> : 웹 디자인 스타일을 위한 CSS 영역이다.
- <body> : 실제로 웹 페이지에 표시되는 내용이 들어가는 영역이다.
2-2. 시맨틱 태그(Semantic Tag)
- HTML5에 도입된 것으로, 태그 자체가 콘텐츠의 의미를 명확하게 설명하는 역할을 한다.
- 기존의 <div> 나 <span>처럼 단순히 영역을 나누던 태그와 달리 이름만으로도 담고 있는 내용의 종류를 짐작할 수 있게 한다.
- 시맨틱 태그의 효과
- 검색 엔진 최적화 (SEO : Search Engine Optimization) : 검색 엔진 로봇(크롤러)이 웹 페이지의 구조와 내용을 더 정확하게 이해하도록 돕는다. 검색 결과 노출에도 도움이 된다.
- 웹 접근성 : 시각 장애인 사용자를 위한 스크린 리더기가 웹 페이지의 구조를 더 잘 파악하고, 사용자에게 의미있는 정보를 전달하도록 돕는다.
- 코드 가독성 및 유지보수성 : 개발자가 코드를 읽을 때 태그 이름만으로도 포함될 내용을 직관적으로 알 수 있어 코드 이해가 빠르고, 협업 및 유지 보수가 훨씬 용이하다. 또한 웹 페이지 구조를 더 논리적으로 설계하도록 돕는다.
- 시맨틱 태그의 종류
- <header> : 머리말 영역, 페이지나 섹션의 머리말/제목/로고/간단한 소개를 표현한다.
- <nav> : 네비게이션 영역으로, 사이트 내 네비게이션 링크를 그룹화한다.
- <main> : 주요 콘텐츠 영역 (페이지당 하나)
- <section> : 관련 컨텐트를 묶는 의미적 구역
- <article> : 독립적으로 배포 가능한 컨텐츠, 블로그 게시물, 뉴스 기사, 제품 리뷰 등에 사용된다.
- <aside> : 부가 정보 영역으로 사이드바, 광고, 관련 링크를 제공한다.
- <footer> : 페이지 하단 영역으로 저작권 정보, 연락처, 사이트맵 등이 들어간다.
- <h1~h6> : 제목 계층 구조
- <h1> : 페이지 내에서 가장 중요한 제목으로 페이지 당 하나만 사용한다.
- <p> : 문단을 나타내는 기본 태그이다.
- <strong> : 중요도가 높은 내용, 굵은 글씨로 표시
- <em> : 내용 강조
- <code> : 프로그래밍 코드나 관련 텍스트를 표시
- <time> : 날짜/시간
- <address> : 연락처 정보
- <small> : 부가 정보
- <cite> : 작품명, 저작물의 제목을 나타낼 때 사용
2-3. 경로 <a>
- 상대 경로 : <a href="./practice2.html"></a>
- 현재 디렉토리의 html 파일 링크로 이동한다. 현재 디렉토리일 경우 파일명만 써주어도 되나 현재 위치임을 명확히 알리는 표현인 ./ 으로 표현하는 것이 권장된다. 의도가 명확하며, 절대 경로와 구분되어 가독성이 높고 스크립트 환경에서 유리하다.
- 절대 경로 : <a href="https://www.google.com></a>
- href 속성 : 절대 경로 또는 상대 경로, 이메일 또는 전화번호를 설정할 수 있다. 페이지 내 이동 링크를 설정할 수도 있다.
- <a href"#section1"></a> : 섹션 1로 이동한다.
- id 속성으로 링크 대상을 지정한다. 즉 <h3 id="section1"></h3> 라고 하면 a태그로 이 항목에 접근할 수 있다.
- target 속성 : target = "_blank" 는 새 탭에서 열 수 있도록 한다.
- title 속성 : 마우스를 올렸을 때 나타나는 메시지를 설정한다.
- download 속성 : 링크를 클릭했을 때 다운로드 할 파일명을 지정한다. 파일이 다운로드 될 때 이 파일명으로 다운이 된다.
2-4. 여러 가지 HTML 태그
- <ul> : 순서가 없는 목록 태그이다. 항목은 <li>로 작성한다.
- <ol> : 순서가 있는 목록 태그이다. 항목은 <li> 로 작성한다.
- <img src="파일 위치" alt="파일 설명">
- alt : 이미지에 대한 설명을 적는다. 만약 비어있을 땐 이 이미지가 순전히 장식용임을 스크린 리더에게 알린다.
- <figure> : 이미지와 설명을 함께 그룹화한다.
- <video controls> : 비디오를 삽입한다. <source>태그를 안에 포함하여 src와 type를 지정해서 불러온다.
- <audio controls> : 오디오를 삽입한다. <source>태그를 안에 포함하여 src와 type를 지정해서 불러온다.
- <iframe> : 외부 영상을 삽입한다. src, title, frameborder, allow, referrerpolicy, allowfullscreen 등을 사용한다.
- <div> : html 의 블록 요소로 행을 다 차지하는 속성을 가지며, 항상 새로운 라인에서 시작하고 가로 폭을 100% 차지한다.
- 사용 예 : 화면 전체 레이아웃
- <span> : 인라인 요소로 텍스트 흐름에 한 줄에 나란히 배치하며, 내용의 크기만큼만 공간을 차지한다.
- width, heigh 적용이 안되고 컨텐트 크기만큼 사이즈가 지정된다.
- 사용 예 : 링크, 이미지, 텍스트 내 강조내용 등
2-5. table 태그
- <table> : 테이블 태그이다.
- <caption> ; 웹 접근성을 고려한 테이블 설명을 작성한다.
- <thead> : 테이블의 헤더 그룹이다.
- <tr> : 같은 성질을 가진 항목들을 하나로 묶는다.
- <th> : 헤더에 들어가는 항목들을 작성한다.
- scope 속성 : 이 헤더가 열 또는 행을 대표함을 명시한다. 스크린 리더는 scope="열 또는 행"이 있는 th 태그를 만나면 그 헤더가 해당 열의 모든 데이터에 대한 설명이라는 것을 인식한다.
- <td> : 항목을 작성한다.
- <tbody> : 테이블의 본문 그룹이다. <tr>, <td> 를 사용한다.
- <tfoot> : 테이블의 푸터 그룹이다. 합계나 요약 정보를 작성한다. <tr>, <td>를 사용한다.
2-6. form 태그
- <form> : 클라이언트 정보를 서버에 전송할 시 사용되는 태그로, 쌍방향 소통을 위해 사용한다.
- action 속성 : 폼 데이터를 처리할 url(처리할 서버 프로그램의 위치) 를 작성한다.
- method 속성 : get, post, put, delete, update 등의 데이터 전송 방식을 작성한다.
- <fieldset> : form의 요소들을 논리적으로 묶어주는 컨테이너이다.
- 책의 챕터와 같은 역할로, UI/UX의 시각적 그룹화로 인한 가독성이 향상된다.
- 의미론적 그룹화(Semantic Grouping)을 통해 CSS, JavaScript에서 배송 정보 폼 요소와 결제 정보 폼 요소의 디자인 스타일을 각각 제어할 수 있고 fieldset 기준으로 각각 제어할 수 있다.
- 예) 온라인 쇼핑몰 주문 페이지에서 "배송 정보", "결제 정보", "추가 옵션" 등을 fieldset으로 구분하여 사용자가 단계적으로 정보를 입력할 수 있도록 한다.
- <label> : 입력 필드의 설명을 작성한다.
- for 속성 : 입력 양식의 id를 작성한다. ex) <label for="username">사용자명</label>
- 입력 양식에 접근하기 쉽게 하며, 레이블 영역만 클릭해도 입력할 수 있도록 해당 입력 양식에 커서를 이동시킨다. 스크린 리더가 해당 입력 폼을 설명할 수 있도록 정보를 제공한다.
- for 속성 : 입력 양식의 id를 작성한다. ex) <label for="username">사용자명</label>
- <input> : 입력 필드를 생성한다.
- id 속성 : 레이블과 연결하기 위한 고유 식별자
- name 속성 : action 에서 지정한 서버 프로그램으로 전송할 때 사용되는 변수명]
- required 속성 : 필수 입력 필드로 지정한다.
- type 속성 : 해당 입력 필드의 타입을 지정한다. ex)password, email
- type = "submit" : 폼데이터를 서버로 전송할 수 있도록 한다.
- type = "reset" : 폼의 모든 입력을 초기화한다.
- <button> : 버튼 태그로 submit을 기본적으로 수행한다. type을 명시하면 불필요한 에러를 감소시킬 수 있다.
- <textarea> : 여러 줄의 텍스트를 입력이 가능한 태그이다.
- row 속성 : 화면에 표시될 줄 수 (세로 크기)
- cols 속성 : 화면에 표시될 문자 수 (가로 크기)
- placeholder 속성 : 입력 창 안내문
3. CSS
- <style> 안에 직접 작성하거나 <link> 태그로 외부에 작성한 CSS문서를 가져온다.
- 예) <link rel="stylesheet" href="../css/style1.css" />
3-1. CSS 박스 모델
- CSS 박스 모델 : 웹 페이지의 모든 html 요소가 사각형 박스로 간주되는 방식
- html의 모든 요소는 content, padding, border, margin 으로 구성된 박스로 존재한다.
- content : 텍스트나 이미지 등 실제 요소 내용이 표시되는 영역
- padding : 내부 여백, 컨텐트 영역과 테두리 사이의 공간
- border : 패딩과 마진 사이의 선으로 요소의 시각적 경계를 나타냄
- margin : 외부 여백, 테두리 바깥쪽 공간으로 현재 요소와 다른 요소 사이의 공간을 만든다.
- 인라인 블록 요소 - display : inline-block
- 가로 배치되면서 정확한 크기를 제어할 수 있다.
- 사용 예 : 네비게이션 메뉴 버튼, 카드형 리스트, 아이콘과 텍스트가 함께 있는 버튼 등에서 자주 사용된다.
- Flexbox(1차원 레이아웃)와 Grid(2차원 레이아웃)와 같은 기능을 한다.
- padding : 내부 여백, 컨텐트와 테두리 사이의 안쪽 여백
- border : 테두리선
- margin : 외부 여백, 다른 요소와의 바깥쪽 여백
- auto : 좌우 가운데 정렬
- border-box : 요소의 width, height, content, padding, border을 모두 포함한 영역을 의미한다.
- content-box (기본) : 요소의 width, height 는 컨텐트의 영역만을 의미한다.
3-2. Flex
- 1차원 레이아웃으로 컨테이너 내의 아이템들을 효율적으로 배치 및 정렬하는 1차원 레이아웃 방법이다.
- 사용 예) 내비게이션 메뉴, 버튼 그룹, 카드 내부 정렬
- display : flex; : flex box 컨테이너로 설정하여 1차원 레이아웃 정렬
- 써주지 않으면 block이 기본값이다.
/* justify content 공부 - 정렬 */
.justify-start {
justify-content: flex-start;
/* 시작점 정렬, 기본값 */
}
.justify-center {
justify-content: center;
/* 가운데 정렬 */
}
.justify-between {
justify-content: space-between;
/* 양 끝 정렬 */
}
.justify-around {
justify-content: space-around;
/* 균등 분배 */
}
3-3. Grid
- 2차원 레이아웃 시스템으로, 행과 열을 동시에 제어하여 복잡한 레이아웃을 간단하게 구현한다.
- 웹 사이트의 전체 구조 설계에 최적화되어 있다.
- 2행 이상이 되면 flexbox는 다음 열 컨텐트가 화면에 꽉 차게 되는데, 이를 방지하기 위해 2행 이상이면 grid를 사용하는 것이 좋다.
- content box는 정확한 너비 계산이 어려우므로 border box를 사용한다.
- 사용 예) 전체 페이지 레이아웃, 갤러리, 대시보드
/* Grid 예제 2 : 복잡도가 있는 그리드 레이아웃 연습 (헤더, 사이드바, 메인, 푸터) */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr; /* 200px 1fr => 사이드바 고정폭, 메인 유동폭 */
/* 사이드바 크기는 고정이고, 메인은 1fr이므로 사이드바가 아닌 곳의 크기를 모두 차지한다. */
grid-template-rows: 60px 1fr 50px; /* 60px 1fr 50px => 헤더 60px 메인 유동폭 푸터 50px */
grid-template-areas: "header header" "sidebar main" "footer footer";
height: 400px;
gap: 10px;
padding: 10px;
background-color: #fce4ec;
}
3-4. 반응형 웹
- 웹사이트가 데스크탑, 태블릿, 모바일, 폰 등 다양한 화면 크기와 기기에 맞춰 자동으로 최적화된 레이아웃과 디자인을 제공하도록 만드는 웹 디자인 기법
- 뷰 포트 메타 태그 <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 모바일 기기에서 화면 크기에 맞게 레이아웃이 조정될 수 있도록 하는 필수 설정
- 미디어 쿼리 @media (max-width: 768px) { ... } : 화면 크기에 따라 CSS 스타일을 다르게 적용해 다양한 기기에서 최적의 레이아웃을 만든다.
- 유동적 단위 사용 : px 대신 %, em, rem, vw, vh, fr 등 상대 단위를 사용해 요소가 화면 크기에 따라 자연스럽게 변하도록 한다.
- max-width:100%; height:auto; : 이미지와 미디어의 반응형 처리로 이미지가 부모 영역을 넘지 않도록 하고, 필요하면 srcset 로 해상도별 이미지를 제공한다.
/* 해상도별 미디어 쿼리 목록 */
@media (max-width: 480px) { /* 작은 스마트폰 */ }
@media (max-width: 600px) { /* 일반 스마트폰 */ }
@media (max-width: 768px) { /* 태블릿 이하 */ }
@media (min-width: 769px) and (max-width: 1200px) { /* 데스크톱 */ }
@media (min-width: 1201px) { /* 큰 데스크톱 */ }
@media (min-resolution: 2dppx) { /* 레티나 디스플레이 */ }
4. JavaScript
4-1. JavaScript 기초
- 웹 문서의 동적 행위를 담당하는 ECMAScript 표준 스크립트 언어이다.
- HTML + CSS + JavaScript 가 웹의 3요소이다.
4-2. ECMAScript
- ECMA 인터내셔널이 제정한 JavaScript 표준 명세로 이 표준을 준수하는 스크립트 언어가 JavaScript 이다.
- ECMA 인터내셔널 : 정보 통신 표준을 제정하는 표준화 기구
- ES5(ECMA5, 2009) : 변수 선언 var -> function level scope 등
- ES6(ECMA6, 2015) : 변수 선언 let, const -> Block level (자바의 지역 변수와 scope가 유사), arrow function(화살표 함수), 구조 분해 할당, Template Literal, asyn await 등이 있다.
4-3. 변수와 스코프
- var (ES5) : 중복 선언 가능, function level scope 로 호이스팅(hoisting) 시 undefined로 초기화된다.
- let (ES6) : 중복 선언 불가능, block level scope 로 재할당이 가능하다. 호이스팅 시 초기화가 이루어지지 않으므로 초기화 없이 사용할 경우 Reference Error 가 발생한다.
- JavaScript는 따로 변수의 타입을 정의하지 않는다. 전부 var 또는 let, 상수는 const 로 정의한다.
- ==와 === : ==는 강제 형변환이 일어난 후 비교한다. ===는 엄격한 비교 시에 사용하며, 타입까지 비교한다.
- const (ES6) ; 중복 선언 불가능, block level scope 로 재할당이 불가능하다. 호이스팅 시 초기화가 이루어지지 않으므로 초기화 없이 사용할 경우 Reference Error 가 발생한다.
- scope : 변수에 접근할 수 있는 유효한 범위
- Global scope : 전역에서 접근이 가능하다.
- Function scope : 함수 내부에서만 접근이 가능하다.
- Block scope : 블럭 ({}) 내부에서만 접근이 가능하다.
4-4. 호이스팅(Hoisting)
- 호이스팅 (Hoisting) : 변수와 함수 선언이 코드 실행 전에 맨 위로 끌어 올려진 것처럼 동작하는 현상이다. var 과 function 선언문에서 발생한다.
- var : 자신의 scope 맨 위로 선언이 호이스팅되고 초기화는 undefined로 된다.
- 기존의 var 변수 형식은 코드 예측 가능성을 떨어뜨리고 잠재적인 버그를 유발했다.
- let, const : 초기화 없이 선언만 호이스팅하며, TDZ(Temporal Dead Zone : 일시적 사각지대)를 만들어 이 기간 동안 해당 변수에 접근하려고 하면 Reference Error 가 발생한다.
- var : 자신의 scope 맨 위로 선언이 호이스팅되고 초기화는 undefined로 된다.
function varTest(num) {
// 선언 하기 전에 사용 가능
alert(a); // 호이스팅에 의해 undefined 으로 초기화 되었기 때문에 undefined 로 출력
if (num > 1) {
var a = 999; // var 로 변수를 선언 function level scope
}
alert(a); // ok : var 변수는 사용 가능 function level scope => why? hoisting 특성 때문
}
// alert(a); //var => function level scope
function letTest(num) {
// alert(b); // var 와 다르게 error
if (num > 0) {
let b = 1;
}
// alert(b); //error let 은 block level scope
console.log(b);
// 선언된 자신의 block 내에서만 사용 가능
}4-5. DOM (Document Object Model)
- 문서 객체 모델로, JavaScript에서 HTML Web Document (웹 문서)의 요소를 제어하기 위한 프로그래밍 인터페이스이다.
- 트리 구조로 문서를 표현하며, 동적 제어가 가능하다.
- document.getElementById("id") : id로 html 요소 가져오기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM Event Study</title>
</head>
<body>
<form>
<!-- javascript key event 를 이용해 enter key 눌렀다가 뗄 때 텍스트를 이동시키게 한다 -->
<input type="text" id="orgTxt" onkeyup="enterKeyMoveTxt()" />
<button type="button" onclick="moveTxt()">이동</button>
<input type="text" id="destTxt" />
</form>
<script>
// 버튼 클릭했을 때 실행하는 함수
function moveTxt() {
let orgTxtElement = document.getElementById("orgTxt");
let destTxtElement = document.getElementById("destTxt");
destTxtElement.value = orgTxtElement.value;
orgTxtElement.value = "";
orgTxtElement.focus();
}
// enter key 눌렀다가 뗄 때 실행되는 함수
function enterKeyMoveTxt() {
// alert(event.keyCode); // enter key 의 keyCode 는 13번
if (event.keyCode === 13) {
moveTxt();
}
}
</script>
</body>
</html>- document.querySelector("#id") : 요소의 객체를 리턴받을 수 있다.
4-6. BOM (Browser Object Model)
- 브라우저 객체 모델로, JavaScript가 브라우저와 소통하기 위해 만들어진 객체 모델이다.
- Web Document 가 element를 제외한 웹 브라우저 창에 포함된 객체 요소를 의미한다.
4-7. 화살표 함수와 익명 함수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>javascript 다양한 함수 표현식</title>
</head>
<body>
<h1>javascript 다양한 함수 표현식(Function Expression)</h1>
<script>
//1. 기본 함수 선언문 function declaration
function test1() {
return "불금";
}
console.log(test1());
// const add 에 익명 함수 객체를 할당
//2. 함수 표현식 function expression : 변수(or 상수)에 할당되는 익명함수
let add = function (a, b) {
// 익명 함수
return a + b;
};
console.log(add(4, 3));
// 함수 표현식
const multiply = function (a, b) {
return a * b;
};
console.log(multiply(3, 7));
//3. 화살표 함수 arrow function
const add2 = (a, b) => {
return a + b;
};
console.log(add2(3, 4));
const add3 = (a, b) => a + b;
console.log(add3(7, 4));
</script>
</body>
</html>4-7. Inner Html vs TextContent
- addEventListener()
- querySelector()을 사용하여 이벤트 자원(소스) 객체를 const에 할당한다.
- 이벤트 발생 시 실행될 행위를 정의하는 이벤트 핸들러를 정의한다.
- addEventListener()로 이벤트 바인딩을 한다. 이벤트 소스(자원: button, div, span ... ) 에 특정 이벤트(click)가 발생할 때 실행될 함수(이벤트 핸들러를 등록한다.)
- InnerHTML 과 달리 textContainer은 내용이 html 이 아닌 일반 텍스트로 인식된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>javascript event study</title>
<style>
div {
background-color: antiquewhite;
}
span {
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>javascript event addEventListener 함수</h1>
<div id="divTest">div 영역입니다</div>
<!-- block 속성 : width 100% 꽉 채우는 속성 -->
<br /><br />
<!--
<button type="button" onclick="test()">div 테스트</button>
위의 방식을 아래의 이벤트 처리 방식으로 변경 (querySelector()와 addEventListener())
-->
<button type="button" id="divTestBtn">div 테스트</button>
<br /><br />
<span id="spanTest"> span 영역입니다</span>
<button type="button" id="spanTestBtn">span 테스트</button>
<!--
const spanTestElement = ... ;
const spanTestButton = ... ;
// 화살표 함수 arrow function
const changeSpanContent = 화살표 함수 평화로운 화요일입니다
// 이벤트 등록
// addEventListener
-->
<hr />
<h3>innerHTML vs textContent 비교</h3>
<div id="htmlTest">HTML 테스트 영역</div>
<div id="textTest">Text 테스트 영역</div>
<button type="button" id="compareBtn">
innerHTML 과 textContent 차이 보기
</button>
<!-- 인라인 속성 : 컨텐트 사이즈만큼 영역 차지 -->
<script>
// querySelector 함수를 아용해 요소 객체를 리턴받는다
// 구조와 행위를 분리 -> 응집도 증가
/*
기존 방식 : document.getElementById("divTest");
다른 새로운 방식 : document.querySelector("#divTest"); // # 는 아이디를 의미
*/
// DOM 요소 선택
const divTestElement = document.querySelector("#divTest");
const divTestButton = document.querySelector("#divTestBtn");
// div 제어 - arrow function (화살표 함수)
const changeDivContent = () => {
console.log("현재 div 내용:", divTestElement.innerHTML); // 참고 : form 요소는 value
// 기존 div 내용을 변경
divTestElement.innerHTML = "<strong>즐거운 화요일입니다<strong>";
};
// 이벤트 등록 : addEventListener 로 이벤트 등록
// <button onclick="함수 호출"> 의 역할을 아래에서 한다
divTestButton.addEventListener("click", changeDivContent);
/****************span 영역 이벤트 처리***************/
// 이벤트 소스(자원) 선택
const spanTestElement = document.querySelector("#spanTest");
const spanTestButton = document.querySelector("#spanTestBtn");
//이벤트 발생 시 실행될 함수를 정의 (익명 함수 스타일로)
const changeSpanContent = () => {
//console.log("현재 span 내용:", spanTestElement.innerHTML);
spanTestElement.innerHTML = "평화로운 화요일입니다";
};
//이벤트 등록
spanTestButton.addEventListener("click", changeSpanContent);
/****************innerHTML 과 textContent 비교*****************/
/*
1. 이벤트 자원(소스) 객체를 const 에 할당 : querySelector()
2. 이벤트 핸들러 정의 (이벤트 발생 시 실행될 함수(행위)를 정의)
3. 이벤트 바인딩 (이벤트 발생 시 실행될 함수를 요소 객체에 등록) : addEventListener()
*/
// 1. 이벤트 자원(소스) 객체를 const 에 할당 : querySelector()
const htmlTestElement = document.querySelector("#htmlTest");
const textTestElement = document.querySelector("#textTest");
const compareButton = document.querySelector("#compareBtn");
// 2. 이벤트 핸들러(처리 담당자) 정의 (이벤트 발생 시 실행될 함수(행위)를 정의)
// innerHTML 과 textContext 속성(property)을 비교
const compareHTMLvsText = () => {
// 같은 HTML 태그가 포함된 내용을 설정
const content = "<h4>제목</h4><p>내용:<strong>중요 정보</strong></p>";
// 두 요소에 content 를 할당해본다
htmlTestElement.innerHTML = content;
textTestElement.textContent = content; // 차이를 비교해본다 => textContent 는 content 내용이 그냥 텍스트로 인식된다.
};
// 3. event binding 이벤트 소스(자원: 버튼, div, span ...)에 특정 이벤트(click)가 발생할 때 실행될 함수(이벤트 핸들러)를 등록
// 이벤트 : compareButton 버튼을 눌렀을 때 (click event) compareHTMLvsText 이벤트 핸들러가 동작해야 한다
compareButton.addEventListener("click", compareHTMLvsText);
</script>
</body>
</html>- form event selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form event querySelector</title>
</head>
<body>
<h3>form event querySelector</h3>
<div>
<label>이름:</label>
<input type="text" id="userName" placeholder="이름을 입력하세요" />
<span id="nameResult"> </span>
</div>
<div>
<button class="colorBtn">빨강</button>
<button class="colorBtn">초록</button>
<button class="colorBtn">파랑</button>
<div class="colorDisplay">색상이 여기에 표시돼요</div>
</div>
<div>
<!--
attribute selector(속성 선택자) 예제
button 의 type submit 인 버튼을 선택
-->
<br /><br />
<form id="testForm" action="register.jsp">
<button type="button">button 일반버튼</button>
<br /><br />
<input type="text" placeholder="사용자명" />
<button type="submit">submit 전송버튼</button>
</form>
</div>
<script>
// 이벤트 자원(소스)을 자바스크립트 객체로 const 에 저장
const userNameInput = document.querySelector("#userName");
const nameResultElement = document.querySelector("#nameResult");
// 이벤트 자원에 특정 이벤트 발생시 동작할 이벤트 핸들러를 바인딩 (등록)
// 익명 함수 방식
// input event : 입력할 때마다 이벤트 발생
// userName 을 입력할 때마다 실시간으로 nameResult span 영역에 정보를 출력
userNameInput.addEventListener("input", function (event) {
// event.target : 이벤트가 발생한 DOM 요소
const inputValue = event.target.value;
nameResultElement.textContent = inputValue;
});
/***************css selector**************/
// querySelectorAll() : 같은 클래스를 가진 모든 요소를 선택
const colorButtons = document.querySelectorAll(".colorBtn");
console.log(colorButtons.length);
const colorDisplay = document.querySelector(".colorDisplay");
// forEach 를 사용하여 각 버튼에 이벤트 리스너를 등록
// forEach 은 colorButtons 배열 요소의 수만큼 반복하면서 callback function 을 실행한다 (callback function의 의미는 정의 후 실행)
colorButtons.forEach(function (button, index) {
//버튼에 각각 이벤트 핸들러를 등록한다. 아래는 각 버튼에서 click 이벤트 발생하면
//두번째 매개변수인 익명 함수가 클릭 시 실행된다.
button.addEventListener("click", function (event) {
const colorName = event.target.textContent;
//console.log(colorName);
let backgroundColor = "";
switch (colorName) {
case "빨강":
backgroundColor = "#ffebee";
break;
case "파랑":
backgroundColor = "#e3f2fd";
break;
case "초록":
backgroundColor = "#e8f5e8";
break;
} //switch
colorDisplay.textContent = "선택된 색상:" + colorName;
colorDisplay.style.backgroundColor = backgroundColor;
});
});
/******************attribute selector([attribute])****************/
// attribute 로 selector : 특정 속성값을 가진 요소를 선택
// 즉 button 중에서 type이 submit 인 버튼만 alert 가 나오도록 할 수 있다.
const submitButton = document.querySelector("button[type='submit']");
submitButton.addEventListener("click", function (event) {
// 기본 동작(폼 제출)을 막음
// 특정 조건이 충족되지 않을 때 submit 버튼의 전송 동작을 막는다.
event.preventDefault();
// 폼 내의 input 요소를 선택, #testForm 아이디 하위의 input type text 요소를 선택
// testForm 하위의 input 중 type이 text 인 것을 고르기
const textInput = document.querySelector(
"#testForm input[type='text']"
);
alert(textInput.value);
});
</script>
</body>
</html>4-8. forEach 문
// 기존 for 문
for (let i = 0; i < foods.length; i++) {
console.log(`${i + 1}번째 음식: ${foods[i]}`);
}
// forEach 문
foods.forEach(function (food, index) {
console.log(`${index + 1}번째 과일: ${food}`);
});'교육' 카테고리의 다른 글
| 11주차 - Design Pattern (0) | 2025.07.13 |
|---|---|
| 10주차 - Servlet (0) | 2025.07.06 |
| 6, 7, 8주차 - DB와 JDBC (0) | 2025.06.14 |
| 5주차 - Java 객체 지향 프로그래밍 (끝) (0) | 2025.05.25 |
| 3, 4주차 - Java 객체 지향 프로그래밍 (0) | 2025.05.17 |
'교육' Related Articles
more
