172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>영상박물관</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">박물관 소개</a> <div class="sub-menu"> <a href="#none">인사말</a> <a href="#none">박물관연혁</a> <a href="#none">박물관 조직도</a> <a href="#none">오시는 길</a> </div> </li> <li> <a href="#none">전시</a> <div class="sub-menu"> <a href="#none">전시 리스트</a> <a href="#none">전시일정</a> <a href="#none">특별전</a> <a href="#none">지역작가</a> </div> </li> <li> <a href="#none">체험행사</a> <div class="sub-menu"> <a href="#none">문화행사</a> <a href="#none">진로체험</a> <a href="#none">명사특강</a> </div> </li> <li> <a href="#none">커뮤니티</a> <div class="sub-menu"> <a href="#none">사용자메뉴얼</a> <a href="#none">박물관 약도</a> <a href="#none">게시판</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <span>|</span> <a href="#none">회원가입</a> </div> </header> </div> <div class="center"> <div class="items"> <div class="shortcut"> <img class="shortcut-image" src="images/shortcut-01.png" alt="shortcut image"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트</h2> <p> 12월 개강반을 접수하는 분들께는 15%의 얼리버드 할인을 제공합니다.<br> <b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut link"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.10.13</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.11.31</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우</em><b>2022.08.09</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.07.07</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery1"><span>퍼블리셔 취업 가이드</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery2"><span>전문가가 되는 사진촬영</span></a> </div> </div> </div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-e-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="slide3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footer logo"></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="sns"> <a href="#none"><img src="images/sns-01.png" alt="sns1"></a> <a href="#none"><img src="images/sns-02.png" alt="sns2"></a> <a href="#none"><img src="images/sns-03.png" alt="sns3"></a> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h3>스트리밍 서버 이전으로 서비스 장애</h3> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <ol> <li>서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체</li> <li>문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치</li> <li>스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공</li> </ol> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다.<br> 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다.<br> 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; body { margin: 0; background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ /* height: 800px; */ } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } header { position: relative; z-index: 10; } header > div { /* border: 1px solid blue; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 150px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; background-color: #fff; position: relative; } .menu li > a { border: 1px solid #000; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: #000; color: #fff; } .sub-menu { border: 1px solid #000; position: absolute; top: 0; left: 100%; width: 100%; height: 150px; background-color: #ddd; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.5s; color: #000; } .sub-menu a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:hover { text-decoration: underline; } .items {} .items > div { /* border: 1px solid black; */ } .shortcut { height: 150px; display: flex; align-items: center; font-size: 14px; padding: 0 5px; gap: 5px; } .shortcut .shortcut-image { height: 70px; } .shortcut h2 { font-size: 17px; } .news { height: 250px; } .gallery { height: 250px; } /* news & gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn span { border: 1px solid #000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #ddd; } .tab1 { border: 1px solid #000; height: 170px; box-sizing: border-box; padding: 5px 10px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid #000; overflow: hidden; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { display: block; float: left; font-style: normal; width: 75%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000; height: 170px; text-align: center; box-sizing: border-box; padding-top: 35px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 80px; border-radius: 5px; margin: 0 25px; } .tab2 a span { display: block; } .slide { display: flex; } .slide > div { /* border: 2px solid green; */ height: calc(100vh - 100px); } .slide-image { flex: 1; overflow: hidden; position: relative; height: inherit; } .slide-image-inner { font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; height: inherit; } .slide-image-inner a { height: inherit; } .slide-image-inner a img { width: 100%; height: inherit; object-fit: cover; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -100%; } 65% { top: -100%; } 70% { top: -200%; } 95% { top: -200%; } 100% { top: 0; } } footer { display: flex; height: 100px; align-items: center; } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; display: flex; align-items: center; } .copyright { flex: 1; } .sns { width: 230px; } .sns a img { width: 50px; border-radius: 5px; } /* modal */ .modal { background-color: #00000052; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #fff; width: 500px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* Navigation */ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) /* modal */ $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
bimil1121
2023-04-02T06:41:05.157Z
댓글 1
좋아요 1
조회수 256
미해결
처음 만난 리액트(React)
clock은 위에 app import문을 주석처리하고 cd my-app하고 npm start하니까 돌아가는데, 이거는 똑같이 해도 계속 안 돌아가고 오류메세지가 뜹니다. 어떻게 수정해야하나요?
wyzzzm21
2023-04-01T14:52:29.741Z
댓글 1
좋아요 0
조회수 835
미해결
처음 만난 리액트(React)
npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\hhayo\AppData\Local\npm-cache\_logs\2023-04-01T13_55_50_978Z-debug-0.log 이런 에러가 뜨는데 cd my-app을 해야만 돌아가는데 어떻게 바꿀 수 있나요? 그리고 이유가 뭔가요?
wyzzzm21
2023-04-01T13:56:37.641Z
댓글 1
좋아요 0
조회수 1137
미해결
처음 만난 리액트(React)
복붙해서 한건데, 실행이 안돼서 위에 import app 부분 주석처리하니까 돌아갑니다. 강사님은 안그러는데 제꺼에서는 왜 그런가요?
wyzzzm21
2023-04-01T13:50:29.175Z
댓글 1
좋아요 0
조회수 1168
미해결
인터랙티브 웹 개발 제대로 시작하기
강사님! 함수를 생성자 함수로서 실행을 하고 생성자 함수의 this에 개별 객체를 바인딩 하기 위해서 new 키워드를 쓰는것으로 이해를 했는데 제가 이해한게 맞나요?
HTML/CSS javascript 인터랙티브-웹
윤상일
2023-03-31T09:10:55.198Z
댓글 2
좋아요 0
조회수 564
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>DropDown Navigation</title> <style> @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap'); body { font-family: 'Black Han Sans', sans-serif; color: #222; line-height: 1.5em; } a{ color: #222; text-decoration: none; } </style> </head> <body> <div class="items"> <div class="item"> <img src="인프런/assets/product-01.png" alt=""> <div class="caption"> <h2>Rirakuma doll 25cm</h2> <p> The owner of the most popular and cute looks Rilakkuma ~! Rilakkuma giant - It is size sale to small size. </p> <p>Price : <s>$12</s> → $10</p> <a href=""></a> </div> </div> </div> </body> </html>
2023-03-30T11:28:20.067Z
댓글 1
좋아요 1
조회수 351
미해결
인터랙티브 웹 개발 제대로 시작하기
3개의문 2 강의 중에서 일분이 이미지를 가릴 때 transition을 사용하셔서 처음 위치에서 오른쪽으로 100% 이동을 시키셨잖아요? 그 때 처음 두개의 문에 있던 일분이는 문 뒤에 가혀 보이지 않게 되었는데 세번째 문에 있던 일분이는 <div class = 'stage'> </div> 위에 보였습니다. 그렇다면 처음 두개 문에 있던 일분이는 이동한 후에 레이어 상에서 이웃한 문 뒤에 위치해서 보이지 않는건가요?
HTML/CSS javascript 인터랙티브-웹
윤상일
2023-03-30T11:24:33.163Z
댓글 2
좋아요 0
조회수 459
미해결
인터랙티브 웹 개발 제대로 시작하기
저는 어떤 이미지를 넣을 때 바로 img 태그를 이용해 넣을거같은데 강사님은 항상 div 태그 안에 background-img를 넣으시더라구요 혹시 그렇게 하시는 이유가 따로 있으신가요? 궁금합니닷!
HTML/CSS javascript 인터랙티브-웹
윤상일
2023-03-30T10:36:16.680Z
댓글 2
좋아요 0
조회수 446
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
아래랑 똑같은 상황인데 어떻게 해야하나요? https://www.inflearn.com/questions/802016/django-crispy-%EC%A0%81%EC%9A%A9-%EC%98%A4%EB%A5%98
HTML/CSS javascript python django bootstrap aws docker tdd
djup1234
2023-03-30T05:35:51.396Z
댓글 2
좋아요 1
조회수 508
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 d,e타입 슬라이드 이미지 사이즈는 포토샵에서 몇으로 작업해야하는지 알 수 있을까요~??
기쁜 돌고래
2023-03-30T00:48:23.251Z
댓글 1
좋아요 1
조회수 429
미해결
중상급 퍼블리싱을 위한 CSS3의 모든 것
안녕하세요 강사님 강의를 듣다 질문이 생겨 질문드립니다. 드롭다운 컨텐츠 강의 중 23분경에 마우스 호버 이벤트가 p태그나 image가 위치하는 곳에 마우스가 올라가도 이벤트가 발생하는 문제가 있다고 말씀하셨는데요 그러면서 tour-item 에 border 가 그려진 영역이 마우스 반응영역이라고 하시면서 부모요소에 position :relative 자식요소에 position:absolute를 주시고 border영역을 제한하셨는데요 이렇게 border영역이 줄어들어도 실제로 마우스border가 그려진 영역 밖에 올려도 hover 이벤트가 발생을 하는데요 border영역 밖에서는 hover이벤트가 발생하지 않는것을 보여주시는거라 생각했는데 그게 아니라서 혼돈이 와서 질문드립니다 제가 뭔가 놓친 부분이 있나요? 최초 border영역에서만 hover 이벤트를 발생시키고 tour-content영역이 보여질때는 마우스가 tour-content영역에 있으면 tour-content를 계속 보여주고 싶은데요 여러가지 방법을 시도해보았는데 컨텐츠 내용이 사라질때 transition이 적용안되는 반쪽짜리 해결법이라 다른방법이 있나 궁금합니다
권경완
2023-03-29T07:27:43.885Z
댓글 2
좋아요 3
조회수 485
미해결
퍼블리셔 개인 포트폴리오 홈페이지 제작 완벽 가이드(PDF)
수강생참고자료 어디서 봐요?
kimgod32
2023-03-29T03:41:40.242Z
댓글 1
좋아요 1
조회수 511
해결됨
[코드캠프] 시작은 프리캠프
선생님 강의 잘 보고 있습니다. 다름이 아니라 몇 가지 여쭤보고 싶어 글을 올리게 되었습니다. 정답코드를 따로 볼 수 있는 곳이 있을까요? 제 위의 코드에서 문제점이 있을까요? button 기능이 활성화 되지 않는데 이유가 무엇인지 잘 모르겠습니다. <!DOCTYPE html> <html lang="ko"> <head> <title>Upgrade_sign_up_page</title> <style> #signup{ width: 1920px; height:1080px; background-color: #FFFFFF; /* border:1px solid red; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .main{ box-sizing: border-box; width : 670px; height : 960px; border : 1px solid #AACDFF; padding : 60px; box-shadow: 7px 7px 39px rgba(0,104,255,0.25); border-radius: 20px; display: flex; justify-content: center; } .main2{ width: 470px; height: 818px; /* border: 1px solid green; */ display : flex; flex-direction: column; align-items: center; } #introduce{ width: 466px; height: 94px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color : #0068FF } #group1{ width: 466px; height: 80px; /* border: 1px solid red; */ } #email{ width: 158px; height: 23.65px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color :#797979; } #vector1{ width: 466px; height: 0px; border: 1px solid #0068FF; } #sex{ width: 140px; height: 23.94px; display: flex; justify-content: space-between; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color : #000000 /* border:1px solid #0068FF */ } #checkbox{ width: 454px; height: 21.06px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-size: 13px; line-height: 21px; color : #000000 } #line{ width: 470px; height: 1px; background-color: #E6E6E6; } button{ width: 470px; height: 75px; background-color: #FFFFFF; border: 1px solid #0068FF; border-radius: 10px; display: flex; align-items: center; justify-content: center; } #button_text{ width: 70px; height: 27px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 400; font-size: 17px; line-height: 27px; text-align: center; color : #0068FF } </style> </head> <body> <div id = "signup"> <div class = "main"> <div class = "main2"> <div id = "introduce"> 회원 가입을 위해<br>정보를 입력해주세요 </div> <br> <div id = "group1"> <div id = "email"> *이메일 </div> <input type ="text" style="border: none; width:200px;height: 50px;font-size: 30px;"> <div id = "vector1"></div> </div> <br> <div id = "group1"> <div id = "email"> *이름 </div> <input type ="text" style="border: none; width:200px;height: 50px;font-size: 30px;"> <div id = "vector1"></div> </div> <br> <div id = "group1"> <div id = "email"> *비밀번호 </div> <input type ="password" style="border: none; width:200px;height: 50px;font-size: 30px;"> <div id = "vector1"></div> </div> <br> <div id = "group1"> <div id = "email"> *비밀번호확인 </div> <input type ="password" style="border: none; width:200px;height: 50px;font-size: 30px;"> <div id = "vector1"></div> </div> <br><br> <div id = "sex"> <div> <input type = "radio" name = "gender">여성 </div> <div> <input type = "radio" name = "gender">남성 </div> </div> <br><br> <div id ="checkbox"> <input type = "checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <br><br> <div id = "line"></div> <br><br> <button> <div id = "button_text"> 가입하기 </div> </button> </div> </div> </div> </body> </html>
shhhhzzang
2023-03-28T14:59:26.952Z
댓글 1
좋아요 0
조회수 694
미해결
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
예전에 로그인 됐었는데 로그아웃하고 다시 하려고 했더니 로그인이 안됩니다..
HTML/CSS javascript python django bootstrap aws docker tdd
djup1234
2023-03-28T09:48:03.192Z
댓글 1
좋아요 0
조회수 337
해결됨
[코드캠프] 강력한 CSS
transform 3번째 강의에서 10분 35초에 .box의 span 태그에 hover 가상선택자를 부여하는 건데 왜 .box:hover span와 같이 작성해야 하는 건지 궁금합니다! .box span:hover로 해봤을때 생각한대로 적용이 안되어서 저게 틀렸다는 건 알겠는데 왜 틀렸는지와 왜 .box:hover span와 같은 순서로 작성을 해야 하는 지 이해가 안갑니당
말차
2023-03-28T09:47:44.877Z
댓글 1
좋아요 0
조회수 334
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
안녕하세요 선생님. 플러그인 폴더 세팅 질문드립니다. 강의에는 image폴더와 source 폴더만 나와있는데 파일을 다운로드 하면 위 사진처럼 style.css, custom.js등 완성된 파일이 있습니다. 소스에서 압축 파일을 풀고 자료를 옮기면 이름이 겹쳐서 문제가 생겨서 강의처럼 images,source 외 모든 파일 지우고 진행해도 괜찮을까요?
박종규
2023-03-28T08:22:21.033Z
댓글 1
좋아요 1
조회수 420
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>E3</title> <link rel="stylesheet" href="css/E3.css"> </head> <body> <div class="container"> <div class="maincontent"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"> <ul class="menu"> <li> <a href="#none">MENU1</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU2</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU3</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU4</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> <li> <a href="#none">MENU5</a> <div class="sub-menu"> <a href="#none">submenu1</a> <a href="#none">submenu2</a> <a href="#none">submenu3</a> <a href="#none">submenu4</a> </div> </li> </ul> </div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="items"> <div class="shortcut"></div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a class="open-modal" href="#none"><em>스트리밍 서버 이전 작업으로 2시간 서비스 중지</em><b>2022.12.20</b></a> <a href="#none"><em>얼리버드 선착순 할인 이벤트 최대 50% 할인</em><b>2022.12.20</b></a> <a href="#none"><em>내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법</em><b>2022.12.20</b></a> <a href="#none"><em>외국인과 영어로 네이티브처럼 대화하는 노하우!</em><b>2022.12.20</b></a> <a href="#none"><em>월 500만원 매출을 내는 블로그 운영하는 노하우</em><b>2022.12.20</b></a> </div> </div> </div> <div class="gallery"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-e-01.jpg" alt="슬라이드1"></a> <a href="#none"><img src="images/slide-e-02.jpg" alt="슬라이드2"></a> <a href="#none"><img src="images/slide-e-03.jpg" alt="슬라이드3"></a> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p>스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. 서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <div class="close-modal" href="none">X 닫기</div> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/E3.js"></script> </body> </html> @charset "utf-8"; body { font-size: 15px; background-color: #fff; color: #000; margin: 0; } a { color: #000; text-decoration: none; } .container { border: 1px solid seagreen; } .maincontent { border: 1px solid sandybrown; display: flex; } .left { width: 200px; } .center { width: 400px; } .right { flex: 1; } header {} header > div { border: 1px solid aqua; } .header-logo { height: 100px; } .navi { height: 500px; } /* NAVIGATION */ .menu { width: 90%; margin: auto; padding: 0; list-style: none; } .menu li { position: relative; text-align: center; } .menu li > a { display: block; border: 1px solid #000; padding: 5px; transition: 0.3s; } .menu li:hover > a { background-color: lightgray; } .sub-menu { display: none; position: absolute; top: 0; left: 100%; width: 100%; } .sub-menu a { display: block; background-color: #00000050; padding: 5px; } .sub-menu a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; } .items {} .items > div { border: 1px solid lightcoral; } .shortcut { height: 150px; } .news { height: 250px; } .gallery { height: 250px; } /* news-gallery */ .tab-inner { box-sizing: border-box; overflow: hidden; } .btn {} .btn a { border: 1px solid #000; display: inline-block; width: 100px; padding: 5px; text-align: center; border-radius: 5px 5px 0 0; background-color: lightgray; margin-bottom: -1px; border-bottom: none; } .tab1 { border: 1px solid #000; } .tab1 a { width: 95%; margin: auto; overflow: hidden; padding: 5px; display: block; border-bottom: 1px dashed lightgray; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { float: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 70%; } .tab1 a b { float: right; } /* .tab-inner { width: 95%; margin: auto; } .btn {} .btn > a { border: 1px solid #000; padding: 5px; width: 100px; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: gainsboro; } .tab1 { border: 1px solid #000; } .tab1 a { display: block; overflow: hidden; padding: 5px; border-bottom: 1px solid #000; width: 95%; margin: auto; } .tab1 > a:last-child { border-bottom: none; } .tab1 > a em { font-style: normal; width: 70%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab1 > a > b { font-weight: normal; float: right; } */ /* slide-image */ .slide-banner { /* height: 150px; */ display: flex; } .slide-banner a img { width: 100%; } /* Slide */ .slide {} .slide-image { height: calc(100vh - 120px); } /* Slide */ .slide { display: flex; } .slide-image { flex: 1; position: relative; overflow: hidden; } .slide-image-inner { /* 실제로 움직이는 요소 */ font-size: 0; width: 300%; height: inherit; position: absolute; animation: slide 10s linear infinite; } .slide-image-inner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ display: inline-block; height: inherit; width: calc(100% / 3); } .slide-image-inner a img { width: 100%; height: inherit; object-fit: cover; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -100%; } 65% { left: -100%; } 70% { left: -200%; } 95% { left: -200%; } 100% { left: 0; } } /* 좌우 슬라이드 */ /* .slide-image-inner { top: 0; left: 0; font-size: 0; width: 100%; height: inherit; position: absolute; animation: slide 10s linear infinite; } .slide-image-inner a { width: inherit; height: inherit; } .slide-image-inner a img { object-fit: cover; width: inherit; height: inherit; } @keyframes slide { 0% { top: 0; } 30% { top: 0; } 35% { top: -100%; } 65% { top: -100%; } 70% { top: -200%; } 95% { top: -200%; } 100% { top: 0; } } */ footer { display: flex ; } footer > div { border: 1px solid saddlebrown; height: 100px; } .footer-logo { width: 200px; } .copyright { flex: 1; } .sns { width: 250px; } /* modal */ .modal { display: none; position: absolute; background-color: #0000004f; top: 0; left: 0; width: 100%; height: 100%; } .modal-content { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; background-color: #fff; padding: 15px; width: 400px; height: 450px; } .modal-content h2 { text-align: center; background-color: #000; padding: 5px; color: #fff; } .modal-content p {} .close-modal { float: right; border: 1px solid #000; padding: 5px; width: 50px; } // navigation $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) // modal $('.open-modal').click(function(){ ('.modal').fadeIn() }) $('.close-modal').click(function(){ ('.modal').fadeOut() }) 안녕하세요! 공지사항 첫째 줄 글을 클릭했을 때 팝업창이 떠야 하는데 왜 안 뜨는 건지 코드를 봐도 잘 모르겠어서 질문 남깁니다. 왜 안뜨는 걸까요...? 완성본 코드와 비교했을 때 틀린 부분은 없는 것 같아서요.
빠삭
2023-03-27T16:46:50.441Z
댓글 1
좋아요 1
조회수 379
해결됨
[코드캠프] 강력한 CSS
강의자료 예제 이미지 다운로드 안되요 계속 못찾는다고 나와요
whdnjsgh22
2023-03-27T15:21:34.466Z
댓글 1
좋아요 0
조회수 489
해결됨
[코드캠프] 강력한 CSS
안녕하세요, 열심히 기초부터 수업을 듣고 있는 학생입니다. 다름이 아니라 학습자료는 노션 계정이 있어야 가능하다고 공지사항에 적어주셨는데 계정 가입 이후의 진행과정은 어떻게 되나요? 노션 계정이 따로 없어서 일단 만들고자 하는데 만든 이후 제가 따로 알려드려야 할 부분이 있을까요?
비전공자개발자되기
2023-03-27T13:58:56.743Z
댓글 1
좋아요 0
조회수 410
미해결
조코딩의 코딩 기초와 웹 풀스택 개발
이번에 새로 결제 했는데요. 강의자료 다운로드 링크 오류같습니다 답변 부탁드려요
HTML/CSS javascript node.js web-api
sonyyjj
2023-03-27T03:20:03.052Z
댓글 1
좋아요 0
조회수 385
