👩🏻‍💻STUDY

버튼은 button태그. anchor태그는 페이지 이동. input에 label을 매칭 못할 때는 title 사용. a링크 텍스트에 aria-label="" a href="javascript:void(0)" 대체텍스트는 aria-label 적용. aria-label적용이 아닐 시 sr-only 클래스 적용. .sr-only { position:absolute; overflow:hidden; width:1px; height:1px; margin:-1px; padding:0px; clip:rect(0,0,0,0); } 마크업은 탭 포커스 위치로 만든다.(팝업의 닫기버튼은 마지막에 적용되야 함) 부트스트랩은 마크업 웹접근성을 참고하기 좋다. Q. sr-only가 있는데 왜 font-size:0px을 사용할까?..

🔺문제 @include 선언 후 추가 스타일 지정이 안됨. parent의 child 스타일 지정 안됨. .parent { @include mix() { // 스타일지정 } ( // Error ) // Error .child { } } html 구조 BOX1 BOX2 BOX3 @mixin @mixin 믹스인이름($매개변수: 기본값) { 스타일; } @include 믹스인이름(인수); @content @mixin 믹스인이름() { 스타일; @content; } @include 믹스인이름() { // 스타일블록 스타일; } @mixin position( $p: absolute; $t: null, $b: null, $l: null, $r: null ) { position: $p; top: $t; bottom: ..

1. CLI로 sass 설치 Node.js 설치가 되어 있어야 됨. npm install sass -g 로 CLI 에 설치. 2. sass 버전 확인 $ npm show sass version $ sass --version 3. 해당 디렉토리에 scss -> css 변환 $ sass style.scss style.css $ sass 입력. 폴더 안에 있을 경우, $ sass scss/style.scss style.css 4. sass 보기 , 끝내기 --watch라는 플래그를 넣어 해당 파일 자동으로 변환. $ sass --watch style.scss:style.css 아래처럼 폴더 내 모든 파일들을 컴파일할 수 있다. sass --watch : $ sass --watch scss:css sass 실시..

https://wonyong-jang.github.io/git/2021/02/05/Github-Merge.html [Git] Merge(3-way merge) 이해하기 - SW Developer 다른 형상 관리툴들과는 달리 git은 branch를 생성할 때 파일을 복사하는 것이 아니라 파일의 스냅샷만 가지고 생성하기 때문에 자원의 부담없이 branch를 만들어 사용할 수 있다. 이러한 장점 때문 wonyong-jang.github.io 개념 쉽게 정리되어 있다.

counter 사용법 counter은 CSS에서 자동으로 번호를 매기는 역할을 한다. counter-reset 카운터이름과 시작값을 설정{ counter-reset: initial | 카운터이름/숫자 | none } initial :: 초기화 카운터로 사용할 이름 숫자를 지정하지 않으면 기본값이 0 숫자는 음수값도 가능하며 여러개의 카운터를 설정하고자 할 때 공란으로 분리. none :: 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) counter-increment counter-reset으로 설정한 값을 증가시키는 역할{ counter-increment: initial | 카운터이름/숫자 | none } initial :: 초기화 숫자를 지정하지 않으면 기본값으로 1씩 증가 숫자는 음수값 가..

오픈그래프(Open Graph) 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것 원리 링크라는 것이 인식되면 크롤러가 해당 웹사이트의 HTML head의 메타 데이터를 크롤링하여 미리보기 화면을 생성 프로토콜 비교적 통일된 방법으로 페이스북의 open graph 프로토콜을 사용한다. 페이스북, 네이버블로그, 카카오톡 등에서 사용하고 있는 프로토콜 open graph 문서 태그 사용법 800 X 800 또는 600 x 315 또는 1200 x 630 대다수 카톡으로 많이 url을 보내므로 800x800으로 맞추었다. 기본적으로 웹에 설정해줘야 하는 og 메타태그 네이버블로그, 카카오톡 미리보기 설정 트위터 미리보기 설정 Reference Meta Tag, OG(오..

hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. github repository를 생성할 때 readme.md 생성으로 인한 오류라고 ..

참조에 의한 객체복사 객체와 원시타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다. 원시값(문자열, 숫자, 불린 값)은 '값 그대로' 저장·할당되고 복사된다. let message = 'Hello'; let cloneMessage = message; cloneMessage = 'CloneHello'; console.log(message, cloneMessage); // Hello CloneHello 객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다. let user = { name: 'John'; } let admin = user; admin.name = ..