이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?
미해결
웹 애니메이션의 새로운 표준, Web Animations API
(사진)
- HTML/CSS
초보개발자
댓글 2
좋아요 0
조회수 1207
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
B4 최종본, 네비 메뉴가 이상해요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
B4 최종본 작성중인데 영상에 나온대로 따라했는데 네비 메뉴와 서브메뉴가 엄청 크게 출력됩니다 ㅠㅠ 왜 이럴까요..
- HTML/CSS
- jquery
- 웹-디자인
조호순
댓글 1
좋아요 1
조회수 228
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
미해결
애플 웹사이트 인터랙션 클론!
안녕하세요!! 강의를 전부 듣고 코드를 뜯어보며 복습중에 있습니다. section-0에서 사용한 것을 이용해 스크롤 될 때 matrix로 Text에 scale(80)정도로 주려고 코드를 입력해보니 적용은 되었으나 스크롤을 빠르게 올릴시에 정상적으로 사이즈가 줄어들지 않고 줄어들다 말거나 그러더라구요...ㅠㅠ 폰트 픽셀도 많이 깨지는 현상이 발생하구요. 혹시 해결하려면 어떤식으로 접근해야 할까요? 해당 코드 첨부드립니다. const sectionInfo = [ { // section-0 type: "sticky", heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector("#scroll-section-0"), messageA: document.querySelector("#scroll-section-0 .main-message.a"), messageB: document.querySelector("#scroll-section-0 .main-message.b"), messageC: document.querySelector("#scroll-section-0 .main-message.c"), messageD: document.querySelector("#scroll-section-0 .main-message.d"), }, values: { messageA_opacity_in: [0.4, 1, { start: 0, end: 0.05 }], messageA_opacity_out: [1, 0, { start: 0.15, end: 0.2 }], messageA_scale_in: [1, 80, { start: 0.05, end: 0.25 }], messageA_scale_out: [80, 1, { start: 0.25, end: 0.05 }], messageB_opacity_in: [0, 1, { start: 0.2, end: 0.25 }], messageB_opacity_out: [1, 0, { start: 0.35, end: 0.4 }], messageB_translateY_in: [50, 0, { start: 0.2, end: 0.25 }], messageB_translateY_out: [0, -50, { start: 0.35, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.4, end: 0.45 }], messageC_opacity_out: [1, 0, { start: 0.55, end: 0.6 }], messageC_translateY_in: [50, 0, { start: 0.4, end: 0.45 }], messageC_translateY_out: [0, -50, { start: 0.55, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageD_opacity_out: [1, 0, { start: 0.75, end: 0.8 }], messageD_translateY_in: [50, 0, { start: 0.6, end: 0.65 }], messageD_translateY_out: [0, -50, { start: 0.75, end: 0.8 }], }, }, ]; function calcValues(values, currentScrollY) { let returnValue; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; // 현재 스크롤 섹션에서 스크롤 된 범위를 비율로 구하는 식 const scrollRatio = currentScrollY / currentSectionHeight; if (values.length === 3) { const scrollAniStart = values[2].start * currentSectionHeight; const scrollAniEnd = values[2].end * currentSectionHeight; const scrollAniHeight = scrollAniEnd - scrollAniStart; if (currentScrollY >= scrollAniStart && currentScrollY <= scrollAniEnd) { returnValue = ((currentScrollY - scrollAniStart) / scrollAniHeight) * (values[1] - values[0]) + values[0]; } else if (currentScrollY < scrollAniStart) { returnValue = values[0]; } else if (currentScrollY > scrollAniEnd) { returnValue = values[1]; } } else { returnValue = scrollRatio * (values[1] - values[0]) + values[0]; } return returnValue; } function playAnimation() { const objs = sectionInfo[currentSection].objs; const values = sectionInfo[currentSection].values; const currentScrollY = scrollY - prevScrollHeight; const currentSectionHeight = sectionInfo[currentSection].scrollHeight; const scrollRatio = currentScrollY / currentSectionHeight; switch (currentSection) { case 0: // message if (scrollRatio <= 0.05) { objs.messageA.style.opacity = calcValues( values.messageA_opacity_in, currentScrollY ); } else { objs.messageA.style.opacity = calcValues( values.messageA_opacity_out, currentScrollY ); objs.messageA.style.transform = `matrix(${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0, ${calcValues( values.messageA_scale_in, currentScrollY )}, 0, 0)`; }
- HTML/CSS
- javascript
- 웹-디자인
- svg
- 인터랙티브-웹
- 클론코딩
DDU
댓글 1
좋아요 0
조회수 435
UpdateView - 포스트 수정 페이지 만들기 에서 질문이 있습니다.
해결됨
Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
26:27초 쯤에 tests.py의 test_update_post() 함수에서 카테고리의 pk를 적어줘야하는지 이해가 잘 되지 않습니다. 앞서 setUp() 함수에서 post_001과 post_002를 생성할 때는 category를 입력할 때 pk 는 사용하지 않고 진행했습니다. 하지만 왜 포스트 수정을 핱때는 category를 입력할 때 pk 를 사용해야 하는지 잘 모르겠습니다.
- HTML/CSS
- javascript
- python
- django
- bootstrap
- aws
- docker
- tdd
wodnr0710
댓글 1
좋아요 0
조회수 420
슬라이드 위치가 이상합니다...
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
범위가 넓어지면서 슬라이드가 오른쪽으로 빗겨나갑니다.. 왜일까요..ㅠㅠ <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>B-4 강의들으면서 만들기</title> </head> <body> <div class="container"> <div class="header-inner"> <div class="header"> <div class="logo"><a href="#none"><img src="image/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> <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> </ul> <div class="sub-back"></div> </div> </div> </div> <div class="content-inner"> <div class="slide"> <div> <a href="#none"><img src="image/slide_1.jpg" alt="slide1"></a> <a href="#none"><img src="image/slide_2.jpg" alt="slide2"></a> <a href="#none"><img src="image/slide_3.jpg" alt="slide3"></a> </div> </div> <div class="items"> <div class="notice"> <div class="tab-inner"> <div class="btn"> <a href="#none">공지사항</a> </div> <div class="tab1"> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> <a href="#none"><em>SMS 발송 모바일 서비스 개선작업 안내입니다.</em><b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"> <div class="tab-inner"> <div class="btn"> <a href="#none">갤러리</a> </div> <div class="tab2"> <a href="#none"><img src="image/gallery1.jpg" alt="gallery1"> </a> <a href="#none"><img src="image/gallery2.jpg" alt="gallery2"> </a> <a href="#none"><img src="image/gallery3.jpg" alt="gallery3"> </a> </div> </div> </div> <div class="banner"><a href="#none"><img src="image/shortcut.jpg"></a></div> </div> </div> <div class="footer-inner"> <div class="footer"> <div class="copyright"> <div>법적고지 개인정보취급방침 개인정보처리방침</div> <div>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장 사업장주소 : 서울특별시 강남구 테헤란로 123-56</div> </div> <div class="site"></div> </div> </div> <div class="modal"> <div class="modal-content"> <h2>SNS비회원주문하기 종료 안내</h2> <p>안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다. <br> 회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</p> <a href="#none">X 닫기</a> </div> </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: #222328; font-size: 15px;} a {color: #222328; text-decoration: none;} ul, li {list-style: none; padding: 0; margin: 0;} .container {width: 100%; height: 1000px;} .header-inner {background-color: #ddd; } .header { width: 1200px; height: 100px; margin: auto; position: relative; z-index: 9999;} .header > div {} .header .logo {width: 200px; float: left;} .header .navi {width: 600px; float: right;} /* 네비게이션 */ .menu {margin-top: 60px; position: absolute;} .menu li {float: left; width: 150px; box-sizing: border-box; text-align: center; ;} .menu li > a {display: block; padding: 10px; border: 1px solid #000; transition: 0.5s; background-color: #fff;} .menu li:hover > a {background-color: #000; color: #fff;} .sub-menu {border: 1px solid #000; display: none;} .sub-menu a {display:block; padding: 5px; transition: 0.5s; color: #fff; background-color: #000; } .sub-menu a:hover { background: #fff; color: #000;} .sub-back { display: none; width: 1200px; height: 120px; background-color: #000; position: absolute; top: 98px; left: 0; z-index: -1; } /* 아이템 */ .content-inner { width: 100%; } /* 슬라이드 */ .slide { width: 1200px; height: 300px; border: 1px solid #000; position: relative; overflow: hidden;} .slide > div { width: 3600px; font-size: 0; animation: slide 10s linear infinite; top: 0; left: 0; position: absolute;} .slide > div > a:nth-child(1) {animation-delay: 0s;} .slide > div > a:nth-child(2) {animation-delay: 3.5s;} .slide > div > a:nth-child(3) {animation-delay: 7s;} @keyframes slide { 0% {left:0px} 30% {left:0px} 35% {left:-1200px} 65% {left:-1200px} 70% {left:-2400px} 95% {left:-2400px} 100% {left:0px} } /* 아이템 */ .items {width: 1200px; margin: auto; overflow: hidden;;} .items > div { height: 200px; box-sizing: border-box;} .notice {width: 400px; float: left;} .notice .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .notice .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .notice .tab-inner .btn a {} .notice .tab-inner .tab1 {border: 1px solid #000;} .notice .tab-inner .tab1 a {padding: 5px; display: block; border-bottom: 1px solid #000;} .notice .tab-inner .tab1 a:last-child {border-bottom: none;} .notice .tab-inner .tab1 a b{ float: right; font-weight: normal;} .notice .tab-inner .tab1 a em {font-style: normal;} .gallery {width: 400px; float: left;} .gallery .tab-inner {width: 95%; margin: auto; margin-top: 10px;} .gallery .tab-inner .btn {display: inline-block; border: 1px solid #000; text-align: center; width: 100px; border-radius: 5px 5px 0 0; border-bottom: none; padding: 5px; background-color: #fff; margin-bottom: -1px;} .gallery .tab-inner .btn a {} .gallery .tab-inner .tab2 { text-align: center; border: 1px solid #000;} .gallery .tab-inner .tab2 img {width: 110px; padding-top:20px ; padding-bottom: 15px;} .banner {width: 400px; float: left; } /*푸터*/ .footer-inner {width: 100%; height: 100px; background-color: #ddd; overflow: hidden;} .footer {width: 1200px; margin: auto; overflow: hidden;} .footer > div { float: left; box-sizing: border-box; height: 100px;} .copyright {width: 1000px;} .copyright div {; height: 50%;} .site {width: 200px;} .modal {display: none;}
- HTML/CSS
- jquery
- 웹-디자인
김유나
댓글 1
좋아요 1
조회수 404
완강이 된건가요?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하세요, 강사님 지금 강의실에 보면 섹션8에 작업형3, 가설검정 콘텐츠 제작중입니다 라고 뜨고 섹션 10.에 5회 기출유형(작업형1) 강의가 업로드 되지 않았습니다. 계속 강의가 업데이트 중 인가요? 감사합니다.
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
댓글 1
좋아요 0
조회수 318
결과값이 한개만 나오는것 관련 문의
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 그랩님! 처음 질문드려봅니다ㅜㅜ 혹시 하기와 같이 코드를 작성했는데 결과값이 계속 농구공 배열 한개로만 나와서.. 다른분들 질문해주신 부분을 살펴봐도 동일한 질문이 없어 문의드립니다! 어떤부분 수정이 필요할지 피드백 부탁드려도 될까요ㅠㅠ
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
diane_kim
댓글 2
좋아요 0
조회수 363
다음강의 Part.03 관련 질문
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 part.02 강의 완강했습니다👍 너무 좋은 강의라 다음 강의 스크롤트리거 관련 질문겸 반영됐으면 하는 부분이 있어서 질문을 올립니다 part.03 강의에서 스크롤트리거 강의시 반응형으로 제작하는 강의도 포함되어있을까요? 예를 들어 pc에서는 스크롤시 위에서 아래로 내려가는 모션이 모바일에선 좌에서 우로 가는것모션처럼 코드자체는 여기저기 검색해서 구현은 가능하지만 선생님강의처럼 효율적으로 작성하는 방법이 있을까 하는 궁금에서 질문드립니다 이번강의에서 타임라인을 효율적으로 관리하시는거보고 꼭 포함되면 좋을것 같아서 없다면 포함해주시면 감사합니다ㅠㅠ
- HTML/CSS
- javascript
- 인터랙티브-웹
- gsap
플린
댓글 1
좋아요 3
조회수 452
sqlite 데이터 삭제가 안됩니다...ㅠ
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에서는 레코드삭제 버튼이 생겨서 데이터를 지울 수 있었는데, 제가 할 때는 생성되지 않아 지울 수가 없었습니다. SQL 실행에서 명령어를 넣어보려 해도 에러가 뜹니다. 어떻게 하면 데이터를 지울 수 있나요?
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
xogud5053
댓글 2
좋아요 0
조회수 626
500 Internal Server Error
미해결
ChatGPT API 입문 강의 - 30분 만에 다국어 번역기 웹 풀스택 개발하기
안녕하세요! 우선 좋은 강의 정말 감사드립니다. 강의를 듣고 직접 따라해 보다 아래와 같은 에러가 발생하여 문의 드립니다. 혹시 이 에러의 해결 법을 아신다면 공유해주시면 정말 감사드리겠습니다.
- HTML/CSS
- python
- chatgpt
정세빈
댓글 1
좋아요 0
조회수 697
포토샵 작업할때
해결됨
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
수험자 제공파일에 있는 원본이미지를 편집해서 images 폴더에 png 혹은 jpg파일로 저장하잖아요 근데 영상보면 원본이미지도 따로 저장하시던데 이 원본이미지 저장도 필수인걸까요?
- HTML/CSS
- jquery
- 웹-디자인
lipper2501
댓글 1
좋아요 2
조회수 351
메인페이지 컨텐츠영역 class.slide
미해결
웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Season1
메인페이지 컨텐츠 영역 제작하기(매거진영역) 부분에서 visual의 이전/다음/컨트롤 영역을 재사용하기 위해 class 추가하여 slide를 이용한다고 하셨는데요. <div class="con"> <div class="slide"> <div class="txt"> 가구소재에서<br> 인테리어 자재까지 <p>한솔홈데코 편리하고 행복한 공간을 만들어 갑니다.</p> </div> </div> </div> 이미 class에 slide를 사용하고 있는데 또 visual에 slide를 사용하고 css를 수정하는 것을 보고 질문드립니다.
- HTML/CSS
mujigekr
댓글 1
좋아요 0
조회수 485
서브메뉴를 눌렀을 때 배경이 같이 생겨서 나와요...
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
A-3을 연습하고 있는데... 서브메뉴에 마우스를 오버하면 저렇게 뒷 배경도 일부분 같이나와서 이미지를 가려버리는 현상이 생깁니다. 도대체 왜 이러는걸까요ㅠㅠ...? html, css 첨부 드립니다... <div class="header"> <div class="logo"> <a href="#none"><img src="image/logo.png"></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> </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> </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> /* 네비게이션 */ .header .navi { float: right; margin-top: 50px; margin-right: 25px;} .menu li {float: left;} .menu li > a { padding: 7px; border: 1px solid #000; width: 180px; display: inline-block; text-align: center; box-sizing: border-box; transition: 0.5s;} .menu li > a:hover {background-color: #000; color: #fff;} .sub-menu {border: 1px solid #000; } .sub-menu a {display: block; padding: 5px; text-align: center; transition: 0.5s;} .sub-menu a:hover {background-color: #000; color: #fff;}
- HTML/CSS
- jquery
- 웹-디자인
김유나
댓글 1
좋아요 1
조회수 620
[공유] 부모 요소가 position: absolute 인 경우에 대한 설명
미해결
중상급 퍼블리싱을 위한 CSS3의 모든 것
영상 마지막 부분에 보면 부모 요소에 position: absolute인 경우에도 부모-자식 요소가 매칭이 되게 되는 걸 보셨을 겁니다. 정확하게는 relative가 부모, absolute가 자식으로 매칭되는 것이 아닌 (편의상 이렇게 설명을 하셨지만) absolute는 position: static 속성을 가지고 있지 않는 조상을 기준으로 작동합니다 즉, relative, absolute, fixed, sticky 의 값을 가지고 있는 부모가 있다면 자식-부모 매칭이 됩니다. 그러나, 대부분의 경우에는 relative-absolute인 경우가 대다수죠!
- HTML/CSS
alvinlog
댓글 1
좋아요 1
조회수 695
코드캠프 로드맵 이후 질문사항
해결됨
[코드캠프] 강력한 CSS
안녕하세요 강의가 정말 마음에 들어서 코드캠프의 프론트엔드 강의목록의 시작은 프리캠프 강력한 css 훈훈한 javascript 3가지 과정을 구매하여 열심히 공부중입니다 3가지 과정수강이후 커리큘럼이 고농축 프론트엔드 코스 같아서 구매를 하려 했습니다만 고농축 프론트엔드 코스의 커리큘럼을 보니 위에 수강중인 3가지 과정이 전부 포함된 커리큘럼이더라구요 혹시 기존과정을 구매한 사람을 위한 할인 혜택이나 기존과정이 제외되어 있는 강의 등이 있나 궁금하여 질문드려봅니다.
- HTML/CSS
김윤원
댓글 1
좋아요 0
조회수 347
강의 관련 질문
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요 선생님. 강의 항상 잘 보고 있습니다. 오늘 모바일웹 강의 결제하여 듣기 시작한 수강생인데요~ 현재 신입 퍼블리셔이고, 모바일 웹 프로젝트를 한다고 하는데 회사에 사수도 없고 모바일웹은 해본적이 없어 미리 준비할 겸 수강하게 되었는데요~ 제가 따로 디자인 부분은 하지 않고 디자인툴(포토샵 or 피그마)에 있는 디자인 시안으로 이미지 추출하고 디자인 시안 보고 퍼블리싱 하는 작업을 진행할 예정입니다. 그래서 수강 목적은 모바일웹 퍼블리싱 하는것을 배우기 위함 이라고 생각하시면 됩니다! 혹시 이러한 경우에는 디자인 파트인 섹션1 강의도 들어야 되는 걸 까요~? 아님 안 들어도 무관할까요? 답변 미리 감사드립니다!
- HTML/CSS
- jquery
- 모바일-디자인
- figma
- 포트폴리오
rb
댓글 1
좋아요 1
조회수 345
로비 채팅 구현 섹션에서
해결됨
파이썬/장고로 웹채팅 서비스 만들기 (Feat. Channels) - 기본편
안녕하세요 로비 채팅 구현 강의를 들으면서 구현 중인데 redis 서버도 정상적으로 잘 작동하고 스크립트도 정확하게 썼는데 계속 채팅을 입력하고 엔터를 누르면 새로고침(초기화)이 되네요 ㅠㅠ 어떤게 문제일까요? 아무리 문제를 해결해봐도 이상한점은 찾아볼수가 없네요
- python
- django
- django-channels
오창인
댓글 1
좋아요 0
조회수 306
푸터 부분이 안보여요.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="kor"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/logo-header.png" alt="logo header"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> <footer> <div class="copyright"> 동문경조사, 동문행사일정, 사용자매뉴얼 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div></div> <div></div> </div> </footer> </div> </div> </div> <script href="script/jquery-1.12.4.js" type="text/script"></script> <script href="script/custom.js" type="text/script"></script> </body> </html> @charset 'utf-8'; body { margin: 0; background-color: #fff; color: #222328; font-size: 15px; } a { color: #222328; text-decoration: none; } .container { width: 1000px; } .container > div { float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} .header-logo { border: 1px solid #000; height: 100px; } .navi { border: 1px solid #000; height: 400px; } .slide {} .slide > div { border: 1px solid #000; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid #000; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; border: 1px solid #000; } .gallery { width: 300px; border: 1px solid #000; } .shortcut { width: 200px; border: 1px solid #000; } footer { overflow: hidden; } footer > div { border: 1px solid #000; height: 100px; float: left; box-sizing: border-box; } .copyright { width: 600px; } .sns { width: 200px; } .sns div { height: 50px; border: 1px solid #000; box-sizing: border-box; } footer에 overflow: hidden; 을 지우면 라인이 보이는데, 다시 넣으면 안보여요. 뭐가 잘못된걸까요?
- HTML/CSS
- jquery
- 웹-디자인
원스텝
댓글 1
좋아요 1
조회수 338
chapter06-질문
미해결
처음 만난 리액트(React)
26줄 notifications 과 31줄 notifications 차이점 ? 26줄 notifications22 로 수정, 39줄 notifications22로 수정 50줄 this.state.notifications22 했더니 에러가 발생해서요 this.setState({ // this.setState({}) 함수로 state를 update 한다 notifications: notifications, //이 부분 설명 좀 부탁합니다 });
- HTML/CSS
- javascript
- react
정하
댓글 1
좋아요 1
조회수 555
d 1 레이아웃 연습중에 궁금한것이 있어서 질문 남깁니다.
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>D 타입 연습</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"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="shorcut"></div> <div class="news-galley"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="cpoyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script></body></html> ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ @charset "utf-8"; body { background-color:#fff; color:#000; margin:0;} a { text-decoration:none; color:#000;} .container {} .main-content { display:flex;} .left { width:200px; border:1px solid #000;}.right { flex:1; border:1px solid red;} header {} .header-logo { height: 100px; border:1px solid red;} .navi { height:400px; border:1px solid #000;} .spot-menu { height: 50px; border:1px solid red;} .slide { height:400px;} .slide-image { border:1px solid green; height:inherit;} .slide-banner { width:150px; height: 300px; border: 1px solid red; position:absolute; top:0; right:0;} .items {}.shortcut { height:200px; border: 5px solid gold;} .news-gallery { height:250px; border:1px solid blue;} footer { display: flex;} footer > div { border:1px solid #000; height:100px;} .footer-logo { width: 200px;} .copyright { flex:1;} .sns { width:300px;}
- HTML/CSS
- jquery
- 웹-디자인
댓글 1
좋아요 1
조회수 372
인기 태그
인프런 TOP Writers
- 닉네임 5
- eggmun(문성진) 4
- 박영준 4
- 정현섭 4
- 김보노 3
- 잉꼬팡이 3
- Brandon Kim 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv