| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- javascript cookie 삭제
- 로컬스토리지 객체 저장
- vscode 초기화
- vue scss 전역 설정
- vue sass 사용하기
- 로지텍 MX Vertical 마우스
- forEach map 차이
- setter 함수 동기적 실행
- array method 요약
- vscode 재설치
- input range 컬러변경
- javascript cookie 얻기
- 객체 반복문
- input type="range"
- react input autofocus
- 로지텍 버티컬 마우스 사용 후기
- next.config.mjs
- 검색창 autofocus
- input range
- javascript cookie 설정
- for in 문 예시
- 접근자 함수
- for of 문 예시
- Object for in
- vue scss
- react 검색 기능 구현
- 접근자 프로퍼티
- pip 명령 에러
- 로컬스토리지 쓰기 읽기 삭제
- for in for of 차이점
- Today
- Total
목록Web Development/CSS (9)
짬짬이기록하기
[속성 ~= us] 값을 포함하는 단어(단어별) class="us", class="korea us" [속성|=us] 값으로 시작하는 단어(단어별, 하이픈포함) class="us", class="us-open" [속성^=us] 값으로 시작하는 단어 class="usarmy", class="us-open" [속성$=pdf] 값으로 끝나는 단어 a[href=pdf] ==> a href="guide.pdf" [속성*=us] 값을 포함하는 단어 (위치와 상관없이) class="openus", class="openusopen" h1 + p : h1 다음에 오는 형제 중 첫번째 p h1 ~ p : h1의 형제인 모든 p
See the Pen CSS scroll by delikeyki95 (@delikeyki95) on CodePen. 1. scroll-snap-type scroll-snap-type: scroll snap axis(스냅 포지션 지정 축) scroll snap strictness(스냅 방식) => ex) scroll-snap-type: y proximity; 1.1 scroll snap axis x: 수평(가로) 축으로 snap position 지정 y: 수직(세로) 축으로 snap position 지정 block inline both 1.2 scroll snap strictness none: 스냅하지 않음. proximity: snap position을 지정하였다면 해당 설정에 맞춰 스냅하고, 미지정 상..
See the Pen input type="range" color change by delikeyki95 (@delikeyki95) on CodePen.
flex container의 속성들 - flex-direction: row;(기본값) / column, row-reverse, column-reverse - flex-wrap: nowrap;(기본값) / wrap, wrap-reverse - flex-flow : row nowrap; (direction과 wrap을 한줄로 표기) - align-items : baseline (텍스트를 기준으로 균등하게 정렬) - align-content: (row라면 수직축, 즉 반대축을 기준으로 정렬) flex-wrap:wrap 일 경우 사용이 가능함 flex item의 속성들 - order : 순서를 지정할 수 있음 (잘쓰진않음, 아이템의 모든 순서를 정해야 원하는대로 출력가능, order:0부터 시작) - flex-..
rem html에서 선언한 font-size를 기준으로 한다. html { font-size: 16px } div { font-size: 1rem // 16px } rem 단위는 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용 em 본인이 속해있는 엘리먼트의 font-size를 기준으로 한다. (없다면 상속이기 때문에 부모요소의 font-size를 참조함) div { font-size:14px; padding: 1em; //14px } em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용 ex) 예를들어 button의 기본폰트 사이즈를 1rem을 주고 해당 버튼의 패딩값을 쓸 때는 고정값보다는 유동적인 em을 쓰면..
first content : 전체 wrap의 사이즈가 고정된 채로 첫번째 블록의 상단 비주얼영역을 100%로 나타낼 수 있다. 관건은 display:table first content second content third content
HTML middle 정렬 CSS html { height:100%; margin:0; padding:0; } body { height:inherit; margin:0; padding:0; } .container { height:inherit; display: flex; justify-content: center; align-items: center; border:1px solid #000; } .container-item { width:30%; padding:10px; background-color:#ddd; text-align:center; } Result