inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작

[Coding Mission 01] 인접선택자와 속성선택자를 활용한 순수 CSS 탭 콘텐츠

slide-inner에 font-size

395

RINI

작성한 질문수 1

1

안녕하세요 강사님, 강의 잘 듣고 있습니다!

코딩미션 1-3 중에 질문이 있습니다.

슬라이드 마지막 사진이 안 나타나서 hidden을 풀고 보았더니

no font-size.png이런식으로 마지막 사진이 다음 줄로 밀려서 배치가 되어있더라구요.

나란히 배치하려고 이것저것 해봐도 안되길래 코드 비교를 하다가

.slide-inner {
font-size: 0;
}

이렇게 font-size를 적어주었더니

fontsize.png바로 나란히 배치가 되더라구요.

font-size를 적고 안 적고에 따라 사진 배치가 이렇게 되는 것이 제가 알고 있던 font-size의 역할과 달라 궁금하여 질문 남깁니다.

혹시 왜 이렇게 되는 것인지 알 수 있을까요?

HTML/CSS jquery 포트폴리오

답변 1

0

코딩웍스(Coding Works)

작업하신 html,css 코드를 복사해서 올려주세요.

0

RINI 

<body>
  <div class="tab-group">
    <input type="radio" name="tabmenu" id="tab1" checked>
    <input type="radio" name="tabmenu" id="tab2">
    <input type="radio" name="tabmenu" id="tab3">
    <div class="slide">
      <div class="slide-box">
        <img src="images/slide-01.jpg">
        <img src="images/slide-02.jpg">
        <img src="images/slide-03.jpg">
      </div>
    </div>
    <div class="tab-btn">
      <label for="tab1"></label>
      <label for="tab2"></label>
      <label for="tab3"></label>
    </div>
  </div>
</body>

 

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.tab-group {
  width: 300px;
  height: 350px; 
}

input[name=tabmenu] {
  display: none;
}

.slide {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.slide-box {
  width: 900px;
  font-size: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}

.tab-btn {
  text-align: center;
  margin-top: 10px;
}

.tab-btn label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: lightgray;
  border-radius: 50%;
  cursor: pointer;
}

input[id=tab1]:checked ~ .slide .slide-box {
  left: 0;
}
input[id=tab2]:checked ~ .slide .slide-box {
  left: -300px;
}
input[id=tab3]:checked ~ .slide .slide-box {
  left: -600px;
}

input[id=tab1]:checked ~ .tab-btn label[for=tab1],
input[id=tab2]:checked ~ .tab-btn label[for=tab2],
input[id=tab3]:checked ~ .tab-btn label[for=tab3] {
  background-color: crimson;
}

코드는 이렇고 여기서 .slide-box 부분에 font-size를

주석처리하면 첫 질문에 첨부한 사진과 같이 세번째 사진이

다음줄로 내려가버려서 버튼을 클릭하면 이미지가 보이지 않습니다.

 

 

 

현재도 float 사용은 중요한가요?

1

213

2

웹 호스팅 후 문제

1

239

1

퍼블리셔 코딩테스트 질문입니다.

1

587

1

feather light

1

252

2

skill 섹션 질문

1

255

1

포트폴리오 홈페이지 제작가이드

2

249

1

iframe 질문입니다.

1

211

1

디자인설정

1

333

1

연봉 질문합니다.

1

895

1

폰트, 이미지? 관련 질문입니다

1

311

1

파일질라 카페24? 관련 질문입니다

1

432

1

면접 복장 질문입니다

1

745

1

도메인 연결 오류

1

360

1

개인 포트폴리오 웹사이트 안에 들어갈 포트폴리오 웹사이트 작업물들

1

484

1

카페24 절약형 관련 질문있습니다

1

871

2

기능정의서 html에 첨부하는 방법/header include

1

626

1

prototype 뜻

1

704

1

폴더구조 질문드립니다.<재업로드>

1

430

1

폴더구조 질문드립니다

1

360

1

개인포토폴리오 해상도문제요..!

1

391

1

구글에 검색했을 때 나오는 포트폴리오

2

412

1

wow.js live option

1

440

1

개인 포트폴리오 홈페이지 만들때 UI 포토샵 디자인

1

532

1

featherlight 연결시 링크된 html이 문제가 있어요 ㅠㅠ

1

313

1