질문/조언질답게시판

안녕하세요!

2개를 연속으로 올리니 조금 민망하네요..ㅎㅎ

민망함을 무릅쓰고 정말 죄송하지만 질문 한가지 더 하겠습니다.. (구글로는 도저히 안나오네요..ㅠ)

 

제가 지금 홈페이지를 이런식으로 제작해놨거든요! 위젯페이지를 사용해서요!

 

스크린샷 2019-03-02 오전 12.13.34.png

 

이게 그냥 컴퓨터로 볼때는 괜찮은데 문제는 태블릿 및 모바일로 들어가면 다 깨진다는 점입니다..

 

제가 원하는 모바일 환경은

스크린샷 2019-03-02 오전 12.14.40.png

 

공연정보와 등장인물 이 반응형으로 작동하는 것이고

제가 원하는 테블릿 환경은

 

스크린샷 2019-03-02 오전 12.14.54.png

 

공연 정보와 등장인물이 밑에 있는 수상경력과 주요이력처럼 2개씩 나타나는 것입니다.

물론 유투브 화면도 중간으로 오면 좋겠지만 그건 어려울 것 같아서요..ㅎㅎ

 

 

 

그래서 이 환경을 구현하기 위해 그리드 시스템을 이용해서 html 소스를 이렇게 만들어봤는데요

 

<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 mBottom20">

<p>

<반응형 유투브 코드입니다>

</p>
</div>

<p>
<p>

</p>
</div>

 

<div class="col-xs-12 col-sm-6 col-md-6 mBottom20">
<h5 class="head-line" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: left;"><span><span style="font-size: 24px; color: rgb(44, 62,80);">&nbsp;공연 정보</span>&nbsp;&nbsp;&nbsp;</span></h5>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1;">&nbsp;</p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 3;"><span class="xi-info-o" style="font-size: 16px;"><strong>&nbsp;공연 장소&nbsp; |&nbsp; 전국 소,중,대극장</strong></span></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 3;"><strong><span class="xi-info-o" style="font-size: 16px;"><strong>&nbsp;공연 시간&nbsp; |&nbsp; 70분</strong></span></strong></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 3;"><span class="xi-info-o" style="font-size: 16px;"><strong>&nbsp;관람 연령&nbsp; |&nbsp; 3세 이상</strong></span><strong> </strong></p>

<p>&nbsp;</p>
</div>
</div>
</div>
</div>
<link href="//cdn.jsdelivr.net/npm/[email protected]/xeicon.min.css" rel="stylesheet" />
<h5 class="head-line" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: left;"><strong><span><span style="font-size: 24px; color: rgb(44, 62,80);">&nbsp;등장 인물</span>&nbsp; &nbsp;</span></strong></h5>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 3;"><span class="xi-group" style="font-size: 16px;"><strong>&nbsp;대극장&nbsp;</strong></span><span style="font-size:14px;">(출연진 8인)</span></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;"><span style="font-size:16px;"><span style="font-family:나눔스퀘어,NanumSquare,sans-serif;">&nbsp; &nbsp; &nbsp;</span></span><span style="font-size:14px;"><span style="font-family:나눔스퀘어,NanumSquare,sans-serif;">도로시&nbsp; 허수아비&nbsp; 나무꾼&nbsp; 사자&nbsp; 서쪽마녀&nbsp; 근위병&nbsp; 사과나무&nbsp; 글린다</span></span></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;"><span style="font-family: 나눔스퀘어, NanumSquare, sans-serif; font-size: 16px;">&nbsp; &nbsp; &nbsp;</span><span style="font-size:14px;"><span style="font-family:나눔스퀘어,NanumSquare,sans-serif;">뭉크킨시티 사람들&nbsp; 원숭이&nbsp;</span></span></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 3;"><span class="xi-user" style="font-size: 16px;"><strong>&nbsp;소극장&nbsp;</strong></span><span style="font-size: 14px;">(출연진 5인)</span></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;"><span style="font-size:16px;"><span style="font-family:나눔스퀘어,NanumSquare,sans-serif;">&nbsp; &nbsp; &nbsp;</span></span><span style="font-size:14px;"><span style="font-family:나눔스퀘어,NanumSquare,sans-serif;">도로시&nbsp; 허수아비&nbsp; 나무꾼&nbsp; 사자&nbsp; 서쪽마녀&nbsp; 뭉크킨시티 사람들&nbsp; 원숭이</span></span></p>

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; line-height: 2;"><strong>&nbsp;</strong></p>
 

 

 

이렇게 짜봤는데요.. 결과는.. 처참했습니다..허허

혹시 코드 한번 봐주실 수 있을까요..?

아니면 저렇게 구현하기 위해서 다른 방법이 있을까요?

 

 

 

  • profile

    아래 사진과 같은 위젯을 삭제해보시기 바랍니다.

    스크린샷 2019-03-02 오전 12.44.31.png

    스크린샷 2019-03-02 오전 12.42.48.png

     

  • profile

    그리고 공연정보와 등장인물 위젯은 하나로 묶여있어서 수상경력과 주요이력처럼 하려면 따로 떼어내면 될 것 같습니다. 제가 자세히 구조를 몰라서 정확히 도움드릴수 없는점 양해부탁드립니다.

  • profile

    그리고 공연정보/등장인물 위젯의 width를 미디어 쿼리 이용해서 적당한 넓이 일때 100%로 잡아주세요.

  • profile ?
    미디어 쿼리라면 눈모양 말씀하시는 거 맞죠?! 100%로 잡아주니까 문제는 빈 공간에 공백이 생긴다는 점이었습니다..ㅠ 그래서 두개가 옆으로 붙지 못해요..허허.. 미치겠네요....ㅠㅠㅠ
  • profile ?

    스크린샷 2019-03-02 오전 12.53.08.png

    이런식으로요.. 공백만 없애면 가능할 거 같은데 50% 먹이니까 이상하게 바뀌어서.. 영문을 모르겠습니다ㅠ..

  • ? profile
    우선 눈 모양 누르시고 id 또는 class를 임의로 정하시고, 그 id 또는 클래스를 향해서 미디어 쿼리로 감싼다음에 따로 <style>을 삽입 해주세요.

    제가 지금 컴퓨터가 없어서 쉽게 알려드리기가 어렵네요 ㅠㅠ

    https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
  • profile ?
    감사합니다! 한번 해보겠습니다!!ㅎㅎ