요모조모

🍰 WAI-ARIA 속성들 정리ARIA 속성 유형Widget 속성 - 웹 페이지의 상호 작용 요소를 식별하고 기능을 정의Live region 속성 - 웹 페이지의 내용이 동적으로 업데이트되는 영역을 식별하고 스크린 리더에 알림Drag-and-Drop 속성 - 웹 페이지에서 드래그 앤 드롭 기능을 구현하고 접근성을 향상시킴Relationship 속성 - 웹 페이지의 요소들 간의 관계를 정의하고 의미를 명확하게 전달함aria-haspopup - 해당 요소와 연결된 팝업 창이나 메뉴가 있는지 여부 나타냄true - 요소에 연결된 팝업이 있음false - 요소에 연결된 팝업이 없음(기본값)aria-controls - 현재 요소가 제어하는 요소(들)을 식별함ex. 탭 패널을 제어하는 탭과 같이 다른 요소를 제어..

🍰 Pre Built-in과 Utility-first는 뭐고 차이는 무엇인가?: CSS 프레임워크와 스타일링 접근 방식에서 중요한 개념🍴 Pre Built-in: CSS 프레임워크가 미리 정의된 스타일과 컴포넌트 세트를 제공하는 접근 방식미리 정의된 스타일과 컴포넌트 - 버튼, 폼, nav바 같은 UI 요소들이 미리 스타일링 되어 제공됨일관된 디자인 - 프레임워크 내의 모든 컴포넌트가 동일한 디자인 패턴 따름쉽고 빠른 개발 - 미리 준비된 것들을 사용하여 개발 속도 높임ex) Bootstrap, Bulma, Foundation🍴 Utility-first: CSS 클래스를 통해 작은 스타일 단위(유틸리티 클래스) 제공, 이들을 조합해 원하는 스타일 만들어감작은 단위의 클래스 - 각 클래스는 하나의 특..

🍰 주석: SCSS, Sass 구문 간 주석이 작동하는 방식이 다름. // 컴파일 된 CSS 파일에 출력 X/* 컴파일 된 CSS 파일에 출력 O but 압축 모드에서는 X *//* 이 주석은 인터폴레이션도 포함 O* 9 + 7 = #{9 + 7} *//*! 이 주석은 압축 모드에서도 출력 O */🍰 변수(variables): Sass 가 제공하는 변수 구문은 독자적인 방식으로 웹 브라우저가 해석할 수 없음. 아래 코드는 SCSS 변수. 🍰 중첩 규칙(nested rules): Sass는 HTML과 동일한 시각적 계층 구조를 따르는 방식의 스타일 작성 방법 지원단, 무리한 중첩은 복잡성 증대시켜서 피해야 함.🍰 믹스인(mixins): 재사용할 코드 그룹 선언 가능🍰 인자: 자바스크립트 함수처럼 ..

🍰 설치하기Node.js 설치 완료 후 sass 패키지를 설치한다. 실습에서는 로컬로 설치했다.npm i -D sass-D는 --save-dev의 약자: Sass 패키지를 개발 의존성(devDependency)으로 설치한다는 의미.개발 의존성: 프로젝트의 개발 단계에서만 필요한 패키지 설치. 프로덕션 환경에서는 이 패키지들 필요 없음.목적: 테스트, 빌드, 도구, 린팅, CSS 전처리기 등 개발 중에만 필요한 도구들을 관리 할 때 사용함.-D 사용해서 설치 시 package.json 파일의 devDependencies 항목에 추가됨.=> package.json, dependencies가 뭐지? https://kellyjs.tistory.com/33설치 후 파일 두 개와 폴더가 생김🍰 컴파일 명령어: ..

🍰 주 축 기준 배치 방법 지정justify-contentflex-start : 주축의 시작점 기준 배치flex-end : 주축의 끝점 기준 배치center : 주축의 중앙 기준 배치space-between : 첫 항목은 시작점, 끝 항목은 끝점, 중앙 항목은 같은 간격으로 배치space-evenly : 모든 항목을 같은 간격으로 배치space-around : 각 항목은 양쪽 여백의 절반만큼 나누어 가짐See the Pen space around by 구르미 (@xicpablj-the-sasster) on CodePen.🍰 교차 축 기준 배치 방법 지정align-itemsstretch : flex item을 확장해 교차축을 꽉 채움. 기본값flex-start: 교차축의 시작점 기준 배치flex-en..

🍰 Flexbox란?1차원 콘텐츠용으로 설계된 레이아웃 모델아이템 간 공간 배분, 강력한 정렬 기능 제공하기 위해 설계됨왜 1차원이라고 하는가? -> 한 번에 하나의 차원(행 or 열)만 다룸. Grid Layoutflex container로 flex item들을 묶어야 함  🍰 flex 방향 지정하는 flex-direction 속성flex-direction 속성으로 설정한 축 = 주 축(main axis)주 축에 수직인 축 = 교차 축(cross axis)row => 주 축은 행(가로), 교차 축은 열(세로) - 기본값row-reverse => flex-item은 주축 끝점에서 시작점으로(오른쪽 -> 왼쪽) 배치column => 주 축은 열(세로), 교차 축은 행(가로)column-reverse..

🍰웹 접근성(Web Accessibility)🍴 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것.  신체적 조건 - 장애인, 고령자 등을 포함한 모든 사용자 환경적 조건 - 다양한 기기(운영체제, 웹 브라우저 등) 🍰웹 접근성 가이드라인(WCAG) 🍴 Web Content Accessibility Guidelines, 웹 사이트/애플리케이션에서 충족해야 하는 기준 정의.인식 가능하고(perceivable) - ex) img의 alt속성 사용조작 가능하며(operable) - ex) div 사용 시 tabindex="0"이해 할 수 있고(understandable) - ex) 사용 견고 해야 함(robust) - ex) 사용자가 이용하는 모든 기기 및 브..

CSS 박스 모델에서의 margin과 padding, border란 무엇인가? border - 박스의 테두리 border 생성: 1px solid black 너비, 스타일 색상 순서 border는 block과 inline 모두에 적용 margin - 박스의 경계 바깥의 공간 순서: 위 - 오른쪽 - 아래 - 왼쪽 margin: 5px; /* 상하좌우 모두 적용 */ margin: 5px 10px; /* 위아래 5px10px, 좌우 */ margin: 5px 10px 15px; /* 위 5px, 좌우 10px, 아래 15px */ margin: 5px 10px 15px 20px; /* 위, 오른쪽, 아래, 왼쪽(시계방향) */ padding - 박스의 경계로부터 안쪽의 공간 margin과 마찬가지로 위, ..

block 다른 요소가 옆에 오지 못 함 inline 다른 요소가 옆에 올 수 있음 같은 줄에 위치할 수 있음(in the same line) block이 inline과 다른 특징 너비와 높이를 가질 수 있음 margin - 박스의 border(경계) 바깥에 있는 공간 padding border block -> inline, inline -> block으로 변경은 어떻게? inline -> block display 속성 변경(기본값은 inline) span { display: block; } block -> inline div { display: inline; }