172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
유효성검사를 하게되어 오류가난다면 실격이되는건가요 ?? 인터넷이안되는데 시험때 다만들고 유효성검사는 어떻케 하는건가요 ??
해결됨
2주만에 통과하는 알고리즘 코딩테스트 (2024년)
숫자야구 문제 코드 부분에서 약간 오류가 있는 것 같아서 질문드립니다. number, strike, ball에 각각 힌트를 분배할 때 hint[0]~[2]가 아닌 arr[0]~[2]를 담으면서, arr[1]이 strike, arr[2]가 ball이 맞는 것 같은데 영상에 나오는 코드를 다음과 같이 고치면 될까요? for arr in hint: number = arr[0] strike = arr[1] ball = arr[2]
미해결
처음 만난 리액트(React)
function MainPage(props) { const {} = props ; props 에다 중괄호에 아무것도 없이 쓰는 건 객체를 선언하기 위함인가요? 무슨 기능을 하는지 모르겠어요 이 코딩 한 줄 쓰는 이유가 뭔가요?
미해결
네이버웹툰 만화 -> 신혼일기 -> 15화 제목을 가져와 보려고 하기와 같이 코드를 작성했습니다만 주피터 노트북에서 run 했을 때 [ ] 라고만 나옵니다 ㅠㅠ 어떻게 해야 할까요?? import requests from bs4 import BeautifulSoup as bs url = " https://comic.naver.com/webtoon/list?titleId=812354 " rsp = requests.get(url, verify=False) rsp.raise_for_status() soup = bs(rsp.text, "lxml") print(soup.find_all("span", attrs={"class": "EpisodeListList__title--lfIzU"}))
미해결
우리를 위한 프로그래밍 : 파이썬 중급 (Inflearn Original)
안녕하세요. 강의 감사히 잘 듣고 있는 수강생입니다. 클로저 관련 내용을 듣다 궁금한 점이 있어 질문 드립니다. 해당 문제와 관련하여 다른 분들도 동일한 질문을 여러 번 올려주셨는데 "명확하게 이렇기 때문이다"라는 답변이 없이 외부 링크를 걸어주시거나 단답형으로 답변을 주셨던 것 같아 다시 질문을 드립니다. def closure_ex1(): # Free variable series = [] # 클로저 영역 def averager(v): # series = [] # 주석 해제 후 확인 series.append(v) print('inner >>> {} / {}'.format(series, len(series))) return sum(series) / len(series) return averager avg_closure1 = closure_ex1() # 잘못된 클로저 사용 def closure_ex2(): # Free variable cnt = 0 total = 0 def averager(v): cnt += 1 # cnt = cnt + 1 total += v return total / cnt return averager avg_closure2 = closure_ex2() 위 두 함수 closure_ex1과 closure_ex2를 비교하면 차이는 series는 list, cnt와 total은 int형 변수라는 것, averager 함수 내부에서 series는 append 작업을 하고, cnt와 total은 값을 더해주는 작업을 한다는 것 입니다. 그런데 closure_ex1에서는 오류가 나지 않고, closure_ex2에서는 averager 안에 nonlocal cnt, total을 작성하지 않으면 오류가 납니다. 여쭤보고 싶은 것은, [1] closure_ex1의 averager 함수 내부에 nonlocal series 라는 코드를 작성하지 않아도 되는 이유가 무엇 때문인가 입니다. closure_ex2의 averager 안에 nonlocal cnt, total 이 필요한 것은 내부 함수의 영역은 local 영역이고 closure_ex2 내부이면서 average 외부인 영역은 nonlocal 영역이기 때문에 local 영역에서 free variable을 write 작업하기 위해서는 nonlocal 변수 선언이 필요한 것으로 알고 있습니다. 하지만 series 변수에 대해서는 왜 nonlocal series 라는 코드가 필요하지 않은 것인지요? 제가 추가로 공부할 링크를 주시는 것은 감사하지만, 이 질문에 대한 답변을 명확하게 댓글로 작성해주시면 감사드리겠습니다. 다른 분들의 질문에 올려 주신 링크는 모두 읽어보았습니다. 또한 명확한 답변을 주시면 공부하시는 다른 분들께도 유용할 것이라고 생각합니다. 감사합니다. ps. 강의 영상을 확인하라는 답변도 주셨었는데, 수업에서 정확하게 list나 int형 자료의 scope 별 생명 주기까지 설명한 내용은 찾지 못하였으니 만약 해당 내용이 필요하다면 강의 시간을 알려주시면 감사드리겠습니다.
해결됨
[코드캠프] 시작은 프리캠프
영상 보면서 그대로 했는데 9번째 줄부터 이상하게 배열이 됩니다. 그리고 12, 13번째 줄에 따옴표가 생겨요. 인증번호 전송을 눌러도 숫자가 일 바뀝니다. 어떻게 해야 하나요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>b실전</title> <link rel="stylesheet" href="css/b.css"> </head> <body> <div class="container"> <div class="header-inner"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="headerlogo"></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 class="sub-back"></div> </div> </header> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="images/slider01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slider02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slider03.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다. <b>2020.01.09</b></a> <a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다.<b>2020.01.07</b></a> <a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지<b>2019.12.31</b></a> <a href="#none">올앳 시스템 작업 안내<b>2019.12.20</b></a> <a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다. <b>2019.12.20</b></a> </div> </div> </div> <div class="gallery"> <div class="gallery-inner"> <div class="btn"> <span>갤러리</span> </div> <div class="tab2"> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery03.jpg" alt="gallery3"></a> <a href="#none"><img src="images/gallery02.jpg" alt="gallery2"></a> </div> </div> </div> <div class="banner"> <a href="#none"><img src="images/banner-1.jpg" alt="banner"></a> </div> </div> </div> <div class="footer-inner"> <footer> <div class="copyright"> <div></div> <div></div> </div> <div class="family-site"></div> </footer> </div> </div> </body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a{ color: #222328; text-decoration: none; } .container{} .header-inner{ border: 1px solid blue; } header{ display: flex; width: 1200px; margin: auto; justify-content: space-between; position: relative; z-index: 10; } header > div{ height: 100px; } .header-logo{ width: 200px; line-height: 130px; } .navi{ width: 600px; } .content-inner{} .slide{ width: 1200px; margin: auto; } .slide > div{ height: 300px; } .items{ display: flex; width: 1200px; margin: auto; margin-top: 20px; box-sizing: border-box; } .items > div{ height: 200px; } .news{ width: 425px; } .gallery{ width: 425px; } .banner{ width: 350px; } .footer-inner{ border: 1px solid blue; } footer{ display: flex; width: 1200px; margin: auto; } footer > div{ height: 100px; border: 1px solid #000; } .copyright{ width: 1000px; } .copyright div{ height: 50px; border: 1px solid #000; } .family-site{ width: 200px; } /*slide*/ .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide >div{ width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide{ 0%{ left: 0; } 30%{ left: 0; } 35%{ left: -1200px; } 65%{ left: -1200px; } 70%{ left: -2400px; } 95%{ left: -2400px; } 100%{ left: 0; } } /*new & gallery*/ .tab-inner, .gallery-inner{ width: 97%; margin: auto; } .btn{} .btn span{ display: inline-block; width: 120px; border: 1px solid #000; text-align: center; padding: 5px; border-radius: 7px 7px 0 0; border-bottom: none; background-color: #fff; margin-bottom: -1px; } .tab1,.tab2{ border: 1px solid #000; padding: 0 4px; height: 155px; } .tab1 a{ display: block; border-bottom: 1px solid #000; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ text-align: center; } .tab2 img{ width: 120px; padding-top: 18px; } .banner img{ width: 95%; } /*navigation*/ .menu{ list-style: none; padding: 0; padding-top: 53px; } .menu li{ display: block; width: 25%; float: left; box-sizing: border-box; } .menu li > a{ border: 1px solid #000; display: block; text-align: center; padding: 5px; transition: 1; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ border: 1px solid #000; } .sub-menu a{ display: block; padding: 5px; text-align: center; color: #fff; transition: 0.5s; } .sub-menu a:hover{ background-color: #fff; color: #222328; } .sub-back{ position: absolute; left: 0; top: 100%; width: 1200px; height: 140px; background-color: #000; z-index: -1; }
미해결
[개정판] 파이썬 머신러닝 완벽 가이드
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 강의 내용을 질문할 경우 몇분 몇초의 내용에 대한 것인지 반드시 기재 부탁드립니다. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 규제 부분 코드 실습 중 규제 클래스에 관해서 cross_val_score적용 시 NaN값이 반환되는 것이 확인되어 질문드립니다. 싸이킷런 버전의 경우 1.0.2버전인데 구글링을 했을 때는, 데이터 내에 NaN값이 있어서 그럴 것이라는데 제가 확인해봤을 때는 NaN값이 없었습니다. 혹시 버전과 관련된 문제일까요...? 동일 코드에 Ridge클래스대신 LinearRegression클래스로 대체시 정상적으로 코드가 동작하는 것을 확인하여 우선 Ridge클래스에 대한 문제로 간주하고 있습니다...ㅠ
해결됨
실전! FastAPI 입문
OS: macOS python 3.10 버전을 사용하고 있고, sqlalchemy 2.0.19, pymysql 1.1.0 등등 최신 패키지 사용중입니다. from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker DATABASE_URL = "mysql+pymysql://root:todos@127.0.0.1/todos" engine = create_engine(DATABASE_URL, echo=True) SessionFactory = sessionmaker(autocommit=False, autoflush=False, bind=engine) connection.py 는 위와 같이 동일하게 작성했고, session.scalar(select(1)); 실행시 아래와 같은 오류가 발생하여 더 이상 진행을 할 수가 없습니다. Traceback (most recent call last): File "/Users/someone/Library/Application Support/JetBrains/Toolbox/apps/PyCharm-P/ch-0/232.8660.197/PyCharm.app/Contents/plugins/python/helpers/pydev/pydevconsole.py", line 364, in runcode coro = func() File "<input>", line 1, in <module> File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/orm/session.py", line 2296, in scalar return self._execute_internal( File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/orm/session.py", line 2131, in _execute_internal conn = self._connection_for_bind(bind) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/orm/session.py", line 1998, in _connection_for_bind return trans._connection_for_bind(engine, execution_options) File "<string>", line 2, in _connection_for_bind File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/orm/state_changes.py", line 139, in _go ret_value = fn(self, *arg, **kw) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/orm/session.py", line 1123, in _connection_for_bind conn = bind.connect() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/base.py", line 3264, in connect return self._connection_cls(self) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/base.py", line 147, in __init__ Connection._handle_dbapi_exception_noconnection( File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/base.py", line 2426, in _handle_dbapi_exception_noconnection raise sqlalchemy_exception.with_traceback(exc_info[2]) from e File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/base.py", line 145, in __init__ self._dbapi_connection = engine.raw_connection() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/base.py", line 3288, in raw_connection return self.pool.connect() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 452, in connect return _ConnectionFairy._checkout(self) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 1267, in _checkout fairy = _ConnectionRecord.checkout(pool) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 716, in checkout rec = pool._do_get() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/impl.py", line 169, in _do_get with util.safe_reraise(): File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/util/langhelpers.py", line 147, in __exit__ raise exc_value.with_traceback(exc_tb) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/impl.py", line 167, in _do_get return self._create_connection() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 393, in _create_connection return _ConnectionRecord(self) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 678, in __init__ self.__connect() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 902, in __connect with util.safe_reraise(): File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/util/langhelpers.py", line 147, in __exit__ raise exc_value.with_traceback(exc_tb) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/pool/base.py", line 898, in __connect self.dbapi_connection = connection = pool._invoke_creator(self) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/create.py", line 637, in connect return dialect.connect(*cargs, **cparams) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/sqlalchemy/engine/default.py", line 615, in connect return self.loaded_dbapi.connect(*cargs, **cparams) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/connections.py", line 358, in __init__ self.connect() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/connections.py", line 664, in connect self._request_authentication() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/connections.py", line 976, in _request_authentication auth_packet = _auth.caching_sha2_password_auth(self, auth_packet) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/_auth.py", line 267, in caching_sha2_password_auth pkt = _roundtrip(conn, data) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/_auth.py", line 120, in _roundtrip pkt = conn._read_packet() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/connections.py", line 772, in _read_packet packet.raise_for_error() File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/protocol.py", line 221, in raise_for_error err.raise_mysql_exception(self._data) File "/Users/someone/.pyenv/versions/fastapi-env/lib/python3.10/site-packages/pymysql/err.py", line 143, in raise_mysql_exception raise errorclass(errno, errval) sqlalchemy.exc.OperationalError: (pymysql.err.OperationalError) (1045, "Access denied for user 'root'@'localhost' (using password: YES)") (Background on this error at: https://sqlalche.me/e/20/e3q8) Check the PassWord Hashing Method: If the MySQL server is using caching_sha2_password but the client (like PyMySQL) doesn't support it, it can give rise to such issues. You can switch the MySQL user's password hashing method to mysql_native_password . 이런 글도 있어서 따라하고 새로 비밀번호를 todos 로 넣어줬는데도 마찬가지네요. 더 참고할만한 내용이 있을까요?
미해결
CSS Flex와 Grid 제대로 익히기
안녕하세요! 강의 재밌게 수강하고 있습니다 :) 해당 카드 리스트를 만들 때는 padding보다 gap을 쓰면 더 간단하게 만들 수 있지 않나요?? 왜 padding을 쓰신 건지 궁금합니다!
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
JS 코드 $(function(){ $(".con03 .list").simplyScroll({ speed : 4, pauseOnHover : false, pauseOnTouch : false }) }) CSS 코드 그리고 그림이 글자 위로 보여요 .simply-scroll .simply-scroll-clip { overflow: hidden; transform: rotate(5deg) translate(50%, 400px) scale(1.1); opacity: 0; } .simply-scroll .simply-scroll-clip .simply-scroll-list li { float: left; width: 400px; filter: brightness(50%); } .simply-scroll .simply-scroll-clip .simply-scroll-list li img { width: 100%; } .con03.motion .simply-scroll .simply-scroll-clip { transform: rotate(5deg) translate(0%, 400px) scale(1.1); opacity: 1; transition: 1.2s; transition-delay: 0.3s; }
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
학습관련 질문
해결됨
HTML5 & CSS3 기초 문법 올인원
안녕하세요. 이미지와 비디오 src를 깨짐없이 붙이고 싶은데, 링크 주소를 복사하거나 폴더에 저장할 때 링크 주소를 그대로 붙여야 하나요? 제가 지금까지 끝에 jpg나 jpeg를 붙인채로 살짝 수정했는데도 확인하면 깨져있습니다. 무슨 문제일까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A1 [최종본 제작] 가로 고정형(A1타입) – Part1에서 style.css에 .sub-menu{display: none; 후 custom.js에 $('.menu li').mouseenter(function(){ $('.sub-menu').stop().slideDown() }) 하였는데 메뉴가 내려오지 않습니다. index.html style.css custom.js 파일 첨부가 되지 않아 화면 캡처해서 올립니다. 무엇이 잘 못 되었습니까?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
텍스트 입력 영역의 내용에 대한 결과 표시 - Nu Html Checker ( w3.org )
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
e유형 중인데 html 제일 윗부분 <!DOCTYPE html> 이걸 넣으면 slide 사진이 사라지고 footer가 올라오고 저것만 없애면 완벽하게 잘 작동하는데 없애도 상관없나요? 시험때도 상관없을까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
다른건 아니오라 작업하다가 원래 fade in / fade out 슬라이드 형식대로 써봤는데.. visibility: hidden; 을 주석처리 하는순간 슬라이드가 작동되는 현상은 처음이라 적어봅니다!... 제가 뭘 잘못건드렸는지 확인 한번만 부탁드려요! <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</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">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> <li> <a href="#none">MENU-1</a> <div class="sub-menu"> <a href="#none">submenu-1</a> <a href="#none">submenu-2</a> <a href="#none">submenu-3</a> <a href="#none">submenu-4</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#none">로그인</a> <a href="#none">회원가입</a> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-img"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-d-01.jpg" alt="slide 1"></a> <a href="#none"><img src="images/slide-d-02.jpg" alt="slide 2"></a> <a href="#none"><img src="images/slide-d-03.jpg" alt="slide 3"></a> </div> </div> <div class="slide-banner"> <a href="#none"><img src="images/banner-01.png" alt="banner 1"></a> <a href="#none"><img src="images/banner-02.png" alt="banner 2"></a> <a href="#none"><img src="images/banner-03.png" alt="banner 3"></a> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/shortcut-01.png" alt="shortcut 1"> <div class="shortcut-content"> <h2>얼리버드 선착순 할인 이벤트, 신규강의 최대 30% 할인</h2> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~ 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. 더불어 소중한 리뷰를 꼼꼼히 남겨주시는 분들을 뽑아 더 큰 적립금을 추가지급해 드릴 예정이오니 리뷰도 놓치지 마시고 작성해주세요~^^ <br><b>기간: 2022년 12월 18일~ 12월 25일</b> </p> </div> <a href="#none"><img src="images/shortcut-02.png" alt="shortcut 2"></a> </div> <div class="news"> <div class="tab-inner"> <div class="btn"> <a class="active" href="#none"><span>공지사항</span></a> <a href="#none"><span>갤러리</span></a> </div> <div class="tabs"> <div class="tab1"> <a class="open-modal" href="#none">스트리밍 서버 이전 작업으로 2시간 서비스 중지<b>2022.12.20</b></a> <a href="#none">얼리버드 선착순 할인 이벤트 최대 50% 할인<b>2022.10.13</b></a> <a href="#none">내 집 마련의 꿈을 꿈이 아닌 현실로 만드는 진짜 방법<b>2022.11.31</b></a> <a href="#none">외국인과 영어로 네이티브처럼 대화하는 노하우!<b>2022.08.09</b></a> <a href="#none">월 500만원 매출을 내는 블로그 운영하는 노하우<b>2022.07.07</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.png" alt="gallery 1"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-02.png" alt="gallery 2"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-03.png" alt="gallery 3"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-04.png" alt="gallery 4"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-05.png" alt="gallery 5"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-06.png" alt="gallery 6"><span>퍼블리셔 취업</span></a> <a href="#none"><img src="images/gallery-07.png" alt="gallery 7"><span>퍼블리셔 취업</span></a> </div> </div> </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="footer-content"> <div class="footer-link"> <a href="#none">기업소개 제휴 및 입점 문의</a> <a href="#none">이용약관</a> <a href="#none">개인정보처리방침</a> <a href="#none">이메일무단수집거부</a> <a href="#none">사이트맵</a> <a href="#none">인재채용</a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 br사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다. 주요 작업 내용은 아래와 같습니다. <br><br>1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체 <br>2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치 <br>3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공 <br><br>위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다. 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다. 특히 인터넷익스플로러 11로 접속하셨을 경우 일부 문제은행 목차가 출력되지 않았을 수도 있습니다. <br><br>서버 이전 작업으로 고객님들께 불편을 드려서 대단히 죄송합니다. 정상 운영되도록 최선을 다하겠습니다. 감사합니다. </p> <a href="#none"><div class="close-modal">닫기</div></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: #333333; } a { text-decoration: none; color: inherit; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid red; */ } .left { width: 200px; } header {} header > div { /* border: 1px solid blue; */ } .header-logo { height: 150px; line-height: 170px; } .navi { /* height: 400px; */ } .menu { list-style: none; width: 90%; margin: 20px auto; padding: 0; } .menu li { position: relative; } .menu li > a { padding: 7px; border: 1px solid black; display: block; transition: 0.5s; } .menu li:hover > a { background-color: #00000021; } .sub-menu { position: absolute; left: 100%; top: 0; width: calc(100vw - 209px); padding: 8px; background-color: #00000021; z-index: 10; display: none; } .sub-menu > a { width: 120px; display: inline-block; transition: 0.5s; text-align: center; } .sub-menu > a:hover { background-color: #000; color: #fff; } .spot-menu { height: 50px; text-align: center; } .spot-menu a:after { content: "|"; margin: 8px; } .spot-menu a:last-child:after { content: none; } .right { flex: 1; } .slide { position: relative; height: 400px; } .slide > div { /* border: 1px solid green; */ } .slide-img { height: 400px; } .slide-image-inner { height: inherit; } .slide-image-inner a { visibility: hidden; position: absolute; height: inherit; top: 0; left: 0; width: 100%; animation: slide 10s linear infinite; opacity: 0; } .slide-image-inner a:nth-child(1) { animation-delay: 0s; } .slide-image-inner a:nth-child(2) { animation-delay: 3.5s; } .slide-image-inner a:nth-child(3) { animation-delay: 7s; } .slide-image-inner a img { height: inherit; width: inherit; object-fit: cover; } @keyframes slide { 0% { opacity: 0; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } .slide-banner { top: 0; right: 0; position: absolute; width: 150px; height: 300px; float: right; } .slide-banner a {} .slide-banner a img { width: 150px; display: block; } .items {} .items > div { /* border: 1px solid pink; */ } .shortcut { /* border: 1px solid black; */ height: 200px; display: flex; align-items: center; gap: 25px; margin: 0 20px; } .shortcut > img {} .shortcut > a {} .shortcut h2 {} .shortcut p {} .shortcut p b {} .news { height: 250px; } .tab-inner { width: 95%; margin: auto; margin-top: 25px; } .btn {} .btn a { width: 100px; text-align: center; display: inline-block; border: 1px solid black; margin-right: -6px; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #ddd; margin-bottom: -1px; padding: 4px; } .tabs {} .tabs > div {} .tab1 { background-color: #fff; border: 1px solid black; padding: 6px; } .tab1 a { border-bottom: 1px dashed black; padding: 6px; display: block; } .tab1 a:last-child { border-bottom: none; } .tab1 a b { padding-right: 100px; float: right; font-weight: normal; } .tab2 { display: none; border: 1px solid black; padding: 20px; height: 140px; text-align: center; /* box-sizing: border-box; */ } .tab2 a { display: inline-block; text-align: center; margin: 0 15px; } .tab2 img { width: 200px; } .tab2 a span { display: block; } .btn a.active { background-color: #fff; } footer { display: flex; } footer > div { /* border: 1px solid blue; */ height: 120px; } .footer-logo { width: 200px; line-height: 180px; } .footer-content { flex: 1; } .footer-content > div { /* border: 1px solid green; */ height: 60px; /* box-sizing: border-box; */ /* padding: 0 20px; */ } .footer-link { padding-top: 30px; box-sizing: border-box; } .footer-link > a:hover { text-decoration: underline; color: blue; } .footer-link a::after { content: "|"; margin: 0 8px; color: #ccc; } .footer-link a:last-child:after { content: none; } .copyright { /* padding-top: -100px; */ } .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000003b; display: none; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; padding: 20px; width: 500px; } .close-modal { float: right; border: 1px solid black; padding: 2px; } $('.menu li').mouseenter(function(){ $('.sub-menu').stop().fadeIn() }); $('.menu li').mouseleave(function(){ $('.sub-menu').stop().fadeOut() }); $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.btn a:last-child').click(function(){ $('.tab1').hide() $('.tab2').show() $(this).addClass('active') $(this).siblings().removeClass('active') }); $('.open-modal').click(function(){ $('.modal').fadeIn() }); $('.close-modal').click(function(){ $('.modal').fadeOut() });
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
if(Number(activeLi) < 0){ activeLi = Number(activeLi) + 260; //왼쪽에 있던 카드가 오른쪽으로 갔다면, 다시 왼쪽으로 갈 수 있도록 PREV 버튼 활성화 slidePrev.style.color = '#2f3059'; slidePrev.classList.add('slide-prev-hover'); slidePrev.addEventListener('click',transformPrev); if(Number(activeLi) === 0){ slideNext.style.color = '#cfd8dc'; slideNext.classList.remove('slide-prev-hover'); //이벤트처리. 클릭을 눌러도 더이상 동작하지 않게. slideNext.removeEventListener('click', transformPrev); } } let activeLi = classList.getAttribute('data-position'); activeLi에 속성을 가져오고 if문에서 Number를 꼭 써야한다는 것이 정확하게 이해가 잘 안가요... Number()로 형변환을 하지 않으면 어떻게 되나요 ? 어차피 index.html에서 data-position의 값으로 숫자를 지정한거 아닌가요? <ul class="class-list" data-position="0"> 쌍따옴표로 감싸면 다 문자로 인식되는건가요? 강의를 띄엄띄엄봐서 ㅠㅠ 헷갈립니다...
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>a실전연습</title> <link rel="stylesheet" href="css/실전a.css"> </head> <div class="container"> <header> <div class="heder-logo"> <a href="none"><img src="images/header-logo.PNG" alt="header logo"></a> </div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#none"> <img src="images/banner-1.jpg" alt="banner1"> </a> </div> <div class="shortcut"> <a href="#none"><img src="images/banner-2.jpg" alt="banner2"></a> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/footer-logo.png" alt="footerlogo"></a> </div> <div class="copyright"> 상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장<br> 사업장주소 : 서울특별시 강남구 테헤란로 123-56 </div> <div class="sns"> <a href="#none"><img src="images/SNS.png" alt=""></a> </div> </footer> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #222328; } a{ color: #222328; text-decoration: none; } .container{ width: 1200px; border: 1px solid #000; margin: auto; } header{ display: flex; justify-content: space-between; } header > div{ height: 100px; border: 1px solid #000; } .heder-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide > div{ height: 300px; border: 1px solid #000; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 500px; } .banner{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer > div{ height: 100px; border: 1px solid #000; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*Image & Text */ .heder-logo,.footer-logo{ line-height: 130px; } .copyright{ text-align: center; margin-top: 30px; line-height: 20px; }
