1234.PNG

 

 

content 양옆 빨갛게 표시된부분 전체를 저런 옅은 회색으로 하고싶은데

 

내용이 있어야 background-color 가 적용이 되더라구요

 

내용상관없이 content 길이에따라 저쪽 전체가 옅은 회색으로 되게 구현하고싶은데 어떻게해야할까요??

  • ?
    layout.html에서
    저 글자를 적어넣으신 부분이 예를들어 <p>dosfnd</p>라던가 <span> dojisd</span>이라던가 하다면

    <div>
    <p>dosfnd</p>
    </div>

    요롷게 그것을 감싸고 있는 요소를 찾으실 수 있을거에요 <div> 같은거 말이죠 ㅎㅎ
    이 경우에는 <div style="background-color:grey"> 이런식으로 스타일을 직접 지정하시는 방법이 있고

    조금 익숙해지시면 css문서를 하나 만들어서 class만 넣으면 딱 그 속성이 지정되게 하는방법
    이렇게 있네요 ^^
  • ? ?
    • Jack
    • 질문기여자

    먼저 왼쪽태그 부분은제가 이렇게 만들었습니다

     

    <div class="content_left">
    <!--@if($layout_info->left_widget_var_1)-->
    <div class="left_widget">
    <!--@if($layout_info->left_widget_var_1_title)--><p class="widget_title"><span>{$layout_info->left_widget_var_1_title}</span></p><!--@end-->
    <div class="left_widget_content">{$layout_info->left_widget_var_1}</div>
    </div>
    <!--@end-->
    <!--@if($layout_info->left_widget_var_2)-->
    <div class="left_widget">
    <!--@if($layout_info->left_widget_var_2_title)--><p class="widget_title"><span>{$layout_info->left_widget_var_2_title}</span></p><!--@end-->
    <div class="left_widget_content">{$layout_info->left_widget_var_2}</div>
    </div>
    <!--@end-->
    <!--@if($layout_info->left_widget_var_3)-->
    <div class="left_widget">
    <!--@if($layout_info->left_widget_var_3_title)--><p class="widget_title"><span>{$layout_info->left_widget_var_3_title}</span></p><!--@end-->
    <div class="left_widget_content">{$layout_info->left_widget_var_3}</div>
    </div>
    <!--@end-->
    </div>

     

    content_left 에 백그라운드속성을줫구요...

  • ? ?

    짱이시네영 ..저보다대단하시당..
    근데 속성을 주셨는데도 저렇다면 코노하님의 말대로 인거같애요
    흠흠 height가 안들어가서 그런거같은데
    저라면 아에 구조자체를 다르게 생각할거같애요

    먼저 body에 색깔을 회색으로 하시고

    content 영역부분의 속성만 white로 하는게 편하지 않으실까요?

     

    주소를 적어주시면 금방 해결해주실분들이 많을것 같긱ㄴ한뎁..

  • ? ?
    • Jack
    • 질문기여자
    오... 그렇게 처리하는 방법이 있군요! 감사합니다
    아니면 저쪽 부분의 min-height 값을 임의로(한 800px)정도로 정하는건 웹표준(?)뭐 이런거에 위배(?)될까요?
  • ? ?
    음 괜찮으실걸요??
    구글 메인페이지도 최소높이 지정되어 있더라구요 ㅎㅎ 그래서 갠찮은줄 알고 있었는데.. 종종 다른 분들이 디자인 한 것에도 지정되어있는거 보면 많이 쓰는 코드인 것 같애요 ㅎㅎ
    근뎅 저는 반응형만 디자인하다보니 height 는 픽셀로는 지정안하려구 해여
    퍼센트로만해여..
    왜냐면 기기별로 해상도가 다 다르다보니
    세로로 길게 나오는 기기에서 보면 어딘가 어설퍼 보일수 있어서 가급적이면 배경은 일률적으로 하려고 하는 편이에용 ㅎㅎㅎㅎ
  • ? ?
    • Jack
    • 질문기여자
    음 갠찮군여 저는 이떄까지 반응형 쭉쓰다가 안좋은부분(창을 작거나크게할때 버벅거림 등등)이랑 요즘 컴퓨터 해상도들이 가로 1600이상은 지원할탠데 굳이 반응형을 써야하나... 하는 부분때문에 이번에는 pc랑 모바일 다르게 해보려구요 ㅎㅎ 여튼 감사합니다 ^^
  • ? ?
    *0* 조흔밤되세요
  • profile

    display 속성에 table, table-cell 등 있습니다. 이걸 사용하시면 됩니다.

    이 방법 말고는 부모 컨테이너에 height을 지정하거나, js로 하셔야 합니다.

  • profile ?
    • Jack
    • 질문기여자
    display table 속석에 대해서 찾아봤는데 잘모르겠네요 ㄷㄷ
    저쪽 부분의 min-height 값을 임의로(한 800px)정도로 정하는건 웹표준(?)뭐 이런거에 위배(?)될까요?
  • profile

    간단히 한예를 드리자면

    <head>

    <style>

    html,body { min-height: 100%; }

    .container { width: 100%; display: table; height: 100%; }

    .container > .td { display: table-cell; }

    .container > .left { width: 15%; }

    .container > .center { }

    .container > .right { width: 15%; }

    </style>

    </head>

     

    <body>
    <div class="container">
      <div class="left td">LEFT</div>
      <div class="center td">CENTER</div>
      <div class="right td">RIGHT</div>
    </div>

    </body>

  • ?
    윗분 코딩 내용대로..
    html,body 뿐만아니라.. background 하고 싶은 그 요소까지 전부 100%로 잡아주셔야 합니다.
    이부분은 구글검색을 body height 100 이라고만 검색해도 엄청나게 많은 자료들이 나오죠.
  • ?
    그 내용이 들어가는부분을 감싸는 div코드를 하나 작성하세요 height값을 100%로 잡고 배경색을 넣으시면 될 것 같습니다
  • ?
    • Jack
    • 질문기여자
    답변들 감사합니다 ^^