웹 한줄 만들기
조회수 592회
<div module="Layout_stateLogon">
<div module="myshop_benefit">
<!--@css(/css/module/myshop/benefit.css)-->
<p class="myThumb"><img src="{$group_image}" alt="{$group_name}" onerror="this.src='http://img.echosting.cafe24.com/skin/base_ko_KR/member/img_member_default.gif';" /></p>
</div>
<!--@css(/css/module/layout/statelogon.css)-->
<span class="myinfo"><strong>{$name}</strong>님 환영합니다.</span>
<a href="{$action_logout}" class="log">로그아웃</a>
<a href="/order/basket.html">CART <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>
<a href="/myshop/wish_list.html">HREAT</a>
<a href="/myshop/order/list.html">주문조회</a>
<a href="/myshop/index.html">MY</a>
<!--<a class="{$board_display|display}" href="/board/index.html">게시판</a>-->
</div>
.xans-myshop-asyncbenefit { margin:0 0 20px; color:#353535; float: left;}
.xans-myshop-asyncbenefit .thumbnail img { max-width:70px; max-height:70px; }
.xans-myshop-asyncbenefit .description { min-height:70px; }
.xans-myshop-asyncbenefit .ec-base-box.typeThinBg { margin-top:-1px; padding-left:110px; }
.xans-myshop-asyncbenefit .invite > strong { display:block; }
.xans-myshop-asyncbenefit .invite .copy { margin:8px 0 0; }
.xans-myshop-asyncbenefit .invite #reco_url { width:439px; }
.xans-myshop-asyncbenefit .invite ul { margin:8px 0 0; font-size:11px; line-height:1.25; color:#757575; }
.xans-myshop-asyncbenefit .invite ul li { margin:3px 0 0; }
.xans-layout-statelogon {height:50px; line-height:50px; float: right;}
.xans-layout-statelogon > a { padding:0 4px 0 10px; color:#757575; font-size:12px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_bar.gif") no-repeat 0 1px; }
.xans-layout-statelogon .myinfo { color:#757575; }
.xans-layout-statelogon .myinfo strong { color:#353535; }
.xans-layout-statelogon .myinfo a { padding:0 4px 0 10px; color:#757575; font-size:12px; }
.xans-layout-statelogon > a .count,
.xans-layout-statelogon > a .count span { position:relative; display:inline-block; background:url("//img.echosting.cafe24.com/skin/base/layout/bg_basket_count.png") no-repeat; }
.xans-layout-statelogon > a .count { left:-4px; top:-1px; margin:0 -5px 0 6px; padding:0 0 0 7px; vertical-align:middle; background-position:0 0; }
.xans-layout-statelogon > a .count span { height:14px; padding:1px 8px 1px 0; font-weight:bold; color:#fff; font-size:11px; line-height:14px; vertical-align:top; background-position:right -26px; }
위 코드는 카페 24에서 제공하는 코드를 제가 조금 변형 시켜서 사용하고 있는것입니다. 아래의 사진처럼 회원 등급 아이콘을 추가하였는데 그게 회원명 옆으로 오게하고 싶습니다. 그런데 inline을 써도 일렬이 되지 않아 뭐가 문제인지 질문해 봅니다 ㅠㅜ!
1 답변
-
CSS 기초반에서 중급반으로 넘어가는 관문에 잘 오셨습니다.
p
태그는 기본적으로block
요소라서 별도의 새 '1줄'을 차지하게 되어 있습니다. 그래서 같은 줄에 머물지 못하고 튀어나갑니다.
하지만span
과 같이 기본적으로 인라인 요소인 엘리먼트를 쓰면 같은 줄에 머물 것입니다. 이런 식으로요.<!-- 만약 이게 안 되면.. 그땐 .myThumb 클래스 CSS 정의도 좀 봐야 할듯 하네요. --> <span class="myThumb"> 중간 생략 </span>
댓글 입력