밀 종합 ٩(`╹ω╹´)و

space: 공간 between: 사이에 around: 사방, 빙 둘러 evenly: 균등하게 space-between: 빈 공간이 박스 사이 사이에 있다. space-around: 빈 공간이 박스를 빙 둘러서 박스가 겹치는 영역은 넓고 겹치지 않은 영역은 좁다. space-evenly: 빈 공간이 균등하게 분포돼 있다.

/* Keyword values */ box-shadow: none; /* 값이 2개인 경우 */ box-shadow: 60px -16px; /* 값이 3개인 경우 */ box-shadow: 10px 5px 5px; /* 값이 4개인 경우 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 값 4개 + color를 추가한 경우 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 요소가 움푹 들어간 것처럼 사용할 경우 */ box-shadow: inset 2px 2px 2px 1px rgb(0, 0, 0, 0.2); 값 설명 2개인 경우 값으로 해석된다. 3개인 경우 값으로 해석된다. 4개인 경우 값으로 해석된다. [..

부모 구분 속성 기본값 축약 방향 flex-direction row flex-flow *값의 위치는 제약이 없다. [예제] flex-flow: cloumn wrap flex-flow: wrap cloumn 줄바꿈 flex-wrap nowrap 정렬 justify-content normal place-content [값이 1개인 경우] place-content: align-content | justify-content *align, justify 값이 동일하게 적용 [값이 2개인 경우] place-content: align-content justify-content *띄어쓰기로 값을 구분한다. [예제] gap: center gap: 8px 16px align-content normal align-items..

order의 기본 값은 0이다. 0보다 일찍 항목에 표시하려면 음수 값을 설정한다. order 값이 낮은 항목들이 먼저 나타난다. See the Pen flex item 순서 바꾸기 by mill (@millfeel) on CodePen.

justify-content는 그룹으로만 항목을 처리하기 때문에 justify-items. justify-self 속성이 없다. (보통 align-iems와 함께 사용하다보니, justify-content가 item을 정렬하는 것으로 오해를 많이 한다.) 그렇다면 justify-self를 사용하지 않고, 단독 정렬은 어떻게 해야할까? 정렬할 대상에 margin-방향: auto를 사용한다. See the Pen [CSS3] flex의 justify-self처럼 단독으로 정렬하는 방법 by mill (@millfeel) on CodePen.

See the Pen [CSS3] flex의 align-content와 align-items의 차이 by mill (@millfeel) on CodePen.

부모의 z-index 레벨을 점검해 본다. .content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; } [원인] modal의 z-index가 100이라도, 부모인 content의 z-index가 1이면 side-tab은 modal의 위에 배치될수밖에 없다. 이유는 마크업에서 같은 레벨의 부모의 z-index 값이 낮으면 자식의 값도 강제로 값이 낮아지기 때문이다. (z-index를 100해봐야 content 안에서만 100이라는 의미) [해결 방법 2가지] modal을 content 밖으로 뺀다. content의 position을 제거..

See the Pen [CSS3] background-size by mill (@millfeel) on CodePen. 값 background-size: 25px 50px; 기본 값은 auto auto이고, 이미지를 비율에 맞게 늘린다. 값이 하나인 경우: 너비 값에 적용되고, 높이 값은 auto가 된다. 값이 두개인 경우: 첫번째 값은 너비, 두번째 값은 높이가 적용된다. 여러 배경 이미지의 크기를 지정하려면 각각의 값을 쉼표로 구분한다. 키워드 background-size: cover/contain; [cover] 이미지가 잘려도 이미지를 최대한 크게 조정한다. 빈 공간이 남지 않는다. [contain] 이미지가 잘리지 않는 기준에서 가장 크게 이미지를 조정한다. 빈 공간이 남는다. [공부 좌표] b..

clip-path 요소의 클리핑 범위를 지정한다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨진다. clip-path 문법 자료형에 따라 문법이 달라지기 때문에 자세한 것은 MDN을 참고하세요. inset() 함수 clip-path: inset(top right bottom left); - 사각형 - 값은 띄어쓰기로 구분한다. - 값(매개변수)의 갯수 1개인 경우: 상, 하, 좌, 우를 한꺼번에 컨트롤 한다. 2개인 경우: 상,하 / 좌,우로 나눠서 컨트롤 한다. 4개인 경우: 상/하/좌/우를 각각 컨트롤 한다. polygon() 함수 clip-path: polygon(x좌표 y좌표, x좌표 y좌표, x좌표 y좌표); - 다각형 - 띄어쓰기로 구분하고, 꼭지점은 ,(쉼표)로 구분한다. [inset()..

font 축약 CSS 속성 font-family (필수) font-size (필수) font-stretch (선택) font-style (선택) font-variant (선택) font-weight (선택) line-height (선택) 사용 방법 body { font: 1.6rem/1.5 '맑은 고딕', 'malgun gothic', sans-serif; } - 속성은 띄어쓰기로 구분한다. - line-height는 font-size 바로 다음에 와야하고, "/"로 구분해야한다. (ex. 16px/3) - font-family는 마지막 값이어야한다. [공부 좌표] MDN [참고] font-family Q. font-family 기본 폰트는 어떤 것을 설정해야 할까? Q. line-height는 어떤 단..