반응형
[JS를 이용한 HTML 요소 CSS 변경 속성]
* 요소.style.css속성명 = "속성값";
- 해당 요소에 inline style 형식으로 css 코드 작성됨
- css 속성명은 카멜 표기법 형식으로 작성
- 속성 값은 "" 또는 ''로 감싸져 있어야만 한다
- 속성 값에서 단위(px,% 등)은 필요 시 꼭 작성
---------------------------------------------------
[css 속성명 종류]
backgroundColor -> 배경색
---------------------------------------------------
[css 속성명 종류]
[크기]--------------------------------------------------------
width -> 너비 (px,% 단위 필수)
height -> 높이 (px,% 단위 필수)
[색상]--------------------------------------------------------
backgroundColor -> 배경색
color -> 글자색
[테두리]------------------------------------------------------
border = "굵기 스타일 색상"; -> 테두리 스타일 지정
borderWeight -> 테두리 굵기
borderStyle -> 테두리 스타일
borderColor -> 테두리 색상
[표시 방법]---------------------------------------------------
display -> 표시 방법 변경
(block, inline, inline-block, flex, none)
[flex]--------------------------------------------------------
flexDirection -> 중심축 방향 설정
justifyContent -> 중심축 방향 정렬
alignItems -> 교차축 방향 정렬
[글꼴]--------------------------------------------------------
fontFamily -> 글꼴
fontSize -> 글꼴 크기
fontWeight -> 글꼴 굵기
fontStyle -> 글꼴 스타일(italic)
10_배열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10_배열</title>
<style>
#result6{
width: 300px;
height: 60px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>배열(Array)</h1>
<pre>
- 변수를 묶음으로 다루는 것 (자료구조의 기초)
- JS 배열의 특징
1. 자료형의 제한 X
(여러 자료형을 저장할 수 있다, 하지만 보통 한 가지로 통일)
2. 길이 제한 X
(자동으로 배열의 길이가 늘었다, 줄었다함)
(변수 : 메모리상에 값을 저장하는 공간,
한 가지 자료형, 하나의 값)
3. 배열의 각 요소를 구분하기 위해 index를 이용함
* index(색인) : 각 요소를 구분하는 번호
0 부터 시작
* 배열 요소 : 배열 내 한 칸을 의미
[JS 배열 선언 방법]
1. const arr = new Array();
// -> 0 칸 짜리 배열을 새롭게 생성
* new 연산자 : 새로운 객체를 생성하겠다
2. const arr = new Array(3);
// 3칸 짜리 배열을 새롭게 생성하겠다
// 생성된 각 칸은 처음에는 비어있음(empty)
3. const arr = [];
// 0칸 짜리 배열 생성
* [] : 배열 기호
4. const arr = [값1, 값2, 값3];
// 3칸 짜리 배열을 생성하고
// 각 칸에 지정된 값을 저장( 각 값을 초기화 )
* 변수의 초기화
- 처음으로 값을 대입함
</pre>
<button onclick="check1()">배열 선언 및 기초 사용법</button>
<hr>
<h2>배열 X for문</h2>
<pre>
- 배열에 저장된 요소는 index를 이용해서 다루게 됨
- index는 0 부터 시작해서 배열길이 - 1 까지 1 씩 증가하는
규칙성을 보임
- index 값을 증가시켜 배열 내 모든 요소를 접근하는 방법으로
for문을 활용하는 것이 가장 효율적
</pre>
<button onclick="check2()">배열 X for문 확인1</button>
<button onclick="check3()">배열 X for문 확인2</button>
<button onclick="check4()">배열 X for문 확인3</button>
<button onclick="check5()">배열 X for문 확인4</button>
<hr>
<h3>로또 번호 생성기</h3>
<button onclick="check6()">번호 생성</button>
<p id="result6"></p>
<hr>
<h2>점심 메뉴 뽑기</h2>
<div>
<h3>
오늘의 점심 : <span id="menuResult"></span>
</h3>
<button onclick="selectMenu()">점심 뽑기</button>
</div>
<hr>
<h1>2차원 배열(n차원 배열)</h1>
<pre>
- 1차원 배열 : 변수를 묶음으로 다루는 것
ex) conse arr = [1,2,3,4];
- 2차원 배열 : 1차원 배열을 묶음으로 다루는 것
ex) const arr = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9,10,11,12]
];
2차원 배열에서 index 1개만 작성 시
-> arr[0], arr[1], arr[2]
-> 해당 index의 1차원 배열 1개 선택(행 선택)
2차원 배열에서 index 2개 작성 시
-> arr[0][0], arr[0][1]
-> 해당 첫 번째 index의 1차원 배열에서
두 번째 index 요소 선택(열 선택)
</pre>
<button onclick="check7()">2차원 배열 확인 1</button>
<button onclick="check8()">2차원 배열 확인 2</button>
<script src="../Js/10_배열.js"></script>
</body>
</html>
JS
/** 배열 선언 및 기초 사용법 */
function check1(){
// 배열 선언
const arr1 = new Array();
const arr2 = new Array(3);
const arr3 = [];
const arr4 = ['사과', '딸기', '바나나'];
console.log(arr1, arr2, arr3, arr4);
/* 배열명. length : 배열의 길이 */
console.log(arr1.length, arr2.length, arr3. length, arr4.length);
/* 배열의 각 요소 겁근 방법(index 이용) */
// 배열명[index] -> index번째 요소에 저장된 값을 반환
console.log(`arr4[0] : `, arr4[0]); // 사과
console.log(`arr4[1] : `, arr4[1]); // 딸기
console.log(`arr4[2] : `, arr4[2]); // 바나나
console.log(`arr4[3] : `, arr4[3]);
// 배열명[index] = 값; -> 해당 index번째 요소에 값 대입
arr2[0] = 123;
arr2[1] = '덥다';
arr2[2] = true;
// (JS 배열은 여로 자료형 저장 가능)
console.log("arr2 :", arr2);
// --------------------------------------------------
/* JS 배열 특징 이용하기 */
// 1. 길이 제한이 없다
// -> 원하는 만큼 배열 요소를 추가할 수 있다
arr1[0] = '가나다';
arr1[1] = '라마바';
arr1[2] = '사아자';
console.log("값이 대입된 arr1 : ", arr1);
// 2. 원하는 index에 값을 마음대로 추가할 수 있다
// -> 중간에 건너뛴 index 요소는 빈칸으로 처리됨
arr1[5] = '중간에 건너뜀';
console.log("arr1 확인 : ", arr1);
}
/** 배열 X for 문 확인 1 */
function check2(){
const weeks = ['월','화','수','목','금','토','일'];
// weeks.length == 7
// weeks의 마지막 인덱스 번호 == 6 == weeks 길이 - 1
for(let i = 0; i < weeks.length ; i++){
// 0부터 7미만 (== 6이하)까지 1씩 증가
console.log(weeks[i]);
}
}
/** 배열 X for문 확인 2 */
function check3(){
/* 배열 요소에 순차적으로 값 초기화하기 */
const arr = []; // 빈 배열 생성
// 0 ~ 3 까지 1씩 증가
for(let i = 0 ; i < 4 ; i++){ // 0 1 2 3
arr[i] = prompt(`${i}번째 인덱스 요소 값 입력`);
}
console.log(arr);
}
/** 배열 X for문 확인 3 */
/*
prompt를 이용해서 숫자 5개를 입력 받아 배열에 저장 후
저장된 값, 합계, 평균을 console에 출력하기
ex) 1,2,3,4,5 입력
저장된 값 : [1,2,3,4,5]
합계 : 15
평균 : 3
*/
function check4(){
const arr = new Array(5); // 5칸짜리 배열 생성
let sum = 0; // 합계 저장용 변수
// for 문 작성( 0 ~ 4 까지 1씩 증가)
for(let i= 0 ; i < arr.length ; i++){
// 입력 받자 마자 number 타입으로 변환하여
// 배열 요소에 저장, Number 안씌우면 문자열이기 때문
arr[i] = Number (prompt(`${i}번째 요소에 저장할 숫자 입력`))
sum += arr[i]; // 합계 누적
}
console.log("저장된 값 : ", arr);
console.log("합계 : ", sum);
console.log("평균 : ", sum / arr.length);
}
/** 배열 X for문 확인 4 */
/* 배열에 0부터 배열 길이 미만의 난수 저장하기 */
function check5(){
const leng = Number(prompt("생성할 난수 범위 지정(미만)"));
const arr = []; // 빈 배열 생성
for(let i = 0 ; i < leng ; i++){
// 0 이상, leng 미만의 난수 발생
const randomNumber = Math.floor(Math.random() * leng);
arr[i] = randomNumber;
}
console.log("결과 :", arr);
}
/** 로또 번호 생성기 */
/* 1 ~ 45 사이 난수 6개 생성
단, 중복 X, 오름 차순 정렬
*/
function check6(){
const lotto = []; // 난수 저장할 배열 생성
// 1 ~ 45 사이 난수
for(let i = 0 ; i < 6 ; i++){
const randomNumber = Math.floor(Math.random() * 45 ) +1;
// 일단 배열에 난수 대입
lotto[i] = randomNumber;
// -> 앞에 중복되는 숫자 있는지 확인
for(let x = 0; x < i ; x++){
// 중복 검사
// i번째 저장하려는 값이
// x번째 (앞쪽)에 존재하는가?
if(lotto[x] === lotto[i]){ // 중복 값이 존재!!
// -> 있으면 현재 index에 머물기
// 난수를 저장하기 위한 index를 지정하는
// i값을 1 감소
// -> 바깥쪽 for문의 증감식 i++에 의해 다시 1 증가
// -> 결과적으로 i값 변화 x
i--;
break; // 불필요한 중복 검사 멈춤(효율 UP)
}
}
// -> 없으면 다음 index로 이동
// -> 있으면 현재 index에 머물기
}
// 배열 내 숫자 정렬 방법
lotto.sort(function(a,b) {return a-b});
console.log(lotto);
// 화면에 로또 번호 출력
document.getElementById("result6").innerText = lotto;
}
/** 점심 메뉴 뽑기 */
function selectMenu(){
// 점심 메뉴로 초기화된 배열 생성
const menus = ["라면 + 김밥", "제육볶음"
,"치즈 돈까스", "샐러드", "맘스터치"
,"알탕", "형제네", "SUBWAY", "피자"
,"김밥일번가", "쌀국수", "부대찌개"
,"순대국"];
// menus 배열에서 랜덤으로 하나 뽑아서
// 화면 #menuResult에 출력하기
// 0부터 배열 길이 미만의 정수형 난수를 생성
const randomNumber
= Math.floor( Math.random () * menus.length );
//화면에 출력
document.getElementById("menuResult").innerText
= menus[randomNumber];
}
/** 2차열 배열 확인 1 */
function check7(){
// 2차원 배열 선언 및 초기화
const arr = [
/* arr[0] */[10, 20, 30, 40],
/* arr[1] */[50, 60, 70, 80],
/* arr[2] */[90, 100]
];
console.log("2차원 배열 arr의 길이(행의 개수) : ", arr.length);
console.log("arr의 0번째 인덱스 길이 :", arr[0].length); // 4
console.log("arr의 1번째 인덱스 길이 :", arr[1].length); // 4
console.log("arr의 2번째 인덱스 길이 :", arr[2].length); // 2
/// arr 모든 요소(행)을 for문을 이용해 접근
for(let i=0 ; i<arr.length ; i++){
// console.log(arr[i]);
let str = ''; // 문자열 누적''; , 숫자넣으려면 0;
// arr[i] 요소에 저장된 배열의 모든 요소 접근
for(let x=0 ; x<arr[i].length ; x++){
// arr[i].length : i번째 요소(베열)의 길이
// -4,4,2 순서
str += `(${arr[i][x]}) `;
}
console.log(str);
}
}
/** 2차원 배열 확인 2 */
function check8(){
/* 4행 4열짜리 2차원 배열에 0~99 사이 난수 배치 */
// 배열 생성
const arr = [];
// 난수를 2차원 배열에 대입
for(let row=0 ; row<4 ; row++){//행 반복
arr[row] = []; // 행 생성
for(let col=0 ; col<4 ; col++){//열 반복
// 난수 생성
const randomNumber = Math.floor(Math.random() * 100);
// 2차원 배열에 대입
arr[row][col] = randomNumber;
}
}
// 콘솔창 출력용 2중 for문
for(let row = 0; row < arr.length ; row++){
let str = '';
for(let col = 0; col < arr[row].length ; col++){
str += `${arr[row][col]} `;
}
console.log(str); // 한 줄 출력
}
console.log(arr);
const search = Number(prompt('찾으려는 값 입력'));
// 2차원 배열(arr) 내에서 입력 값(search) 찾기
for(let row = 0; row < arr.length ; row++){
for(let col = 0; col < arr[row].length ; col++){
if(arr[row][col] === search){
console.log(`${row}행 ${col}열애 ${search}가 존재합니다`);
}
}
}
}
11_ 요소접근방법
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11_요소접근방법</title>
<link rel="stylesheet" href="../css/11_요소접근방법.css">
</head>
<body>
<h1>DOM(Document Object Model)</h1>
<pre>
- HTML 문서를 객체 기반 형식으로 표현한 것
-> HTML 문서에 작성된 내용을
트리 구조(계층형 구조)로 나타낸 객체
Document == HTML 문서
document : {
DOCTYPE : html,
HTML : {
HEAD : {
TITLE : {TEXT : "제목"},
LINK : {rel : :"stylesheet", src : "경로" }
},
BODY : {
H1 : {1d : "id1", class : "test1" , TEXT "제목"}
}
}
}
</pre>
<hr>
<h1>DOM을 이용한 요소 접근 방법</h1>
<pre>
1. id로 접근하기 : document.getElementById("id속성값");
-> 아이디가 일치하는 요소(객체)를 얻어옴
* id 속성 : HTML에서 id 속성 값은 중복 X
-> 값이 하나만 존재
-> 단수 (Element) 형태로 작성
2. class로 접근하기 : document.getElementsByClassName("class속성값");
-> 클래스가 일치하는 모든 요소를 얻어와 (유사)배열 형태로 반환
3. name으로 접근하기 : document.getElementsByName("name속성값");
-> name이 일치하는 모든 요소를 얻어와 배열(NodeList, 유사배열) 형태로 반환
4. tag로 접근하기 : document.getElementsByTagName("tag명");
-> 태그가 일치하는 모든 요소를 얻어와 배열 형태로 반환
5. CSS 선택자로 접근하기
1) document.querySelector("CSS 선택자");
-> 선택자가 선택한 요소 중 첫 번째 요소를 반환
2) document.querySelectorAll("CSS 선택자");
-> 선택한 요소 모두를 배열(NodeList, 유사배열) 형태로 반환
</pre>
<hr>
<h3>class를 이용한 요소(DOM 객체) 접근 방법</h3>
<button onclick="classTest()">배경색 변경</button>
<div class="cls-test">green</div>
<div class="cls-test">yellow</div>
<div class="cls-test">red</div>
<div class="cls-test">blue</div>
<div class="cls-test">pink</div>
<div class="cls-test">black</div>
<div class="cls-test">gold</div>
<hr>
<h3>input에 입력된 숫자 모두 얻어와 합계 구하기</h3>
<div class="flex-container direction-column">
<input type="number" class="cls-test2">
<input type="number" class="cls-test2">
<input type="number" class="cls-test2">
<input type="number" class="cls-test2">
<input type="number" class="cls-test2">
<button onclick="classTest2()">합계 구하기</button>
</div>
<hr>
<h1>태그명으로 요소 접근 하기</h1>
<ul>
<li>red</li>
<li>yellow</li>
<li>skyblue</li>
<li>navy</li>
</ul>
<button onclick="tagNameTest()">태그명 접근</button>
<hr>
<h1>name으로 요소 접근하기</h1>
<pre>
- name 속성은
input 또는 input 관련 요소(select, textarea)만
기본 속성으로 가지고 있음
* input 요소를 한 번에 접근하는 용도
</pre>
<table>
<tr>
<td>
<input type="checkbox" name="hobby" id="game" value="게임">
<label for="game">게임</label>
</td>
<td>
<input type="checkbox" name="hobby" id="music" value="음악감상">
<label for="music">음악감상</label>
</td>
<td>
<input type="checkbox" name="hobby" id="movie" value="영화감상">
<label for="movie">영화감상</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="hobby" id="coding" value="코딩">
<label for="coding">코딩</label>
</td>
<td>
<input type="checkbox" name="hobby" id="exercise" value="운동">
<label for="exercise">운동</label>
</td>
<td>
<input type="checkbox" name="hobby" id="book" value="독서">
<label for="book">독서</label>
</td>
</tr>
</table>
<!-- 선택된 취미만 출력 -->
<div class="name-div"></div>
<button onclick="nameTest()">선택된 취미만 출력</button>
<hr>
<h1>CSS 선택자를 이용한 요소 접근 방법</h1>
<!--
target-div 속성은 만들어낸 속성(기본 속성 X)
-->
<div target-div="css-div">
<div>test1</div>
<div>test2</div>
</div>
<button onclick="cssTest1()">css 선택자로 요소 접근</button>
<hr>
<h3>카카오톡 모양의 채팅 화면 만들기</h3>
<div class="chatting">
<!-- 채팅이 표시되는 화면 -->
<div id="chattingBackground">
<p>
<span>입력된 채팅 내용 출력</span>
</p>
<p>
<span>입력된 채팅 내용 출력</span>
</p>
</div>
<!-- 채팅 입력 영역 -->
<div id="chattingInput">
<input type="text" id="userInput">
<button onclick="readValue()">입력</button>
</div>
</div>
<script src="../Js/11_요소접근방법.js"></script>
</body>
</html>
css
.cls-test{
width: 400px;
height: 50px;
border: 1px solid black;
}
.flex-container{
display: flex;
width: 300px;
}
.direction-column{
flex-direction: column;
}
.name-div{
width: 300px;
height: 100px;
border: 1px solid black;
}
/* 카카오톡 모양 만들기 */
/* 채팅 관련 모든 요소 */
.chatting, .chatting *{
box-sizing: border-box;
padding: 0;
margin: 0;
/* 간단하면서도 중요한 세팅
패딩마진0으로 구분하기쉽게
*/
}
/* 채팅 전체를 감싸는 요소 */
.chatting{
width: 300px;
border: 1px solid black;
margin: 50px 20px;
}
/* 채팅 출력 화면 */
#chattingBackground{
width: 100%;
height: 400px;
/* 색상 작성법
1) 색상 영문
2) #fff. #ffffff #ffffffff 16진수
3) rgb(0,0,0), rgba(0,0,0,0)
4) hsl(0,0,0)
*/
background-color: rgb(178,199,217);
/* overflow : 내부 내용이 감싸는 요소를 넘칠때에 대한 속성
- auto : 넘치기 전 -> 스크롤 X / 넘친 후 -> 스크롤 생성
- hidden : 넘친 부분을 숨김
*/
overflow: auto;
}
/* 채팅 내용 */
#chattingBackground > p{
margin: 0 10px 20px;
padding: 5px;
text-align: right;
}
#chattingBackground >p >span{
background-color: rgb(254, 234, 51);
padding: 5px;
border-radius: 5px;
}
/* 입력 부분 */
#chattingInput{
width: 100%;
height: 22px;
display: flex;
}
#chattingInput > input{
height: 100%;
flex-grow: 1;
outline: none;
padding-left: 5px;
}
#chattingInput > button{
height: 100%;
width: 10%;
}
JS
/** class를 이용한 요소(DOM 객체) 접근 방법 */
function classTest(){
/* 유사 배열이란?
배열처럼 index, length를 가지고 있으나
배열 전용 기능(메서드)를 제공하지 않음
*/
// 클래스가 cls-test인 요소를 모두 얻어와
// HTML Collection (유사 배열)형태로 얻어옴
const divs = document.getElementsByClassName("cls-test");
// 0부터 divs 길이 미만까지 반복
for(let i=0; i<divs.length ; i++){ // i == 0,1,2
// 요소.innerText = '값; // 요소 내용으로 "값"대입
// 요소.innerText; // 요소 내용 얻어오기
console.log(divs[i].innerText); // 작성된 내용(색상)
// i번째 요소의 배경색을 작성된 내용으로 변경
divs[i].style.backgroundColor = divs[i].innerText;
}
}
function classTest2(){
/*
input 요소에 입력된 값 얻어오는 방법
-> input요소.value
HTML 요소에서 얻어온 값의 자료형은
모두 String(문자열)
합계 구하는 방법
-> let sum = 0; 선언 후 누적
HTML 문서에서 class 속성값이 일치하는 요소 모두 얻어오기
-> document.getElementsByClassName("class속성값")
-> HTMLCollection (유사배열) 형태로 변환
*/
let sum = 0;
// 클래스가 "cls-test2"인 요소를 모두 얻어옴
// ->HTMLCollection (유사 배열) 형태로 변환
const numbers = document.getElementsByClassName("cls-test2")
console.log(numbers);
for(let i=0 ; i <numbers.length ; i++){
// numbers[i]; == input 요소 하나
//읽어온 값을 숫자로 변환해 sum에 누적
sum += Number(numbers[i].value)
}
alert(`합계 : ${sum}`);
}
/** 태그명으로 요소 접근하기 */
function tagNameTest(){
/* document.getElementsByTagName("태그명") */
const tagList = document.getElementsByTagName("li");
// -> 요소 4개짜리 배열 반환
// i == 0,1,2,3
for(let i=0 ; i<tagList.length ; i++){
// tagList[i].innerText : 작성된 내용(색상)
// 글자색 변경
tagList[i].style.color = tagList[i].innerText
// 테두리 변경(굵기 스타일 색상)
tagList[i].style.border = `3px solid ${tagList[i].innerText}`;
}
}
function nameTest(){
/* document.getElementsByName("name 속성값")
-> NodeList (유사 배열) 반환
*/
// name 속성 값이 "hobby"인 요소를 모두 얻어와 저장
const hobbyList = document.getElementsByName("hobby");
let str = ''; // 체크된 input의 value를 누적
let count = 0; // 체크된 input의 개수를 카운트
// i == 0,1,2,3,4,5 (길이는 6, 마지막 인덱스는 5(길이-1))
for(let i=0 ; i<hobbyList.length ; i++){
/* 요소.checked -> checkbox, radio 타입 전용 속성
요소.checked = true; -> 해당 요소 체크
요소.checked = false; -> 해당 요소 체크 해제
요소.checked; -> 체크 여부 반환
(체크O -> true, 체크X -> false)
*/
// i번째 input 요소가 체크되어 있을 경우
if(hobbyList[i].checked === true){
// console.log(hobbyList[i].value);
str += `${hobbyList[i].value} `; // value 누적
count++; //count 1증가
}
} // for end
// 클래스가 name-div인 요소에 str, count 출력
// document.getElementsByClassName("name-div")
// -> 요소가 1개밖에 없어도 배열 형태로 반환 <s가들어가면 무조건 배열>
// 요소가 1개 밖에 없음 == 0번 인덱스만 존재
// -> 0번 인덱스만 별도 변수에 저장해서 사용
const div = document.getElementsByClassName("name-div")[0];
div.innerHTML
= `${str} <br><br>선택된 취미 개수 : ${count}개`;
}
/** css선택자로 요소접근 */
function cssTest1(){
// target-div 속성 값이 css-div인 요소 하나 선택
const container = document.querySelector('[target-div = css-div]')
container.style.width = "200px";
container.style.height = "200px";
container.style.border = "10px solid orange";
// target-div 속성 값이 css-div인 요소의
// 자식 중 div 요소를 모두 선택해 얻어옴
const divs
= document.querySelectorAll('[target-div = css-div]>div');
// i == 0,1
for(let i=0 ; i<divs.length ; i++){
divs[i].style.height = "50%"; //divs의 i번째 요소에 주는거
divs[i].style.display = "flex";
divs[i].style.justifyContent = "center";
divs[i].style.alignItems = "center";
}
// index 별로 배경색 따로 지정(for 문 밖에다 따로써야함)
divs[0].style.backgroundColor = "pink";
divs[1].style.backgroundColor = "skyblue";
// divs 사용하지 않고
// test1이 작성된 요소를 선택해
// fontSize = "30px"로 변경
/* querySelector */
// "[target-div = css-div] > div "들 중에서
// 첫 번째 요소만 선택
const test1 = document.querySelector('[target-div = css-div] > div')
test1.style.fontSize = "30px";
}
/* 카카오톡 채팅 만들기 */
function readValue(){
/* 채팅이 출력되는 화면 */
const bg= document.querySelector('#chattingBackground')
/* 채팅이 입력되는 input */
const input = document.querySelector('#userInput');
/* 입력된 값이 없을 경우
1) 진짜 작성 X
2) 작성된 내용이 모두 공백 문자(띄어쓰기, 탭, 엔터)
문자열.trim() : 문자열 좌우 공백을 제거 (중간 공백 X)
*/
if(input.value.trim().length === 0){
alert("채팅 내용을 입력해 주세요");
input.value= ''; //입력된 공백 제거
input.focus(); // input에 다시 포커스 맞춤(커서 활성화)
return; // 함수를 "즉시 종료"하고 호출한 곳으로 돌아감
}
bg.innerHTML += `<p><span>${input.value}</span></p>`;
input.value = ''; // 이전 입력 내용 제거
input.focus(); // input에 다시 포커스 맞춤(커서 활성화)
// bg.scrollHeight : 스크롤되어 가려진 부분까지 포함한 전체 높이
// bg.scrollTop : 스크롤 위쪽 부분의 현재 위치
// bg.scrollTop = 값 : 스크롤 위쪽 부분을 "값" 부분으로 이동
// (값이 스크롤 높이를 초과하면 제일 아래로 이동)
// 채팅 화면 제일 아래로스크롤 이동
bg.scrollTop = bg.scrollHeight;
}
/* #userInput에서 키보드로 값 입력 중
"Enter" 입력이 감지되는 경우 readValue() 함수 호출
*/
document.querySelector("#userInput")
.addEventListener("keydown",function(e){
/* 콘솔에서 입력된 키 확인 */
// console.log(e.key);
if(e.key === "Enter"){
readValue(); // 함수 호출
}
});
반응형