안녕하세요

 

레이아웃의 컨텐츠 부분을 확장하여 반응형 레이아웃을 만들고 싶어서요 .

 

예전 모니터 4:3 화면에는 꽉 차게 보이고

16:9 모니터 (노트북 ) 화면에서 꽉차게 보이려고 합니다.

컨텐츠 부분을 확장 하고자 합니다.  

반응형레이아웃을 검색 했지만  지식이 짧아서  이해가 안되서요

 

방법좀 알려주시면 감사하겠습니다.

 

찾아 보니 비슷한  유료버전이 있어 링크 합니다.

http://www.xemarket.co.kr/index.php?mid=marketiteminfo&act=dispMarketitemDetailListView&item_srl=545700

돈이 있으면 유료버전으로 꾸미고 싶는디  쩐이 없어서....

 

 

 

  • profile
    형태도 저런 형태라면 그냥 컨탠츠부분 width 100%주시면 됩니다. 단지 해상도에 따라 보여줘야 하는 형태까지 다르면 css로 조건을 달아줘야하죠
  • profile
    css에서 미디어쿼리만 숙지하셔도 반응형 레이아웃 제작에 무리가 없지 싶어요.
    무료로 제공되는 다른 반응형 레이아웃이나 템플릿을 잘 뜯어보시면서 부딪치다 보면 금방 숙달되실 수 있을 겁니다.
  • ?

    여기 참조해 주세요. 반응형웹만들 때에, 여기꺼보고 만들었습니다.(아래 링크는 어도비 자습서입니다.)
    https://helpx.adobe.com/kr/dreamweaver/how-to/responsive-web-design-basics.html?playlist=/kr/ko/ccx/v1/collection/product/dreamweaver/segment/designer/explevel/beginner/applaunch/continuinged/collection.ccx.js

    그리고 bootstarp을 쓰셔도 반응형웹됩니다.
    http://getbootstrap.com/

     

    미디어쿼리를 쓰면 될것 같은데요?  컨텐츠부분 확장이면, 이걸 써보세요.

     

    <div class="contents">

    </div>

     

    이렇게 했다면,

     

    styles.css에,

    @media (min-width: 768px){

       .contents{

        

        }

    }

     

    @media (min-width: 1024px){

       .contents{

        

        }

    }

    위와 같은 형식으로 화면에 따라 모양을 변경 할 수 있습니다.

     

     

     

  • ? profile
    감사합니다.