• 카테고리

    질문 & 답변

  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

질문드려용!!

22.03.04 00:46 작성 조회수 109

1

(*이 글에서 제가 참고한 완성본 파일은 강의 목록

모듈 제작 완성본 다운로드(슬라이드,네비게이션,레이아웃,레이어 팝업,탭 메뉴)에 있는 

(탭메뉴) 안에 "공지사항,갤러리 별도로" 파일 입니다.)

 

질문 1)

강의에는 없는 것 같은데 선생님께서 주신 완성본 파일 확인시 궁금한점이 몇가지 생겨 질문드립니다.

( 주석처리한 부분 관련입니다. 학습참고용이라고 답변 주셨는데 궁금해서 질문드려요!!)

 

(주석1️⃣   .slide 태그 안)

 
.content-inner {
width: 1200px;
margin: auto;
}
.slide {
/* width: 1200px; */
text-align: center;
line-height: 300px;
/* clear: both; */
}
  • .slide에 clear: both;를 주었던 이유는 무엇인지 궁금합니다!

 

(주석2️⃣  .tab-inner .tab, gallery-inner .tab 태그 안)

.tab-inner,
.gallery-inner {
width: 97%;
margin: auto;
}
.tab-inner .btn {}
.tab-inner .btn span,
.gallery-inner .btn span {
border: 1px solid #000;
display: inline-block;
padding: 3px;
width: 120px;
text-align: center;
border-radius: 5px 5px 0 0;
border-bottom: none;
margin-bottom: -1px;
background-color: #fff;
}
.tab-inner .tab,
.gallery-inner .tab {
border: 1px solid #000;
padding: 0 10px;
height: 160px;
/* box-sizing: border-box; */
}
.tab-inner .tab a {
display: block;
border-bottom: 1px solid #000;
padding: 3px;
}
.tab-inner .tab a:last-child {
border-bottom: none;
}
.tab-inner .tab a b {
float: right;
font-weight: normal;
}

.gallery .tab img {
width: 110px;
}
.gallery .tab {
text-align: center;
padding-top: 25px;
box-sizing: border-box;
}
  • box-sizing: border-box;를 .tab-inner .tab, .gallery-inner .tab 에 같이 주었던 이유가 궁금합니다!
    .gallery .tab 에서 padding-top: 25px을  주었기때문에 저는 .gallery-inner .tab에만 개별적으로 box-sizing: border-box 을 주었습니다 그런데!  확인해보니 제가 말한대로 .gallery-inner .tab에만 box-sizing: border-box를 주면 옆에 공지사항 박스가 갤러리 박스와 비교시 미세하게 박스크기의 높이부분이 차이가 나더라구요 이유를 알수있을까요ㅜㅜ?

 

 

질문 2)

이전 말씀 해주신 것처럼 position: relative;를 넣으면 밑에 줄이 사라져보이는데요

선생님 강의와 완성본 파일에는 position이 따로 없는데 어떻게 적용하신건지 궁금해요!!

(아래 코드는 선생님께서 제공해주신 완성본파일입니다. 보시다시피 position: relative; 는 없어요! )

선생님께서는 span태그를 사용하고 저는 div태그를 사용했기 때문에 발생한 이슈일까요?

.tab-inner .btn span,
.gallery-inner .btn span {
border: 1px solid #000;
display: inline-block;
padding: 3px;
width: 120px;
text-align: center;
border-radius: 5px 5px 0 0;
border-bottom: none;
margin-bottom: -1px;
background-color: #fff;
}

 

 

 

course-thumbnail

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

2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS)

강의실 바로가기

답변 1

답변을 작성해보세요.

0

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

코딩웍스(Coding Works)

지식공유자

2022.03.04

답변) (.slide 태그 안)

.slide에 clear: both를 줘야 하는 경우도 있습니다.

하지만 header에 높이값을 주었기 때문에 굳이 .slide에 clear: both를 주실 필요는 없습니다.

 

답변) ( .tab-inner .tab, gallery-inner .tab 태그 안)

box-sizing: border-box는 필요한 곳에만 주셔도 되고, 모두 주셔도 됩니다. 단, box-sizing: border-box로 인해서 레이아웃이 망가지지 않는 선에서 하시면 됩니다.

 

질문 2)에 대한 답변

relative를 준건 이런 상황일 때가 있을 경우 relative가 우선해서 위로 올라가니까 문제를 해결할 수 있습니다.

저도 span과 div의 차이에서 생기는거라고는 생각해보지 않았는데 테스트해야겠습니다.

 

이 글과 비슷한 Q&A