Cộng đồng Hỏi & Đáp của Inflearn

songwonchang5112

câu hỏi đã được viết

Thiết kế giao diện người dùng XD + Mã hóa bản sao Danh mục web đáp ứng tương tác!

푸터 css 설정부분에 궁금한 부분이 있습니다.

Đã giải quyết

Viết

354

안녕하세요. 강의 감사히 잘 수강하고 있습니다.

푸터 내용중에 궁금한 부분이 있어서 문의 드립니다.

강의 내용대로 푸터를 작성한 화면입니다.

HTML파일의 푸터 내용입니다.

      <footer id="footer">
        <div class="inner">
          <div class="left">
            <h2>
              <a href="#">
                <img src="img/logo_footer.png" alt="footerlogo">
              </a>
            </h2>
            <div class="footer_info_wrap">
              <ul>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
                <li>Lorem ipsum dolor sit amet.</li>
              </ul>
              <ul>
                <li>Lorem, ipsum dolor.</li>
                <li>Lorem, ipsum dolor.</li>
                <li>Lorem, ipsum dolor.</li>
                <li>Lorem, ipsum dolor.</li>
              </ul>
            </div>

적용된 css입니다.

.footer_info_wrap ul:nth-child(1) { /* 첫번째 li에 대해서 설정 */
    margin-right: 60px;
    padding-right:60px;
    border-right:1px solid #dcdcdc; /* li사이의 선 */
}

위 그림의

A영역은 위 css에서는 첫번째 li에 대해서만 margin-right로 60px을 줘서 설정한 부분은 이해가 됩니다.

B영역은 어디서 설정되는지 궁금합니다.

반응형-웹인터랙티브-웹XD

Câu trả lời 2

lizb

Người chia sẻ kiến thức

WonChang Song님! 네 좋은 질문 주셨네요~
일단, layout.css 화일의 654번째 줄에 보면

.footer_info_wrap{
    display:flex;
    margin-top:23px;
}
flex container에 넣는 display:flex 속성으로 두개의 ul 모두 flex item이기에 옆으로 나란히  정의가 된것이구요.   
.footer_info_wrap ul:nth-child(1) {
    margin-right:60px;
    padding-right:60px;
    border-right:1px solid #dcdcdc;
}
이내용으로는 border 기준 밖의 여백이 margin 안의 여백이 padding 이므로 두 ul사이의 여백이 생겼다고 보시면 됩니다. 오늘도 열공 하세요! 화이팅!

Wonchang Song

Người đặt câu hỏi

오 자세한 설명 감사드립니다. 이해되었습니다.

songwonchang5112

câu hỏi đã được viết

Đặt câu hỏi