짬짬이기록하기

[속성 ~= 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