인프런 커뮤니티 질문&답변

손손님의 프로필 이미지
손손

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

순서 체크 가상클래스 활용한 실전 예제 제작 (개인 프로필 카드 UI 호버 이펙트)

15:22 에 질문이 있습니다~

작성

·

282

1

card 내부 content에 적절한 가운데 배치를 위해서

padding-top 값을 고정값인 180px로 작성해 주셨는데요

(영상 뒷부분에서는 150px로 변경해주셨구요!)

혹시 내부의 content 값이 길어지면 계속 변경을 해야하는데,

예를들어 p태그의 줄 수가 한줄이라도 늘어나게 된다면

밑에 있는 sns 요소가 가려져서 안보이게 되는데

padding-top을 고정 픽셀로 넣는 방법 말고,

padding-top:70% 혹은 80%로 넣어도 될까요?

------

그리고 border-radius가 안먹힌것 같은데

card 말고 card img에 넣어야지 border-radius가

둥글게 되는게 맞나요~~?

답변 2

3

강좌를 보니까 .card에 보더레디어스 부분은  넣지를 않았네요. 완성본은 있는데...
보더레디어스 넣어주세요. 영상 찍으면서 깜빡했나봐요.ㅠㅠ

.card {

  border-radius: 5px;
  overflow: hidden;

}

그리고 padding-top:70% 혹은 80%로 넣어도 되지만 변동사항이 크지 않으니까 간편하게 padding-top으로 하셔도 됩니다.
하지만 p태그의 텍스트 내용이 많고 적음에 관계없이 완벽하게 중앙을 항상 유지하고 싶다면 플렉스로 해보세요.
.content 내의 자식요소를 센터링하는 구문이에요.

.content {

  /*padding-top: 150px;*/

  display: flex;

  flex-direction: column;

  justify-content: center

}

0

손손님의 프로필 이미지
손손
질문자

아! 이런 방법도 있었네요 엄청 유용해요 감사합니다 ㅠ.ㅠ!

손손님의 프로필 이미지
손손

작성한 질문수

질문하기