inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실전! 웹사이트제작! Step by Step! (와이스튜디오_반응형웹)

레이아웃 질문

256

jianee12

작성한 질문수 1

0

레이아웃 강의를 마쳤는데 창 너비를 줄였을 경우 저렇게 width:100%에 맞춰 이미지가 작아지고

header의 로고와 welcome이 위 아래로 정렬 됩니다. 어떻게 해야하나요??

@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");

/*reset*/
*{margin:0; padding:0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, thread, tr, td, th,{margin:0; padding:0;}
h1, h2, h3, h4, h5, h6{font-size:inherit;}
a{text-decoration:inherit; color:inherit;}

/*layout*/
body{font-family: 'Roboto', sans-serif; font-size:15px;}
.wrap{width:100%; margin:0 auto;}

/*header*/
header{width:100%; padding-top:20px; /*background:yellow;*/ position:fixed; z-index:100;}
.innerHeader{height:80px; padding:0 80px; /*background: blue;*/ }
.innerHeader .logo{width:170px; height:60px; float:left; /*background: red;*/ margin-right:180px;}
.innerHeader .logo a{display:block; width:100%; height:100%; /*background: green;*/}
.innerHeader .logo a img{width:100%;}
.innerHeader .logo a img:nth-child(2){opacity:0;}
.innerHeader .introTxt{float:left; text-transform:uppercase; color:#fff; line-height:70px;}
.innerHeader .menuOpen{float: right; display:block; color:#fff; font-size:16px; margin-top:25px; font-weight:bold;}
.innerHeader .menuOpen span{margin-left:15px; font-size:33px; display:inline-block; vertical-align: middle; margin-top:-6px;}

/*visual*/
.visual{}
.visual .slide li{width:100%; height:100vh; position:relative;}
.visual .slide li img{position:absolute; right:0; bottom:0; width:100%;}
.visual .slide li .txt{position:absolute; left: 10%; top:50%; color:#fff; font-size:18px; transform:translateY(-50%);}
.visual .slide li .txt h3{font-size:64px; margin:30px 0; }
.visual .slide li .txt a{display:inline-block;}
.visual .slide li .txt a span{font-size: 14px; margin-left:5px;}
.visual .slide li .scroll{position:absolute; left:50px; bottom:10%; transform:rotate(-90deg); color:#ccc; font-weight:bold;}

웹 디자인 HTML/CSS 반응형-웹

답변 1

0

J.영

안녕하세요 jianee12 님~~^^  반응형 작업할때  비주얼 부분의 이미지는 따로 포지션 값을 주면서 조정을 하면서  맞추는 강의가 나옵니다 ㅎㅎ!! 현재 그부분이 걸리시면 img에 width:100%;를 제거 해주시면 되는데 ㅎㅎ 그부분은 나중에 반응형 처리하면서     해결되기 때문에 쭉 열강하시면 좋을거같습니다~~^^

섹션5 노션링크 는 따로 없나요?

0

18

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

22

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

19

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

16

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

38

2

claude plugin 방법 자세히 부탁드려요

0

39

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

38

2

최근 코테, 과제 테스트 트렌드

0

57

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

36

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

37

2

Meet Out ProjectsMore Projects 스크롤 애니메이션

0

316

1

.gnb.on 이해가 안되어서 질문 올립니다..

0

375

2

제이쿼리 오류 문의 드립니다.

0

528

7

aocl333님이 작성해주신 질문처럼 프로젝트 썸네일 이미지 애니메이션이 부자연스럽네요.

0

287

2

reset txt

0

274

1

애니메이션

0

256

2

혹시 반응형 웹페이지 제작 1과 2사이에 다른편이있나요?

0

212

2

제이쿼리 파일이 어디에 있는건가요?

1

263

1

제이쿼리 이벤트 png 파일은 어디 있는 건가요?

0

365

5

현업관련 질문

0

209

1

자료를 다운하는데 압축 풀려고 하는데 안되네요

2

430

6

다음강의 내용과 나오는 시간

1

202

1

자료에 코딩파일 첨부 부탁드려요.

0

296

1

제공해주시는 이미지들이 강의와 다릅니다..!

0

191

1