워드프레스 | 관리자 기본 CSS DIV

요약

워드프레스 관리자는 개발자 모드에서 사용중인 CSS 를 확인하여 여러가지 작업이 가능합니다.
관리자에서 사용되는 Admin-Style 을 데모로 플레이 해볼 수 있는 플러그인을 활용하면 참고할 때 도움이 됩니다.

미디어 작업에 도움이 되는 자바스크립트 메뉴얼 플러그인도 확인해보시면 좋습니다

사전설정

define( 'SCRIPT_DEBUG' , true );

wp-config.php 에 위의 코드를 추가하여 자바스크립트와 CSS 의 압축해제를 해야합니다.

반응형 사이즈

• 480px
• 782px
• 1100px

워드프레스는 다음 3개의 분기점에서 미디어 쿼리가 실행됩니다.
미디어 쿼리란 화면의 사이즈에 맞추어 화면 보임이 달라지게 구성되는 것을 이야기 합니다.

미디어쿼리

/* 480px 미만에서만 보임 */
@media (max-width: 480px) {
  .desktop {
    display: none;
  }
}


/* 480px 이상에서만 보임 */
@media (min-width: 782px) {
  .mobile 
    display: none;
  }
}

위 처럼 디바이스 너비에 맞추어 CSS 를 만들 수 있기 때문에 적극 추천하는 방법입니다.