하단 주소 css 부분 문의 좀 드립니다.
본문
하단 부분을 코드 구해서 만들었는데요. 아래처럼 우측 하단에 아이콘을 회색선 아래로 올라가게 하고 싶은데요. 아무리 해봐도 안되서 요청드려봅니다.
모바일에서는 왼쪽 주소 부분 하단 왼쪽으로 우측 아이콘들이 보여지게는 했는데요
pc에서 주소 부분과 같이 위로 정렬을 하로 싶은데 안되네요.
아래는 css와 html 코드입니다. 어디를 손봐야하는지요?
<section id="footer">
<div class="copyright">
<p>주소 : 서을특별시 동대문구 전동동 282<br>
연락처 : 0507-1308-64242<br>
Copyrightⓒ seoyo All Rights Reserved.</p>
</div>
<div class="designer">
<p>
<a href="#" target="_blank"><img src="../images/insta.jpg" width="30" height="42" border="0" title="인스타그램"></a>
<a href="#" target="_blank"><img src="../images/naver1.jpg" width="30" height="42" border="0" border="0" title="네이버예약">
</a><a href="#" target="_blank"><img src="../images/naver2.jpg" width="30" height="42" border="0" title="네이버톡톡"></a>
</p>
</div>
</section>
/* footer */
#footer {
min-height: 150px;
background: #ffffff;
color: #333;
padding-left: 10px;
}
#footer .copyright {
padding-left: 10px;
padding-top: 10px;
font-size: 11px;
}
#footer .designer {
padding-top: 10px;
font-size: 11px;
}
#footer .copyright p {
text-align: left;
}
#footer .designer p {
text-align: right;
}
#footer .copyright p,
#footer .copyright p span a,
#footer .designer p,
#footer .designer a {
font-size: 11px;
color: #666666;
font-family: 'Nanum Gothic', sans-serif;
padding-left: 0px;
line-height: 170%;
}
@media screen and (max-width: 800px) {
#footer .designer p {
text-align: left;
padding-top: 10px;
padding-left: 10px;
}
}
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<style>
/* footer */
#footer {
min-height: 150px;
background: #ffffff;
color: #333;
padding-left: 10px;
}
#footer .copyright {
padding-left: 10px;
padding-top: 10px;
font-size: 11px;
}
#footer .designer {
padding-top: 10px;
font-size: 11px;
}
#footer .copyright p {
text-align: left;
}
#footer .designer p {
text-align: right;
}
#footer .copyright p,
#footer .copyright p span a,
#footer .designer p,
#footer .designer a {
font-size: 11px;
color: #666666;
font-family: 'Nanum Gothic', sans-serif;
padding-left: 0px;
line-height: 170%;
}
@media screen and (max-width: 800px) {
#footer .designer p {
text-align: left;
padding-top: 10px;
padding-left: 10px;
}
}
#footer {
border-top: 1px solid #ddd;
position: relative;
}
#footer .designer {
position: absolute;
top: 0;
right: 0;
}
</style>
<section id="footer">
<div class="copyright">
<p>주소 : 서을특별시 동대문구 전동동 282<br>
연락처 : 0507-1308-64242<br>
Copyrightⓒ seoyo All Rights Reserved.</p>
</div>
<div class="designer">
<p>
<a href="#" target="_blank"><img src="../images/insta.jpg" width="30" height="42" border="0" title="인스타그램"></a>
<a href="#" target="_blank"><img src="../images/naver1.jpg" width="30" height="42" border="0" border="0" title="네이버예약">
</a><a href="#" target="_blank"><img src="../images/naver2.jpg" width="30" height="42" border="0" title="네이버톡톡"></a>
</p>
</div>
</section>
너무 감사합니다. 큰 도움이 되었네요!!
답변을 작성하시기 전에 로그인 해주세요.
