라이믹스질답게시판

어떻게 최근 글 게시판 위젯에 모서리가 round처리된 태두리(박스)를 만들 수 있을까요?

?
홈페이지만들꺼야

제 웹페이지 URL : http://kimbapp.com

사용 XE버젼 :  XE최신 버젼 1.8.15

사용 레이아웃 : 기본 레이아웃(PC용) + Xenon HS (모바일용)

사용 호스팅 : cafe24

 

Q. 게시판 위젯에다가 a) 테두리를 쳐서 깔끔하게 보이고 싶은데 어떻게 하면 될까요? 

 

<제가 추구하는 게시판의 모습 - 모바일용 게시판 위젯들에 모서리가 round 처리된 모습.>

내 홈피 모바일 사진 2.jpg

 

 

PC용 레이아웃에서 위젯의 [위젯크기]에서 위젯태두리를 건드리면 위젯태두리를 만들 수는 있는데, 그게 모서리가 다 직각이라서 별로 예뻐 보이지가 않더라구요. 어떻게 하면 스샷에서 보이는 것처럼 위젯 태두리의 모서리가 둥글게 될 수 있는지 궁금해서 여쭈어봅니다!!

 

ps. 그리고 저 최근글 위젯에 쳐져있는 태두리(box)가 PC용 에서는 안보이다가 모바일에서만 보이게 할 수도 있나요? 반응형 웹이라서 이렇게 처리하기는 불가능할까요?

 

위로 아래로
댓글 5
  • @media only screen and (max-width: 479px) {div.simpleWidgetStyle {border-radius:5px; border:3px solid #eee}}

    css에 넣어보세요
  • ?
    CSS 해설:
    @media only screen and (max-width: 479px)
    == 스크린 가로가 479픽셀 이하인 경우


    div.simpleWidgetStyle {border-radius:5px; border:3px solid #eee}
    == 테두리 반지름 5픽셀, 테두리 두께 3픽셀 이어진 선분으로 #eee 색의 테두리를 그립니다.
  • ?
    PC와 모바일 모두, 그리고 화면 크기에 관계 없이 라운드 처리하려면
    div.simpleWidgetStyle {border-radius:5px; border:3px solid #eee}

    이 부분만 적으세요.

    미디어 어쩌구 하는 부분은 미디어 쿼리라고 검색하시면 자세한 내용을 찾으실 수 있습니다.
  • ?

    proto님! html만 건드리는 건 줄 알았는데, CSS에다 해야하는 거였군요. 답변해주셔서 감사합니다 :)

  • ? ?
    misol님 감사합니다. 사실 html도 아직 잘 모르는데, css는 더 모르겠더라구요. 친절한 해설해주셔서 정말로 감사드립니다! 이제 좀 알것 같아요 ㅎㅎ