본문 바로가기
반응형

전체 글159

자바 스크립트, 배열, 배열함수 ※ 배열 ​ ● 배열 => 대괄호 1. 배열의 선언 let num = [] let arr = new Array() 2. 배열의 생성 num = [1,2,3] arr = new Array(1,2,3) 배열안에 있는 값을 저장, 접근 => 인덱스 번호 배열의 전체 길이 => 배열이름.length ​ ● 배열 : 여러 변수를 하나의 묶음으로 다루는 것 1. 배열의 선언 let arr = [] let arr2 = new Array(10) ※ new Array(배열길이) ** 배열 길이를 설정했어도, 초과 가능 => 공간이 동적, 가변적 ​ ★★ 중요! 무조건! 배열의 선언을 먼저 진행 ​ 2. 배열의 생성 arr = [1,2,3] arr2 = new Array(1,2,3,4,5) console.log(arr2).. 2023. 10. 18.
자바 스크립트 기초, 실행위치 ※ 실행위치 방식 ​ ​ · 내부 방식 head 혹은 body영역에 script 태그를 작성해서 그 안에 js 문법을 사용하는 방법 · 인라인 방식 태그 안에 직접 기능을 넣어줄 때 사용 마우스 올리기! ​ · 외부 방식 외부의 js파일 안에 js문법을 작성한 후 연결 마우스 클릭! //ex12외부.js 파일 function ck(){ alert('외부에서 가지고 온 기능입니다.') } ​ ● 만들어진 마우스 올리기(인라인), 클릭(외부) 버튼 =>마우스 올렸을 때(인라인 방식) =?마우스 클릭했을때(외부 방식) 2023. 10. 18.
자바 스크립트 기초, 조건문, 반복문 ※ 조건문 ※ 조건문 구조 단순 if문 if(조건문){실행명령} if-else문 if(조건문){실행명령} else{실행명령2} ​ 다중 if문 if (조건문){실행명령} else if(조건문){실행명령} ​ Switch문 switch (변수명){ case 값A : 값이 A일 때 실행할 명령문; break; case 값B : 값이 B일 때 실행할 명령문; break; case 값C : 값이 C일 때 실행할 명령문; break; default : 위의 값 A ~ C 모두 아닐때 실행할 명령문; } ​ ex) let num=11 1. num이 10보다 크다면? '10보다 큰 수' 출력 if (num>10){ console.log('10보다 큰 수') } else{ console.log('10보다 작은 수') .. 2023. 10. 18.
자바 스크립트 기초, 연산자, 형변환 ※ 자바 스크립트 연산자 1. '/'=> 실제 나누기 연산 결과 console.log(100/3) '%'=> 나머지 값 console.log(100%3) 2. 비교연산자(==) vs 일치연산자(===) console.log('6'==6) console.log('6'===6) 3. 삼항연산자 참, 거짓에 따라 선택적으로 실행되는 조건문 조건문 ? 선택문1 : 선택문2 조건문 => True => 선택문 1 실행 => False => 선택문 2 실행 let a = 10, b = 20 let res = a>b ? "a가 더 크다" : "b가 더 크다" console.log(res) 1. '/'=> 실제 나누기 연산 결과 console.log(100/3) '%'=> 나머지 값 console.log(100%3) 2.. 2023. 10. 18.
div 가운데 정렬 하는 방법 div 가운데 정렬 하는 방법 정렬 방향 div의 가로만 정렬 div의 세로만 정렬 div의 가로와 세로 모두 정렬 div의 가로만 정렬 가로로 정렬하는 세 가지 방법 text-align 속성 이용 flex 속성 이용 position과 transform 속성 이용 ​ ● text align 속성 이용하여 가로 정렬 HTML display: inline-block text-align: center CSS /* 백그라운드 색깔 및 크기 설정 */ html,body{background:#ddd} .outer{width:400px;height:150px;background:pink} .inner{width:150px;height:150px;background:black;color:white} /* 가운데 정렬 .. 2023. 10. 18.
[CSS] 글자 사이에 구분선 넣기 구체적인 기능 평문 ABCD를 A | B | C | D의 형태로 나타내기 하지만 HTML 자체를 건드리지는 않기 스크린리더가 ABCD를 통째로 인식할 수 있도록 코드가 복잡하지 않도록 구분선은 "접근 가능한 문자"가 아니었으면 스크린리더가 인식하지 않도록 복사했을 때, 보여지는 A | B | C | D가 아니라 원문 ABCD가 복사되도록 ​ ​ 이러한 기능이 필요한 이유 간혹 헤딩을 이러한 형태로 디자인하는 경우가 있는데 시각효과일 뿐인 구분선이 텍스트 형태로 되어있는 경우가 많아서 스크린리더 사용자 입장에서는 제목을 파악하기 어렵겠다는 생각이 들었고 어디론가 내용을 복사해갈 때에도 불필요한 시각효과가 함께 넘어가기 때문에 ​ ​ 방법1: aria-hidden 속성 이용 A | B | C | D 해결된 .. 2023. 10. 18.
반응형