코딩 질문
미해결
인터랙티브 웹 개발 제대로 시작하기
작성해주신 코드를 직접 코딩해보며 예제를 익히고 있는데 코드는 똑같이 쓴 것 같은데 영상에서 설명해주신 노란박스가 안떠서 질문을 드립니다. 어떠한 이유에서 저는 노란박스가 화면에 안나오는 걸까요 ? <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > < link rel = "stylesheet" href = "css/reset.css" > < link rel = "stylesheet" href = "css/style.css" > </ head > < body > <!-- <div class="progress-bar-con"> <div class="progress-bar"></div> </div> <div class="select-character"> <button class="select-character-btn select-character-ilbuni" data-char="ilbuni" ></button> <button class="select-character-btn select-character-ragirl" data-char="ragirl"></button> </div> --> < div class = "world" > < div class = "stage" > < div class = "house" > < section class = "wall wall-left" ></ section > < section class = "wall wall-left" ></ section > < section class = "wall wall-front wall-front-a" > < div class = "wall-content" > < h2 class = "wall-title" >1</ h2 > </ div > </ section > < section class = "wall wall-front wall-front-b" > < div class = "wall-content" > < h2 class = "wall-title" >2</ h2 > </ div > </ section > < section class = "wall wall-front wall-front-c" > < div class = "wall-content" > < h2 class = "wall-title" >3</ h2 > </ div > </ section > < section class = "wall wall-front wall-front-d" > < div class = "wall-content" > < h2 class = "wall-title" >4</ h2 > </ div > </ section > </ div > <!--// house --> <!-- 캐릭터 놓이는 곳 --> </ div > <!--// stage --> </ div > <!--// world --> </ body > </ html > style.css body { font-family: 'Times New Roman' , Times , serif , 나눔고딕; -webkit-overflow-scrolling : touch; color: # 555 ; background: # fff000 ; } .world { position: fixed; /* 스크롤을 내려도 계속 같은 화면이 보이기 위해서*/ left: 0 ; top: 0 ; width: 100vw ; height: 100vh ; /* 창에 꽉 차도록*/ perspective: 1000px ; } .stage { /* 하우스안에 벽이 있고 캐릭터들은 하우스 밖과 월드 사이에 있기 때문에 스테이지 생성 */ position: absolute; left: 0 ; top: 0 ; width: 100vw ; height: 100vh ; transform-style: preserve-3d; /* 월드에서의 3d가 그 밑(자식)의 효과까지 적용되기 위에서 세팅함, ie11에서도 적용안함 webkit적용된 브라우저에서 잘 적용됨 ㅎ*/ } .house { left: 0 ; top: 0 ; width: 100vw ; height: 100vh ; transform-style: preserve-3d; } .wall { position: absolute; left: 0 ; top: 0 ; width: 100vw ; height: 100vh ; background: rgba ( 255 , 255 , 255 , 0.8 ); }
- 노란박스
- HTML/CSS
- javascript
- 인터랙티브-웹