끄적이는 퍼블리셔♥

기기명 phys. width phys. height CSS width CSS height phys. ppi OS Apple iPhone 14 Pro Max 1290 2796 430 932 460 iOS 16.0 Apple iPhone 14 Plus 1284 2778 428 926 458 iOS 16.0 Apple iPhone 14 Pro 1179 2556 393 852 460 iOS 16.0 Apple iPhone 14 1170 2532 390 844 460 iOS 16.0 Apple iPhone 13 Pro Max 1284 2778 428 926 458 iOS 15.0 Apple iPhone 13 mini 1080 2340 360 780 476 iOS 15.0 Apple iPhone 13, 13 Pro..

1. 바로가기가 왜 필요한가? 스크린리더 사용자나 키보드를 이용한 사용자 같은 경우 여러 링크가 있을 경우 원하는 콘텐츠까지 도달하기 매우 부담이 될 수 있다. 이런 불편한 부분을 해소하기 위해 본문 바로가기[skip-navigation]이 필요합니다. 2. 태그안의 최상단에 a 태그 "본문 바로가기" 만들기 본문 바로가기 /* Skip to content */ .skip-to { position:absolute; top:-99px; left:0; background:#333; color:#fff; width:100%; padding:10px 0; text-align:center; text-decoration:none; z-index:999; } .skip-to:hover, .skip-to:focus, ..

1. WAI-ARIA란? Web Accessibility Initiative - Accessible Rich Internet Applications 웹접근성에 대한 표준 기술 규격을 의미 스크린 리더기 프로그램으로 들어보면 의미가 다르게 전달됨 HTML5 섹션 태그 LandMarkRole 설명 role="naviation" role="main" role="form" role="banner" 요소와 비슷한 의미 role="search" 검색의 역할을 담당하는 서식 영역 role="contentinfo" 요소와 비슷한 의미 role="tab" -> 버튼의 역할이 "탭"이라고 명시해주고, 선택된 요서 정보도 함께 전달해 줄 수 있다. 2. aria-required / aria-label / aria-live ..

터미널에서 입력 1. 커밋 과 현재 파일 차이점 알려줌 : git diff / : git difftool (이게 더 잘보임) : git difftool 커밋아이디 : git difftlool 커밋번호1 커밋번호2 2. 커밋들 다 보기 : git log —oneline —all (커밋번호1 커밋번호2 등등)

퍼블리셔가 알아두면 좋은 피그마 단축키! 기능 단축키 메뉴창 보이게/안보이게 하기 Ctrl + \ 화면에 선택한 레이어 꽉차게 보이도록 Shift + 2 전체 레이아웃을 화면에 다보이도록 Shift + 1 참조: https://notepad96.tistory.com/279

1. 부모 선택 1) .parent() : 선택한 요소의 부모요소를 선택 2) .parents() :선택한 요소의 부모요소를 모두 선택 3) .closest() : 선택한 요소의 부모중 가장 가까운 하나 2. 형제 선택 1) .siblings() : 선택한 요소의 모든 형제들 2) .prev() / .next() : 선택한 요소의 이전 요소 / 다음 요소 3) .eq() : 선택한 요소의 () 번호에 해당하는 요소 3. 자식 선택 1) .children() : 선택한 요소의 모든 자식 요소 2) .find() : () 조건에 맞는 모든 자식 찾기

transform: translate(-50%, -50%) scale(0.7); transform 에 translate와 scale을 같이 쓰고 싶으면 이렇게 한줄로 써야 먹는다.

HTML 삽입 미리보기할 수 없는 소스 (위의 창을 줄여보세요!) 부모가 display:flex 이고, 이에 따라 자식 요소인 box1, box2가 flex: 1, flex:2 의 값을 받았다. flex: 1, flex:2 이를 반응형을 미디어쿼리로 줄때 height 값이 먹지 않는다. 그 이유는 flex로 받았기 때문에, 같은 flex가 갖고 있는 값으로 주어야 먹기 때문이다. flex:1 은 참고로 아래를 포함하는 값이다. flex:1 = flex-grow: 1 + flex-shrink: 0 + flex-basis: auto 따라서, 반응형을 줄때 높이값을 조정하고 싶으면 flex-basis 값을 50px로 주어야 높이값이 조정된다.