• 카테고리

    질문 & 답변

  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

.banner 간격 조정 어떻게 하나요?

23.06.03 13:32 작성 조회수 236

1

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>서울구석구석</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
  <div class="container">
    <div class="main-content">
      <div class="left">
        <header>
          <div class="header-logo">
            <a href="#none"><img src="images/logo-header.png" alt="header logo"></a>
          </div>
          <div class="navi">
            <ul class="menu">
              <li>
                <a href="#none">지금의 서울</a>
                <div class="sub-menu">
                  <a href="#none">이벤트</a>
                  <a href="#none">축제&행사</a>
                  <a href="#none">전시</a>
                </div>
              </li>
              <li>
                <a href="#none">추천</a>
                <div class="sub-menu">
                  <a href="#none">에디터 추천</a>
                  <a href="#none">테마코스</a>
                  <a href="#none">도보해설관광</a>
                  <a href="#none">한류관광</a>
                </div>
              </li>
              <li>
                <a href="#none">여행지</a>
                <div class="sub-menu">
                  <a href="#none">명소</a>
                  <a href="#none">엔터테인먼트</a>
                  <a href="#none">음식</a>
                  <a href="#none">게스트하우스</a>
                </div>
              </li>
              <li>
                <a href="#none">여행정보</a>
                <div class="sub-menu">
                  <a href="#none">가이드북&지도</a>
                  <a href="#none">시티투어버스</a>
                  <a href="#none">날씨</a>
                </div>
              </li>
            </ul>
          </div>
        </header>
      </div>
      <div class="right">
        <div class="slide">
          <div class="slide-image">
            <div class="slide-image-inner">
              <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a>
              <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a>
              <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a>
            </div>
          </div>
          <div class="banner">
            <img class="banner-image" src="images/banner-01.png" alt="banner image">
            <div class="banner-content">
              <h3>얼리버드 선착순 할인 이벤트 최대 30% 할인</h3>
              <p>
                12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br>
                12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다.
              </p>
            </div>
            <a href="#none"><img src="images/banner-02.png" alt="banner link"></a>
          </div>
        </div>
        <div class="items">
          <div class="news">
            <div class="tab-inner">
              <div class="btn">
                <span>공지사항</span>
              </div>
              <div class="tab1">
                <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a>
                <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a>
                <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a>
                <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a>
                <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a>
              </div>
            </div>
          </div>
          <div class="gallery">
            <div class="tab-inner">
              <div class="btn">
                <span>갤러리</span>
              </div>
              <div class="tab2">
                <a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a>
                <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a>
                <a href="#none"><img src="images/gallery-03.png" alt="gallery3"><span>라인을 만드는 필라테스</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="footer-logo">
        <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a>
      </div>
      <div class="copyright">
        상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장
        사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스
      </div>
      <div class="family-site">
        <select>
          <option value="">패밀리 사이트</option>
          <option value="">코딩웍스 커뮤니티</option>
          <option value="">코딩웍스 쇼핑몰</option>
          <option value="">코딩웍스 재단</option>
        </select>
      </div>
    </footer>
  </div>

  <div class="modal">
    <div class="modal-content">
      <h2>스트리밍 서버 이전으로 서비스 장애</h2>
      <p>
        스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> 
        <br>
        주요 작업 내용은 아래와 같습니다.<br>
        1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br>
        2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br>
        3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br>
        <br>
        위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 
        특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 
        특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br>
        서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<br> 
        정상 운영되도록 최선을 다하겠습니다. 감사합니다.
      </p>
      <a class="close-modal" href="#none">닫기</a>
    </div>
  </div>

  <script src="script/jquery-1.12.4.js"></script>
  <script src="script/custom.js"></script>

</body>
</html>

@charset "UTF-8";

body {
  margin: 0;
  background-color: #ffffff;
  color: #333333;
  font-size: 15px;
}
a {
  color: #333333;
  text-decoration: none;
}

.container {}
.main-content {
  display: flex;
}
.main-content > div {
  /* border: 1px solid black; */
  /* height: 650px; */
}
.left {
  width: 200px;
  background-color: rgba(210, 181, 161, 0.5);
}
.right {
  flex: 1;
}

header {}
header > div {
  /* border: 1px solid red; */
}
.header-logo {
  height: 100px;
  display: flex;
  align-items: center;
}
.navi {
  height: 400px;
}
/* Navigation */
.menu {
  list-style: none;
  padding: 0;
  width: 90%;
  margin: auto;
  margin-top: 10px;
}
.menu li {
  text-align: center;
}
.menu li > a {
  border: 1px solid lightgray;
  display: block;
  padding: 5px;
  background-color: lightskyblue;
  transition: 0.1s;
}
.menu li:hover > a {
  background-color: olivedrab;
  color: #ffffff;
}
.sub-menu {
  border: 1px solid lightgray;
  background-color: lightcyan;
  display: none;
}
.sub-menu a {
  display: block;
  padding: 5px;
  transition: 0.1s;
}
.sub-menu a:hover {
  background-color: olivedrab;
  color: #ffffff;
}

.slide {
  display: flex;
}
.slide > div {
  /* border: 1px solid blue; */
  height: 400px;
}
.slide-image {
  flex: 1;
  height: inherit;
  overflow: hidden;
  position: relative;
}
.slide-image-inner {
  font-size: 0;
  width: 300%;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 10s linear infinite;
}
.slide-image-inner a {
  height: inherit;
  display: inline-block;
  width: calc(100% / 3);
}
.slide-image-inner a img {
  height: inherit;
  width: 100%;
  object-fit: cover;
}
@keyframes slide {
  0% {
    left: 0;
  }
  30% {
    left: 0;
  }
  35% {
    left: -100%;
  }
  65% {
    left: -100%;
  }
  70% {
    left: -200%;
  }
  95% {
    left: -200%;
  }
  100% {
    left: 0;
  }
}

.banner {
  width: 230px;
  text-align: center;
  box-sizing: border-box;
  padding: 5px;
  font-size: 14px;
  background-color: ivory;
}
.banner .banner-image {
  width: 88%;
}

.items {
  display: flex;
}
.items > div {
  /* border: 1px solid green; */
  height: 250px;
  flex: 1;
}
.news {}
.gallery {}
/* News & Gallery */
.tab-inner {
  width: 95%;
  margin: auto;
  margin-top: 5px;
}
.btn {}
.btn span {
  border: 1px solid #000000;
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 5px;
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  margin-bottom: -1px;
  background-color: lightskyblue;
}
.tab1 {
  border: 1px solid #000000;
  height: 208px;
  box-sizing: border-box;
  padding: 10px 15px;
}
.tab1 a {
  display: block;
  padding: 9px;
  border-bottom: 1px solid #000000;
}
.tab1 a:last-child {
  border-bottom: none;
}
.tab1 a em {
  font-style: normal;
}
.tab1 a b {
  float: right;
  font-weight: normal;
}
.tab2 {
  border: 1px solid #000000;
  height: 208px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 10px;
}
.tab2 a {
  display: inline-block;
  text-align: center;
}
.tab2 a img {
  height: 165px;
  border-radius: 5px;
}
.tab2 a span {
  display: block;
}


footer {
  display: flex;
  height: 100px;
  align-items: center;
  background-color: rgb(211, 211, 211, 0.3);
}
footer > div {
  /* border: 1px solid red; */
  text-align: center;
}
.footer-logo {
  width: 200px;
}
.copyright {
  flex: 1;
}
.family-site {
  width: 230px;
}
.family-site select {
  padding: 5px;
  border-radius: 3px;
}

.modal {
  background-color: #00000077;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
}
.modal-content {
  background-color: #ffffff;
  width: 460px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 10px #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-content h2 {
  text-align: center;
}
.close-modal {
  float: right;
  border: 1px solid #000000;
  padding: 5px 10px;
  border-radius: 5px;
}

$('.menu li').mouseenter(function(){
  $(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
  $(this).children('.sub-menu').stop().slideUp()
})

$('.open-modal').click(function(){
  $('.modal').fadeIn()
})
$('.close-modal').click(function(){
  $('.modal').fadeOut()
})

 

.banner에서 gap처럼 요소 간의 간격을 띄우는 방법이 있나요?

 

course-thumbnail

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

답변 2

·

답변을 작성해보세요.

1

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2023.06.06

이미지와 이미지 사이를 수평으로 띄울 대는 마진 오른쪽을 주시고 마지막 것은 주지 않으시면 됩니다.

img { margin-right: 5px; }
img:last-child { margin-right: 0; }

이미지와 이미지 사이를 수평으로 띄울 대는 마진 아래쪽을 주시고 마지막 것은 주지 않으시면 됩니다.

img { margin-bottom: 5px; }
img:last-child { margin-bottom: 0; }

물론 flex로 배치되었다면 gap을 주시면 됩니다. gap은 수평 간격, 수직 간격 모두 적용됩니다.

====

그건 그렇고 해당 질문이 온지 몰랐습니다. AI가 대신 대답할 줄 몰랐습니다. 답변이 있으면 지식 공유자에게 New가 뜨지 않아서 못보고 넘어갈 수 있거든요. 다음부터는 질문 올라오면 더 꼼꼼히 보도록 할게요.

여담이지만 AI로서 답변으로는 나쁘지 않지만 질문의 핵심에 가까운 답변이라기 보다는 좀 보편적인 답변인 것으로 보입니다.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.06.05

안녕하세요, 인프런 AI 인턴이에요.

질문의 내용에서는 .banner의 간격을 조정하는 코드가 없어서 구체적으로 답변드리기 어렵습니다. 하지만 일반적으로 간격을 조정할 때는 padding이나 margin 값을 조정하면 됩니다. CSS에서 padding과 margin은 각각 요소 내부와 외부의 간격을 설정해주는 속성입니다. 이를 활용하여 .banner의 간격을 조절하시면 되요.

예를 들어, .banner의 위쪽과 아래쪽 간격을 20px으로 조정하고 싶다면 다음과 같이 코드를 추가하시면 됩니다.

.banner {
padding-top: 20px;
padding-bottom: 20px;
}

참고하시길 바랍니다. 감사합니다.

bimil1121님의 프로필

bimil1121

질문자

2023.06.05

.banner에서 gap처럼 이미지와 이미지 사이를 띄우는 방법이 궁금합니다.

이미지가 가로로 있으면 gap을 사용하여 띄우면 되는데

이미지가 세로로 있으면 이미지 사이를 어떻게 띄우는?

이 글과 비슷한 Q&A