본문 바로가기

전체 글158

[JAVASCRIPT] 문법 정리 - 데이터 저장하기 데이터 저장하기 01 변수 : 데이터 저장 { var x = 100; var y = 200; var z = "javascript"; document.write(x); //100 document.write(y); //200 document.write(z); //javascript } 02 변수 : 데이터 저장 + 데이터 변경 { let x = 100; let y = 200; let z = "javascript"; x = 300; y = 400; z = "jquery"; document.write(x); //300 document.write(y); //400 document.write(z); //jquery } 03 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가 { let x = 100; let y .. 2021. 8. 11.
[JAVASCRIPT] clientX, offsetX, pageX, screenX 1. clientX, clientY 클라이언트 영역 내의 가로, 세로 좌표를 제공한다. 클라이언트 영역은 현재 보이는 브라우저 화면이 기준. clientX : 브라우저 페이지에서의 X좌표 위치를 반환. clientY : 브라우저 페이지에서의 Y좌표 위치를 반환. 2. offsetX, offsetY 이벤트 대상이 기준이 된다.(화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이 된다. 화면이 기준이 아니다) offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환. offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환. 3. pageX, pageY 전체 문서를 기준으로 x,y 좌표를 반환. 스크롤 화면을 포함해서 측정. pag.. 2021. 8. 11.
[CSS] box-sizing html의 모든 요소들은 margin, padding 등 각각의 여백들을 가지며 이 때 width나 height값을 주게 되면 여백값과 더해져서 화면에 나타나게 된다. 이때 요소의 너비와 높이를 계산하는 방법을 지정해주는 것이 box-sizing 속성이다. content-box 요소의 너비와 높이를 설정하면 테두리(border)와 안쪽 여백(padding)은 여기에 더해진다. border-box border와 padding의 크기도 요소의 크기로 고려된다. 2021. 7. 30.
[CSS] em/rem em - 상위 요소 크기의 몇 배인지로 크기를 정한다. Lorem Ipsum Dolor html 요소의 크기는 16px. body 요소의 크기는 상위 요소인 html 요소 크기의 1.5배인 24px. a 크기는 상위요소 body의 24px의 2배인 48px가 된다. rem - 문서의 최상위 요소, html 요소의 크기의 몇 배인지로 크기를 정한다. .a { font-size: 2.0rem; } 글자 크기는 32px가 된다. 2021. 7. 30.
[Javascript] 탭 메뉴, 메뉴 하이라이트 구현하기 basic advanced expert baic plan 첫번째 페이지 입니다. advanced plan 두번째 페이지 입니다. expert plan 세번째 페이지 입니다. https://www.youtube.com/watch?v=c5uvAIxn07c 2021. 7. 29.
[HTML] aria-label aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용한다. text가 화면 표시되지 않을 때 사용하며, 만약 화면에 텍스트가 보인다면 aria-labelledby를 대신 사용한다. ❌ 위와 같은 버튼이 있을 때 보조기기를 사용하는 사용자에게는 대화상자를 닫는 것임을 알려줄 수 있는 것이 없기 때문에 aria-label="Close"를 적어서 보조기기에 레이블을 제공한다. 2021. 7. 29.
반응형

티스토리툴바