화면사이즈별 최적화 하는법

  • 만든이
    게시글
  • #29374
    IT관리자
    키 마스터

    안녕하세요, 지난번 사업장 홈페이지 자체 제작 중 문의사항 여쭙고 잘 해결되었습니다.

    이번에 홈페이지 리뉴얼을 하게되어서 다시 제작 중인데요,

    완전 초기 단계입니다... 홈페이지 대문 제작중인데, 지난번에도 해결 못한 문제입니다. (대강 썼어요...ㅎ)

    노트북 화면과 모니터(가로로 긴...)에서 홈페이지 사진이 다르게 보여서요.

    pc, 태블릿, 모바일은 설정이 각각있지만,

    화면 사이즈별로 홈페이지 사이즈가 최적화되게 만드는 법은 어떻게 하는걸까요?

    복잡한 작업이라면 포기하겠습니다...ㅠㅠ

    간단한 작업이라면 답변 부탁드립니다. 미리 감사드립니다 ^^

    출처: https://cafe.naver.com/wphomepage/18988

0 답변 글타래를 보이고 있습니다
  • 글쓴이
    답변
    • #29375
      IT관리자
      키 마스터

      워드프레스는 반응형으로 작동하기 때문에 보통 모바일에서는 모바일 기기에 맞게 적절히 표시됩니다.

      모바일에서 표시되는 레이아웃이 마음에 들지 않는 경우 페이지 빌더(예: 엘리멘터)나 유료 테마에 설치된 페이지 빌더(예: Avada 테마에 탑재된 Avada Builder) 내에서 기기별로 조정하거나 CSS 코드로 조정해야 합니다.

      다음 글을 참고하여 상황에 맞는 방법을 선택하여 모바일 장치에서 원하는 대로 표시되도록 조정을 시도해보시기 바랍니다.

      워드프레스 모바일과 PC 레이아웃 다르게 만드는 방법

      CSS로 조정하려는 경우 CSS 미디어쿼리를 사용하여 기기 해상도에 따라 다르게 스타일을 지정할 수 있습니다.

      CSS는 그리 어렵지 않기 때문에, CSS가 생소한 경우 기본적인 CSS를 공부해보시기 바랍니다. 기본적인 내용은 익히는 데 그리 많은 시간이 걸리지 않습니다(2~3일 정도?) 기초적인 내용의 CSS를 알더라도 어느 정도의 커스텀은 직접 가능할 것입니다. CSS는 워드프레스에서만 필요한 것이 아니라 티스토리, 그누보드, 구글 블로그스팟 등 모든 웹 환경에서 유용하게 활용할 수 있습니다.

      워드프레스에서 워드프레스를 적용하는 기본적인 방법은 다음 글을 참고해보세요.

      워드프레스에 CSS를 적용하는 방법[기초]

      레퍼런스로 CSS 책을 하나 구입하여 필요할 때 참조할 수 있고, 생활코딩 같은 무료 동영상 강좌를 통해 무료로 CSS를 학습할 수 있습니다.

0 답변 글타래를 보이고 있습니다
  • 답변은 로그인 후 가능합니다.