째의 개발 기록방

ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. 간단하게 설명을 먼저 하자면 aria-label은 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있고 aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. 1. aria-label 1-1. aria-label은 모든 html 태그에서 사용할 수 있다. 1-2. 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할을 한다. 일반적인 텍스트를 사용해서 영역을 표현하는 경우가 아닌 이미지를 통해 영역을 표현하는 경우 해당 영역이 어떤 영역인지 설명할 ..

GET / POST 두 방식 모두 서버에 요청하는 메소드이다. get 방식은 입력한 데이터 값을 URL에 붙여서 전송하는 방식이다. www.sample.com?name=testName&pass=1234 이런형태로 url 에 key / value 의 형태로 붙어서 주소창에 보여지게 된다. key = name / value = testName key = pass / value = 1234 post방식에 비해 보안이 취약할수있고 간단한 데이터를 넣게 설계돼있어서 길이가 너무 길 경우 오류가 날 수 있다. post 방식은 URL에 값을 붙여서 보내는 get방식과는 다르게 BODY에 데이터를 실어서 보내는 형태이다. 헤더필드중 BODY의 데이터를 설명하는 Content-Type이라는 헤더 필드가 들어가고 어떤 데..

3가지 변수선언 방법과 변수명 규칙 변수명 공통 규칙 - 들어갈수 있는 문자는 한글은 안되며 영문과 숫자 특수문자( _ , $ )만 가능하다. 자바스크립트는 대소문자를 구분한다. 변수명 첫 글자는 $, _, 영문만 가능하다. 첫 글자 다음으로는 영문, 숫자, $, _ 만 가능하다. 1. var (function scope) 유효범위 - 함수 유효 범위 어떤 함수 안에서 선언 된 모든 변수는 그 함수 전체에 걸쳐서 유효하다. 변수명 또는 var 변수명 = 값; 2. let (block scope) 유효범위 - 블록 유효 범위 선언 된 블록, 구문 또는 표현식 내에서만 유효하다. 만약 최상단에 let과 var을 선언했다면 var = 전역객체, let = 범위안에서만 유효. 3. const (block sco..

text-align 속성 inline 이나 inline-block 요소에서만 수직정렬을 위해 사용가능 word-break 속성 내가 보려고 만든 javascript 복습 중 입니다. 내가 보려고 만든 javascript 복습 중 입니다. 내가 보려고 만든 javascript 복습 중 입니다. .wrap p span{ display: inline-block; width: 50%; word-break: break-all; /*글자 기준으로 줄바꿈합니다.*/ word-break: break-word; /*요소의 경계에서 break point가 아니어도 줄바꿈을 합니다.*/ word-break: keep-all; /*단어 기준으로 줄바꿈합니다.*/ word-break: initial; /*기본값으로 설정합니다...

비교연산자 === 는 이항연산자 1===1; 를 consol창에 출력해보면 true라는 값이나온다. 왼쪽에 1과 오른쪽의1이 같다는 말. 1===2; 를 consol창에 출력해보면 false라는 값이나온다. 왼쪽에 1과 오른쪽의2는 다르니까. 불리언(Boolean) 또 다른 비교 연산자로 부등호가 포함된다. script에서는 그냥 꺽쇠로 표현해도 되지만 html에서는 라는 기호로쓴다. * 태그와 혼란을 줄 수 있기 때문에 기호로 쓰는것을 추천. 1+1 > 1+2 이것의 값은 false다. 리팩토링 - this 사용하기 코드의 비효율적인 부분을 찾아내서 고쳐보는 리팩토링 작업 입니다. if(document.querySelector('p').value === 'love') { document.qu..

querySelector querySelector라는 함수를 사용하면 이러한 선택자를 이용해서 원하는 태그를 선택할 수 있습니다. document.querySelector("body") body라는 태그가 선택됨. documnet.querySelector(".javascript") javascript 라는 클래스를 선택할땐 이렇게. documnet.querySelector("#javascript") javascript 라는 아이디를 선택할땐 이렇게. documnet.querySelector("#js").style.backgroundColor = 'black'; js 라는 아이디에 스타일을 적용하고 싶을때. 좀 더 응용하여 버튼에 스타일을 주고싶을땐 이렇게.