강의와는 다른내용이긴한데..

답변 감사합니다!

slick.js 이런 경우는 어떻게 해야하나요..?

메뉴가 내려오면서 슬릭 슬라이더 적용한 이미지들이 메뉴상단 오른쪽 작은이미지처럼 밀린 모습입니다. 가상으로 혼자 집에서 연습 해보는중이에요 혹시 메뉴 부분에 position: absolute 속성을 주면 붕 뜨니까 슬라이더를 안밀어버리려나 싶어서 적용해봤는데 안밀리고 잘되네요 이 방법이 잘못되거나 그런건 아니죠??

질문입니다.

아 처음에 box-sizing: border-box 줬던걸 깜박했었네요 .. 감사합니다

포토샵버전 질문입니다.

hy님 감사합니다 ㅎㅎ

아래 크로스 브라우징 재질문 드립니다

와 감사합니다 상대경로로 안해서 그랬던거네요 말씀하신대로 해보니까 해결됐어요 시험 꼭 합격하겠습니다 감사합니다

크로스 브라우징이 안됩니다..

JUST 쇼핑몰 (사진) 탑 블라우스 티 셔츠 니트 아우터 자켓 코트 가디건 머플러 팬츠 청바지 짧은바지 긴바지 레깅스 악세서리 귀고리 목걸이 반지 팔찌 (사진) (사진) (사진) 공지사항 갤러리 SMS 발송 모바일 서비스 개선작업 안내입니다. 2020.01.09 휴대폰 인증 서비스 개선 작업 기간 연장합니다. 2020.01.07 카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택 2019.12.31 올앳 시스템 작업 안내 2019.12.20 휴대폰 결제 시스템 작업이 완료되었습니다. 2019.12.20 (사진) (사진) (사진) (사진) (사진) (사진) 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56 (사진) (사진) (사진) SNS비회원주문하기 종료 안내 안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈 로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라 서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인 증이 되어야 하며, 이 는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다. 닫기 @charset 'utf-8'; body { color: #222328; background-color: #fff; font-size: 15px; margin: 0; } a { color: #222328; text-decoration: none; } .container { width: 1200px; margin: auto; } header { height: 100px; position: relative; z-index: 1; } header > div { height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; } .side-bar { position: absolute; width: 100%; height: 200px; background-color: #000; left: 0; top: 100%; display: none; z-index: -1; } .slide { margin-bottom: 20px; } .slide > div { height: 300px; } .items { overflow: hidden; margin-bottom: 20px; } .items > div { height: 200px; float: left; box-sizing: border-box; } .news { width: 500px; } .banner { width: 350px; text-align: center; } .banner a img { width: 97% } .shortcut { width: 350px; text-align: right; } .shortcut a img { width: 97%; } footer { overflow: hidden; } footer > div { height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .footer-logo a img { margin-top: 25px; } .copyright { width: 800px; text-align: center; } .copyright p { margin: 0; padding-top: 25px; box-sizing: border-box; } .sns { width: 200px; text-align: center; } .sns img { margin-top: 25px; } /*Navigation*/ .menu { list-style: none; padding: 20px 5px; width: 97%; margin-top: 48px; } .menu li { width: 25%; float: left; text-align: center; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .menu li .sub-menu { border-bottom: 1px solid #000; background-color: #000; display: none; } .menu li:first-child .sub-menu { border-left: 1px solid #000; } .menu li:last-child .sub-menu { border-right: 1px solid #000; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #fff; } .sub-menu a:hover { color: #000; background-color: #fff; } /*news&gallery*/ .tab-inner { width: 97%; margin: auto; } .btn {} .btn a { border: 1px solid #000; padding: 5px; width: 100px; display: inline-block; margin-right: -6px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -2px; background-color: #ddd; text-align: center; } .btn a.active { background-color: #fff; } .tab1, .tab2 { height: 155px; padding: 0 20px; box-sizing: border-box; } .tab1 { border: 1px solid #000; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; } .tab1 a:hover { color: royalblue; text-decoration: underline; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; text-align: center; display: none; } .tab2 a {} .tab2 a img { width: 110px; padding-top: 23px; margin-left: 10px; } /*slide*/ .slide { position: relative; height: 300px; width: 1200px; overflow: hidden; } .slide div { width: 3600px; font-size: 0; position: absolute; animation: ani 10s linear infinite; } .slide div a {} @keyframes ani { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /*Modal*/ .modal { position: absolute; width: 100%; height: 100%; background-color: rgba(221, 221, 221, 0.44); left: 0; top: 0; z-index: 100; display: none; } .modal-inner { background-color: #fff; width: 330px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px; border-radius: 10px; } .modal-inner h2 { text-align: center; background-color: royalblue; color: #fff; } .modal-inner p { line-height: 2; } .modal-inner a { float: right; margin-right: 20px; border: 1px solid #000; padding: 5px 10px; } 부탁드립니다 ..

크로스 브라우징이 안됩니다..

차단된 컨텐츠 허용해도 똑같습니다 ㅠ html 파일 오른쪽버튼누르고 연결프로그램으로 접속하면 크롬 엣지 익스플로러 전부 다 저런 화면으로 나와요.. 블라켓츠 실시간 미리보기는 크롬으로 연결해놓았는데 거기선 정상적인데 뭐가 문제인지 .. 아 그리고 혹시 컴퓨터 설정같은게 문제인가 싶어서 예제완성본파일 크로스 브라우징해봤는데 그거는 정상적으로 나와요 아무래도 제가 코딩한게 문제인건가 싶어서 간단한 캡쳐본 올립니다 (사진)(사진)

안녕하세요 강사님 질문 있습니다

감사합니다!