빵 입니다.

HTML의 각각의 요소들은 유사한 특성을 가진 요소들이 그룹화 된 0개 이상의 카테고리(범주)에 속해있다. 이 스펙에서는 광범위한 카테고리가 사용된다. Metadata content (메타데이터 콘텐츠) 문서의 표현, 동작을 수정하거나 다른 문서를 가리키는 링크 설정하거나 기타 “대역 외 정보”를 전달한다. , , , , , , Flow content (플로우 콘텐츠) 제목 요소, 구획 요소, 구문 요소, 임베딩 요소, interactive 요소 그리고 Form 관련 요소를 포함하여 요소에 들어 갈 수 있는 대부분의 요소를 포함하는 광범위한 영역 보통 텍스트나 내장 콘텐츠를 포함한다. , , , , , , ,, (en-US), , , , , , , , , , , , , , , , , , , , , , ,..

font-size 속성은 폰트의 크기(대문자 “M”의 크기)를 지정한다. em em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때의 기본값 웹 브라우저에서 1em = 16px rem CSS3에서 새로 등장한 rem = root em root 요소는 rem 단위는 요소에 지정된 글꼴 크기로부터 ~ 선택된 요소의 글꼴 크기를 상대적으로 결정한다. em vs rem em은 부모 요소에 상대적으로 글꼴 크기를 상속받는다. rem은 root 요소()에 상대적으로 글꼴 크기를 상속받는다. em em은 부모로부터 글꼴을 물려받기 때문에, 같은 값을 지니더라도 노드가 깊어지면 글꼴 크기가 무한히 작아진다. => 부모, 조상 노드 가운데 어떤 요소의 글꼴 크기를 변경하면 자식, 자손 요소 모두가 영향받는다. => ..

절대 단위 다른 것과 관련 없이 일반적으로 항상 동일한 크기 대부분 화면 출력이 아닌 인쇄에 사용될 때 유용하다. 보통 사용하는 유일한 값은 px cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 단위 다른 요소(상위 요소의 글꼴 크기 또는 viewport 크기)와 관련 있다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 계획할 수 있다. em 요소의 글꼴 크기 ..

CSS Postprocessor(후처리기) SCSS로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환한다. 장점 모듈식 사용 필요한 플로그인만 포함하여 사용할 수 있다. 전체를 다 포함하지 않아도 되므로 속도가 빠르다. (해당 페이지에 필요한 모듈만 갖다쓸 수 있다는…) JavaScipt 기반 필요한 플러그인을 직접 개발할 수 있다. CSS 표준 문법 기반 CSS 작성을 위해 별도로 학습할 필요가 없다. 단점 (Sass에 비해) 강력한 문법을 제공하지 않는다. 필요한 플러그인을 직접 찾아서 조립해야 한다. 플러그인 지원 중단될 수 있다. 웹팩 사용 시 설정 // webpack.dev.js const path = require('path'); ..

:read-only vs readonly :read-only 가상 클래스 요소를 사용자가 변경, 컨트롤 할 수 없다. input, textarea 제외한 모든 요소에서 사용 가능 readonly 속성 요소를 사용자가 변경, 컨트롤 할 수 없다. input, textarea 에만 적용 가능 📌 input, textarea 에 readonly 속성이 있으면 :read-only 가상 클래스 사용이 가능하다. 📌 input[readonly] 를 사용해 readonly 속성 들어간 요소에만 css를 줄 수 있다. readonly vs disabled readonly 속성 input, textarea 에만 적용 가능 포커스 받을 수 있다. (Tab키 사용 가능) 서버로 값이 전달된다. disabled 속성 butt..

ruby-sass? libsass?? node-sass??? dart-sass???? sass-loader?????????? 무엇을 설치해야 하는지 모르겠어서 정리를 해봤다. Sass(SCSS)를 사용하기 위해 어떤 걸 설치할까? Sass(SCSS)는 Ruby 기반이다. (Ruby-sass) - Ruby on rails 설치 후 사용 Ruby 아닌 다른 환경에서 사용하려면, C/C++ 언어 기반의 Libsass 를 사용해야 한다. (Ruby 기반보다 컴파일이 빠른 장점이다.) Node 환경에서 사용하려면, Node-sass가 필요하다. Sass(SCSS) 파일을 로드하고, 컴파일 해주기 위해서 Webpack의 Loader인 Sass-loader와 함께 쓰면 된다. 그러나! 2020년부터 Libsass, ..

Mysql을 쓸 땐, 자동으로 컬럼의 숫자 값 증가하게 하기 위해 auto_increment 를 유용하게 사용했다. CREATE TABLE users ( id INT NOT NULL AUTO_INCREMENT, name CHAR(30) NOT NULL, PRIMARY KEY (id) ); MongoDB에는 같은 기능이 없다. 그래서 함수를 만들어 따로 구현해주어야 한다. ...더보기 MongoDB에서 auto-increment를 제공하지 않는 이유 같은 이유 MongoDB에서 _id 필드나 다른 어떤 필드를 위한 auto-increment 패턴을 사용할 필요가 없다. auto-increment 패턴을 사용하면 데이터베이스에 많은 documents가 있을 경우 확장성이 떨어진다. 기본값인 ObjectId ..

1. MongDB 설치하기 MongoDB 공식 홈페이지의 다운로드 페이지에서 설치 프로그램(MongoDB Community Edition)을 다운로드한다. 아래의 경로에 설치된다. C:\Program Files\MongoDB\Server\4.0\bin\ ※ ↑ 해당 버전에서 Compass(MongoDB GUI)를 설치할 경우, 제대로 설치가 완료되지 않아, 체크박스를 풀고 설치함. ...더보기 MongoDB를 설치하기 위해 여러 글들을 보았다. MySQL이나 MSSQL과 달리 윈도우 서비스 등록을 수동을 해주어야하고, 환경 설정 파일을 만들어 주어야한다고 명시되어 있었다. 하지만 MongoDB 4.0부터 하지 않아도 된다. ※ 윈도우 서비스 등록하기 ===> MongoDB 4.0부터는 설치하는 동안 Wi..

data-*속성은 HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성을 조작 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다. data-*속성은 사용자가 직접 data- 로 시작하는 속성을 만들 수 있다. data- 뒤에 원하는 이름을 지정하고 사용하면 된다. 안녕하세요. data-*속성 하나로 javascript, css에서 모두 접근할 수 있다. javascript에서 접근하기 .dataset 속성을 통해 data-*속성에 접근이 가능하다. var greeting = document.getElementById('greeting'); arti..

회사에 교육 결재를 올리고 하루를 컨퍼런스에 투자했다.장소는 누리꿈스퀘어!!!! 회사랑 너무 가까워서 회사 가는 느낌이 들고........... 누리꿈스퀘어가 복잡해서 쉽게 찾을 수 있을까 걱정했지만, 저렇게 안내 표지판이 있어서 찾기 쉬웠다. 여느 행사와 마찬가지로 입장할 때, 경품 추첨권 겸 입장 팔찌를 준다. 사기업이 아닌 한국웹접근성평가센터에서 주최를 해서 그런지 실무에 유용한 자료집을 많이 주었다. 무거운 건 덤^^! 하지만 내용이 알차서 완전 이득! 국제회의실에서 컨퍼런스를 진행했는데, 장소에 비해 인원이 많이 없었다. 지금까지 많은 접근성 세미나와 컨퍼런스에 참석했는데, 다른 행사들보다 장애인분들이 많이 참석을 하셨다. 이번엔 사진을 많이 못 찍었다. 제일 인상 깊게 들은 섹션인 김현아 변호..