분류 전체보기
-
display flexcss 2023. 6. 16. 17:59
flex의 기본 구조 flex container : 부모 요소로 flex의 영향을 받는 전체 영역 flex item : 자식 요소로 flex의 속성에 따라 각각의 아이템들이 배치되는 것 container에 적용하는 속성 display display: flex; : flex 아이템들이 가로로 배치되고 자신이 가진 내용물의 width 만큼 공간을 차지함 : height는 컨테이너의 높이만큼 알아서 늘어남 display: inline-flex; : inline-block처럼 동작함 : 아이템 배치와 관련있다기 보다 컨테이너와 관련 있으며 컨테이너가 주변 요소들과 어떻게 어우러질지 결정함 flex-direction 배치 방향 설정 flex-direction: row; : 아이템들이 가로 방향으로 배치 flex-..
-
counter-reset, counter-incrementcss 2023. 6. 16. 17:27
counter-reset과 counter-increment란? : css를 이용하여 특정 요소에 숫자를 생성하며 자동으로 번호를 매기는 속성 counter-reset : 번호를 붙이려는 부모 요소에 counter-reset으로 이름과 시작값을 설정 : 요소 { counter-reset : 카운터 이름 시작값 } : 요소 { counter-reset : initial } 초기화 : 요소 { counter-reset : none } 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) : 시작값 숫자를 지정하지 않으면 기본값은 0 counter-increment : 번호가 붙을 요소에 설정한 값을 증가시키는 역할 : 요소 { conter-increment: 카운터 이름 증가할 숫자 } : 요소 { cou..
-
tabindexhtml 2023. 6. 16. 14:18
tabindex란? : tab을 눌렀을 때 포커스 이동 순서를 임의로 조정할 수 있는 html의 속성 : tabindex의 값은 양의 정수가 들어감 : 일반적으로 tab을 눌렀을 때 포커스는 html의 마크업 순서에 따라 사용자와 상호작용이 가능한 요소(tab으로 포커스를 가질 수 있는 요소)들로 이동함 사용자와 상호작용이 가능한 요소 : input select button 같은 form 관련 요소와 a 태그 사용자와 상호작용이 가능한 요소들에는 기본적으로 키보드로 포커스가 잡히게 되어 있음 tabindex를 사용하는 경우 : tabindex는 마크업 순서가 논리적으로 잘 구성되어 있는 경우 사용할 필요가 없음 : 웹페이지를 구성하다 보면 불가피한 경우로 디자인을 위해 논리적이지 않은 요소를 만드는 경우..
-
WAI-ARIAWAI-ARIA 2023. 6. 16. 13:48
WAI-ARIA란? Web Accessibility Initiative – Accessible Rich Internet Applications WAI : W3C에서 웹 접근성을 담당하는 기관 ARIA : RIA 환경의 웹 접근성에 대한 표준 기술 규격 의미 RIA : 정적인 html, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서의 수준 높은 ux를 제공하는 웹 어플리케이션 : 스크린리더와 같은 보조 기술을 사용하는 사용자가 브라우저를 읽을 떄 각 요소가 어떤 역할을 하고 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술 : 자바스크립트나 그 외 다른 언어들을 사용한 동적인 페이지를 새로고침 하지 않아도 페이지의 내용과 데이터가 어떻게 바꼈..
-
ariaWAI-ARIA 2023. 6. 16. 13:15
- aria-controls : aria-controls는 선택한 요소에 영향을 받는 하위 요소가 현재 포커스 한 라인과 떨어져 있을 경우 스크린리더 사용자가 하위 요소가 열린 위치를 파악하기 어려우므로 관련된 하위 요소로 바로 이동할 수 있도록 해 주는 역할. : tab 역시 특정 tab을 선택한 경우 tab 패널이 시작되는 부분으로 바로 이동할 수 있도록 aria-controls를 포함. : tab의 aria-controls와 해당 패널의 id값을 같게 해주기 - aria-selected : 선택된 tab은 스크린리더 사용자에게 선택된 tab임을 알려주어야하므로 aria-selected = "true"/"false"를 사용하여 선택된 tab 요소를 알려줌 - aria-labelledby : 화면에 현..
-
Arrayjavascript 2023. 4. 13. 18:22
* arr.splice(n, m) : 배열의 특정 요소를 지움, n번째부터 m개를 지움 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); console.log(arr);//[1, 4, 5] * arr.splice(n, m) : 배열의 특정 요소를 지우고 그 사이에 추가 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); console.log(arr);//[1, 100, 200, 5] /*두번째 인수에 0을 넣으면 아무것도 지우지 않고 중간에 새로운 요소 추가 가능함*/ let arr = ["나는", "철수", "입니다"]; arr.splice(1, 0, "대한민국", "소방관"); console.log(arr);//["나는", ..
-
String 문자형javascript 2023. 4. 13. 16:46
* `` 여러줄 표현가능 /*``을 사용하면 여러줄 표현 가능*/ let desc = `오늘은 맑고 화창한 날씨가 계속 된다`; /*''를 사용하면 줄바꿈을 할때 \n을 사용해야함, 줄바꿈을 하면 오류가 남*/ let desc = '오늘은 맑고 화창한\n날씨가 계속 된다'; let desc = '오늘은 맑고 화창한//error 날씨가 계속 된다'; * length : 배열과 동일하게 문자열의 길이를 접근 가능 let desc = '안녕하세요.'; desc.length//6 * 배열과 동일하게 문자열도 [ ]와 숫자로 특정 위치에 접근 가능, 배열과 동일하게 0부터 시작, 하지만 배열과 다르게 한글자만 바꾸는 것은 안됨 let desc = '안녕하세요.'; desc[2]//'하' /*한글자만 바꾸는것 불가..