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

작성한 질문수

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

가상클래스 hover 활용한 실전 퍼블리싱 04(위아래로 분리되는 호버 네비게이션 이펙트)

full screen이 아닐 때

작성

177

선생님 풀스크린이 아닐 때 이미지가 아래와 같이 위 아래로 분리는 되나, 명확하게 보이지 않습니다.

이 현상은 혹시 어떻게 해결할 수 있을까요?

제가 잘못했나 싶어, 선생님 코드(html, css)를 그대로 복사해도 똑같이 나옵니다 ㅠ

답변 1

지식공유자

이번 예제는 모바일 대응 반응형으로 만든 예제가 아니라서 그렇습니다.

아래 코드처럼 미디어 쿼리를 이용해서 모바일 버전으로 만들어야 합니다.

@media (max-width: 768px) {

.item {

display: block;

}

질문자

선생님 빠르고 친절한 답변 감사드립니다.

혹시 그럼, 말씀해주신 반응형까지 공부하려면, 어떤걸 같이 들으면 좋은지 알려주실 수 있으실까요?

지식공유자

지금 듣고 계신 시즌1 충분히 학습해서 마치시구요.

그 다음에 아래처럼 들으시면 될 듯 합니다.

반응형 웹사이트 포트폴리오(Architecture Agency) → 반응형 웹사이트 포트폴리오(App Official Landing Website) → HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

질문자

친절히 알려주셔서 감사합니다, 선생님. 오늘도 좋은 하루 보내세요!

작성한 질문수