본문 바로가기
반응형

분류 전체보기158

자바 스크립트 기초, 실행위치 ※ 실행위치 방식 ​ ​ · 내부 방식 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.
반응형 웹 만드는 법 (디바이스 종류별 width값) ● 반응형 웹을 만드는 방법 반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법으로 판단하여 반응형 웹인지 아닌지를 판단할 수 있는 것이 아닙니다. 흑과 백에 더해 회색도 있어 얼마나 다양한 디바이스 화면과 다양한 사이즈에 대응하고 있는지에 따라 흑에 가까워질 수도, 백에 가까워질 수도 있습니다. 그럼에도 불구하고 우리는 반응형 웹이라고 부를 수 있는 기준이 필요합니다. 통상적으로 다음 두 가지 조건에 대해 어느 정도 크게 만족하고 있으면 반응형 웹이라고 부릅니다. 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면을 제공한다. 같은 디바이스여도 유저가 사용하기에.. 2023. 10. 18.
반응형