해당 사이트처럼 메뉴를 좌우로 나누려면
본문
이렇게 메뉴를 좌우로 나누려면 어떻게 해야 되나요?
메뉴 앞에 이미지 넣는 법도 아시는분 도움 부탁드립니다!
답변 2
대략 아래처럼 하시면 될 것 같습니다
<style>
.menu-container {
display: flex;
justify-content: space-between;
}
.left-menu {
display: flex;
align-items: center;
}
.left-menu img {
margin-right: 5px; /* 이미지와 텍스트 사이의 간격 조절 */
}
.right-menu {
display: flex;
align-items: center;
}
.right-menu img {
margin-right: 5px; /* 이미지와 텍스트 사이의 간격 조절 */
}
</style>
<div class="menu-container">
<div class="left-menu">
<img src="이미지 URL" alt="이미지 설명">
<ul>
<li>1번 메뉴 항목</li>
</ul>
</div>
<div class="left-menu">
<img src="이미지 URL" alt="이미지 설명">
<ul>
<li>2번 메뉴 항목</li>
</ul>
</div>
<div class="right-menu">
<img src="이미지 URL" alt="이미지 설명">
<ul>
<li>3번 메뉴 항목</li>
</ul>
</div>
<div class="right-menu">
<img src="이미지 URL" alt="이미지 설명">
<ul>
<li>4번 메뉴 항목</li>
</ul>
</div>
</div>
감사합니다 head.php에 넣나요 아니면 css에 넣어야 하나요?
style 부분은 css 에 넣으시면 되구요. html 부분은 원하시는 곳에 넣으시면 됩니다.
float:left;
float:right;
어느 부분에 넣으면 될까요?
<div id="tnb">
<div class="inner">
<?php if(G5_COMMUNITY_USE) { ?>
<ul id="hd_define">
<li class="active"><a href="<?php echo G5_URL ?>/">커뮤니티</a></li>
<?php if (defined('G5_USE_SHOP') && G5_USE_SHOP) { ?>
<li><a href="<?php echo G5_SHOP_URL ?>/">쇼핑몰</a></li>
<?php } ?>
</ul>
<?php } ?>
<ul id="hd_qnb">
<li><a href="<?php echo G5_BBS_URL ?>/faq.php">FAQ</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/qalist.php">Q&A</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/new.php">새글</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/current_connect.php" class="visit">접속자<strong class="visit-num"><?php echo connect('theme/basic'); // 현재 접속자수, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?></strong></a></li>
</ul>
</div>
</div>
이 부분을 검토해 보세요.
답변을 작성하시기 전에 로그인 해주세요.
