230205

230205

1. button 에 리디렉션 액션 만들기

onclick 이벤트를 추가해 리디렉션 링크로 이동시킨다.

<button type="button" onclick="location.href=''"></button>

2.media query 이용하기

@media (max-width: 1083px) {
  /*  */
}

3. CSS 변수 사용하기

:root {
  --black: #333333;
}

element {
  color: var(--black);
}

4. 반응형 웹 페이지 기본 세팅

아래의 코드를 header 에 삽입한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

5. Grid 사용하기

1. 기본

element {
  display: grid;
  grid-template-columns: 10px repeat(2, 1fr) 30%;
}

2. minmax

element {
  display: grid;
  grid-template-columns: 10px minmax(30px, 80px) 30%;
}

3. repeat & minmax

element {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto-fit, 1fr));
}

4. grid-template-areas

element {
  display: grid;
  grid-template-areas:
    "a a a"
    "b b c"
    ". d d";
}

6. order

flex 또는 grid 사용 시 html 의 구조를 변경하지 않고 element 의 순서를 바꿔준다. media query 시 사용하면 유용한 듯

mother-element {
  display: grid;
}

child-element:nth-child(3) {
  order: 6;
}

7. 텍스트가 넘치지 않게 줄이기

element 가 block 타입이어야 한다.

.element {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

8. JS 로 스크린 사이즈 체크하기

스크린 사이즈가 1083px 이상일 시

if (window.screen.width >= 1083) {

}

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤