inflearn logo
강의

講義

知識共有

レスポンシブウェブサイトポートフォリオ(App Official Landing Website)

ニュースセクション - CSS詳細デザイン(news-right) および インラインJavaScript

5:11 뱃지 사이즈 관련

419

taes11014397

投稿した質問数 9

2

같은 뱃지라는 클래스에 위치 잡고나서,  

new ,hot 클래스에 글자만 바꿨는데 왜 패딩사이즈가 줄어들죠?

글자도 똑같은 소문자8개인데 , 화면보다가 머가 꿈뻑해서 보니까 갑자기 좌우 영역범위가 줄어든거 같아서요...  

(4:57 쯤에 class ="badge new"부분을 hot으로 바꿀땐 사이즈 변경이 없는데, 스팬클래스 안의 컨텐츠 부분을 수정하니까 작아지네요.) 

jquery HTML/CSS 반응형-웹

回答 3

1

codingworks

.badge인 span 태그 안에 폰트사이즈를 더 줄여보세요.

아마 글자체에 따라서 변동이 있는 듯 해요.

.badge에 widht height를 따로 주지 않았는데 widht height 주시고 중앙정렬 시켜보세요.

화면이 없어서 답변이 맞는지 확신이 없긴 하네요...

0

taes11014397

큰 차이는 없는데, 갑자기 패딩값이 줄어들어서 궁금했어요.

:0  글자크기때문에 그런건가 싶기도 하네요. 

0

codingworks

높이가 아니라 너비가 조금 달라보이는거라면 .badge가 inline 상태니까 아무래도 슬펠링 때문에 조금 틀려보이는 것 같아요. 인라인은 텍스트 내용에 딱 맞춰 줄어드는거니까... 앞서도 이야기 했지만 신경쓰이시면 widht 주시고 중앙정렬 시켜보세요. 포지션 absolute이니 display는 inline-block 상태일 거구요.

0

taes11014397

하드코딩으로 이미지맵(image map) 만들기

1

79

2

슬릭 슬라이더

1

148

2

position: fixed; 가 안먹혀요..뭐가 문제일까요?

1

168

1

반응형 fixed 안먹히는 문제

1

264

2

선생님

2

155

1

.news-thum .date 위치가 안맞아요

1

245

2

TypeIt - Welcome 부분이 적용이 안됩니다..

1

369

2

Scroll Reveal Animation 적용이 안되요

1

362

1

완성 후 각 섹션 display:none 주석 시 문제

1

384

3

브라우저를 줄일 때 화면 깨짐

1

633

2

welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.

1

341

1

제이쿼리 탭메뉴 클릭 질문

1

236

1

질문있습니다

1

549

1

질문있습니다.

2

646

2

슬릭슬라이더가 왜 안되는지 모르겠습니다

1

623

1

slick slider와 .ceo-content영역 겹침

1

720

1

span .badge 부분 참고하실분 하세요

2

333

1

플렉스를 안주고 그냥 패딩을 줘도 되지 않나요

1

331

1

창을 줄이면 위치가 이동되는 백그라운드 이미지

1

532

1

크롬창을 줄어들면 이미지가 작아짐

1

743

1

scroll behavior 오류

1

267

1

선생님 코딩좀 봐주세요..

1

402

3

왜 전 선생님과 화면이 다를까요?

1

368

3

따라했는데 이상합니ㅏㄷ..ㅠ

1

295

2