172만명의 커뮤니티!! 함께 토론해봐요.
미해결
CSS Flex와 Grid 제대로 익히기
안녕하세요. 영상 잘 보고 있습니다. 문의드리고 싶은 내용은 다음과 같습니다. 3행 1열 의 부모 컨테이너와 자식요소 (.logo, .search-bar, .banner) 일때 .container { display: grid; grid-template-columns : 20% 1fr 20%; } @media (max-width: 600px) { // 에서 1행 3열로 변동하게 된다면 #header{ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } .logo, .search-bar, .banner{ grid-column: 1/2; grid-row: 1/2; } } 자식요소에 grid-column: 1/2; grid-row: 1/2; 적용시키는게 일반적인 방법인가요?
돈 많은 백수이고 싶다
2023-02-13T09:36:38.710Z
댓글 1
좋아요 0
조회수 1098
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div class="tab-inner"> <input type="radio" name="tabmenu" id="tab1" checked> <input type="radio" name="tabmenu" id="tab2"> <input type="radio" name="tabmenu" id="tab3"> <div class="tabs"> <div class="items"> <div> <h1>Content 01</h1> </div> <div> <h1>Content 02</h1> </div> <div> <h1>Content 03</h1> </div> </div> <div class="btn"> <label for="tab1"></label> <label for="tab2"></label> <label for="tab3"></label> </div> </div> </div> </body> </html> body { line-height: 1.5em; margin: 0; color: #222; } .tab-inner {} input[name=tabmenu] { display: none; } .tabs { overflow: hidden; position: relative; height: 100vh; } .items { height: 100vh; width: 300%; transition: 0.5s; position: absolute; top: 0; left: 0; } .items div { height: 100vh; float: left; width: 33.33333%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .items div:nth-child(1){ background-color: teal; } .items div:nth-child(2){ background-color: dodgerblue; } .items div:nth-child(3){ background-color: yellowgreen; } .items div h1 { font-size: 80px; font-weight: normal; } .btn { position: absolute; bottom: 20px; width: 100%; text-align: center; } .btn label { display: inline-block; height: 16px; width: 16px; border-radius: 20px; background-color: #c4c4c4; cursor: pointer; } input[id=tab1]:checked ~ .tabs .items { left: 0; } input[id=tab2]:checked ~ .tabs .items { left: -100%; } input[id=tab3]:checked ~ .tabs .items { left: -200%; } input[id=tab1]:checked ~ .btn label[for=tab1], input[id=tab2]:checked ~ .btn label[for=tab2], input[id=tab3]:checked ~ .btn label[for=tab3] { background-color: #fff; }
황재중
2023-02-13T07:59:46.291Z
댓글 1
좋아요 1
조회수 538
해결됨
SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
@mixin 파트 시청중 궁금점이 생겨서요! 첫번째 이미지 처럼 hover를 저렇게주고 css 컴파일하면은 두번째이미지처럼 3개의 hover를 가진 css로 컴파일 되어서 보여지는데요. 저러면은 괜히 css만 지저분해져보이는데 저렇게 hover를 주는 이유가 있었을까여?. 그리고 css 컴파일 된것을 보면은 ex) .complete.complete:hover -> 이렇게 되어있으면은 제가 알고 있는 css개념으로는 .complete 클래스를 가지면서 .complete를가진 요소에 hover를 줘라라고 알고있기때문에 hover가 먹지 않을꺼라고 생각이들었는데요. 먹어지는 이유가 있을까요?..
html/css sass flex HTML/CSS flex
cyj
2023-02-13T06:28:06.078Z
댓글 1
좋아요 1
조회수 541
미해결
컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
처음에는 태그 자동완성도 되고 리로드도 정상적으로 실행됐습니다. 그런데 수강 중 실습하면서 코딩 작성하다가 알림창이 떠서 확인도 안하고 클릭했더니 다음부턴 태그 자동완성도 안되고, 웹브라우저로 리로드하면 원본 코드 그대로 나타납니다... visual studio code 삭제 이후 재설치해봤는데도 똑같은 상태라서 어떻게 해야할지 모르겠습니다.
민지
2023-02-13T06:20:57.868Z
댓글 0
좋아요 0
조회수 341
미해결
인터랙티브 웹 개발 제대로 시작하기
안녕하세요 전진 3D스크롤 예제를 이리저리 수정해보고 있는데요. 옆면 벽에 더해 위쪽 벽도 만들어보고 싶어서 수정하고 있습니다. 브라우저 사이즈가 작을때는 정상적입니다.. 근데 브라우저를 최대화하면... 이렇게 위쪽 벽이 튀어나가버립니다.. html은 실습예제에서 양쪽벽과 위쪽벽만 빼고 삭제했습니다.. <div class="world"> <div class="stage"> <div class="house"> <section class="wall wall-left"></section> <section class="wall wall-right"></section> <section class="wall wall-upper wall-upper-left"></section> <section class="wall wall-upper wall-upper-right"></section> </div> </div> </div> css는 body world stage house wall는 실습예제와 크게 다른점이 없구요.. body { height: 100vh; font-family: 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', NanumGothic, 'Malgun Gothic', sans-serif; color: #555; background: #555; } .world { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; perspective: 100vw; } .stage { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; transform-style: preserve-3d; } .house { width: 100vw; height: 100vh; transform: translateZ(-500vw); transform-style: preserve-3d; } .wall { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; } 옆벽과 위쪽벽만 아래처럼 만들어놨습니다.. .wall-right { background:#6b68ff55; width: 1000vw; transform: rotateY(90deg) translateZ(-400vw) } .wall-upper-left { height: 1000vw; background: #00000055; transform: rotateX(90deg) translateZ(500vw) } 둘다 길이가 1000vw라서 브라우저 가로사이즈에 따라 달라질 요인은 없는거같은데... 왜 그럴까요?ㅠㅠ 세로로는 브라우저 크기에 영향을 안받고, 오직 가로크기가 변하면 저렇게 어긋나버립니다..
html/css javascript 인터랙티브-웹 인터랙티브-웹 HTML/CSS
때찌
2023-02-13T04:29:03.198Z
댓글 1
좋아요 0
조회수 636
미해결
처음 만난 리액트(React)
변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요? prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.
html/css HTML/CSS react javascript
exwhite
2023-02-13T01:43:55.359Z
댓글 2
좋아요 1
조회수 802
해결됨
[코드캠프] 시작은 프리캠프
동그라미 뿐만 아니라 다른 것들도 모두 그럽니다
html/css javascript HTML/CSS
최락규
2023-02-12T11:09:11.884Z
댓글 1
좋아요 0
조회수 415
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
2. 왼쪽 드롭다운 네비게이션(2가지 타입) - HTML+CSS+JQUERY 완성본 어디서 다운 가능합니까?
html/css HTML/CSS jquery 웹-디자인 웹 디자인
HL5PFM
2023-02-12T06:32:29.625Z
댓글 1
좋아요 1
조회수 353
미해결
실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용
수업 잘 듣고 있습니다. 자동화를 하고 싶으서 예전 영상 보다가 최근에 다시 올라와서 보는 중 강의 발견하고 바로 수강해서 듣고 있습니다. 궁금한 것이 하나 있는데요. 셀레니움에서 하나의 윈도우 창의 특정 태그 값을 찾아서 다른 윈도우 창을 오픈 한 후 특정 필드에 값을 넣을 수 있나요?
beautifulsoup 웹-크롤링 selenium python beautifulsoup selenium 웹-크롤링
ecomarine
2023-02-12T01:17:38.453Z
댓글 1
좋아요 0
조회수 446
해결됨
파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)
강사님 이해안되서 git좀 참고하려고하는데 강의하신 자료랑 git주소좀 알려주세요 ..
gusdnr598
2023-02-11T19:23:25.289Z
댓글 1
좋아요 0
조회수 412
미해결
처음 만난 리액트(React)
선생님처럼 백틱 내부 문자 색상이 원래 색처럼 나오게 하려 어떻게 해야하나요? 같은색이라 구분이 잘되게 보고 싶은데
html/css HTML/CSS react javascript
exwhite
2023-02-11T01:56:13.703Z
댓글 1
좋아요 0
조회수 1097
해결됨
남박사의 파이썬 기초부터 실전 100% 활용
안녕하세요. 남박사님. list() 데이터 구조에서 reverse() 메서드의 결과값이 이해가 안되서 질문을 남기게 되었습니다. a=[4,5,6,1,2,3] a.sort() print(a) b=[4,5,6,1,2,3] b.reverse() print(b) [1, 2, 3, 4, 5, 6] [3, 2, 1, 6, 5, 4] sort()는 정방향 정렬, reverse()는 역방향 정렬이라고 배웠는데요. 역방향 정렬의 결과값이 제가 생각했을 때는 [6,5,4,3,2,1]로 출력되어야 할것 같은데 제 예상과는 반대로 [3,2,1,6,5,4]로 출력되고 있습니다. 왜 그런지 궁금합니다.
Hyeongwon Yun
2023-02-11T00:09:18.670Z
댓글 1
좋아요 1
조회수 457
해결됨
[코드캠프] 강력한 CSS
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중, 두 번째 줄에 사진이 3장밖에 안 들어가는데 왜 그런건가요..?? flex-wrap: wrap; 까지 적용시켰는데 되지 않네요. 보시는 바와 같이 윗줄은 4장이 출력 되는데, 밑줄은 3장만 출력이 됩니다. 제가 작성한 코드는 html <!DOCTYPE html> <html lang="ko"> <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>06-02-calc2</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="container"> <div class="sidebar"> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> <li>메뉴4</li> </ul> </div> <div class="contents"> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> <div class="item">상품</div> </div> </div> </body> </html> css * { box-sizing: border-box; } .container { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .sidebar { width: 170px; background-color: orange; padding: 5px 15px; } .sidebar ul { width: 100%; padding: 0; } .sidebar ul li { list-style: none; padding: 5px 0; color: #ffffff; border-bottom: 1px dashed rgba(255,255,255,0.3); /* 메뉴 사이 구분선*/ } .contents { width: calc(100% - 170px); display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; } .item { width: 24%;/ height: 180px; background-image: url("../img/dochihello.jpg"); }
liltjay
2023-02-10T13:11:39.708Z
댓글 1
좋아요 0
조회수 369
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
안녕하세요 슬라이드가 안되서 확인 부탁드립니다 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style2.css"> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="navi"></div> </header> <div class="slide"> <a href="#"><img src="images/img1.png" alt="img1"></a> <a href="#"><img src="images/img2.png" alt="img2"></a> <a href="#"><img src="images/img3.png" alt="img3"></a> </div> <div class="items"> <div class="news"></div> <div class="banner"> <a href="#"><img src="images/banner.jpg" alt="배너"></a> </div> <div class="shortcut"> <a href="#"><img src="images/shortcut.jpg" alt=""></a> </div> </div> <footer> <div class="footer-logo"> <a href="#"><img src="images/logo.png" alt="로고"></a> </div> <div class="copy"> <span>COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</span> </div> <div class="sns"> <a href="#"><img src="images/sns1.jpg" alt="sns1"></a> <a href="#"><img src="images/sns2.jpg" alt="sns2"></a> <a href="#"><img src="images/sns3.jpg" alt="sns3"></a> </div> </footer> </div> </body> </html>@charset "utf-8"; .container{ width: 1200px; margin: auto; border: 1px solid red; } header{ height: 100px; } header>div{ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ height: 300px; position: relative; overflow: hidden; } .slide>div{ font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;} } .items{ overflow: hidden; } .items>div{ height: 200px; float: left; width: 400px; box-sizing: border-box; } .news{} .banner{} .shortcut{} footer{ overflow: hidden; } footer>div{ height: 100px; float: left; box-sizing: border-box; } .footer-logo{ width: 200px; } .copy{ width: 800px; line-height: 100px; text-align: center; } .sns{ width: 200px; line-height: 140px; text-align: center; } 그리고 푸터 부분에 텍스트는 line-height할때 높이값을 기존 높이와 동일한 사이즈로 하면되는데 이미지는 왜 기존 높이 사이즈로 하면 안되는걸까요??
html/css 웹 디자인 웹-디자인 HTML/CSS jquery
기쁜 돌고래
2023-02-10T09:54:02.080Z
댓글 1
좋아요 1
조회수 326
미해결
자바스크립트 : 기초부터 실전까지 올인원
인프런 블로그에 학습일기로 해당 강의 속 문제와 문제풀이 내용을 공개로 올려도 되나용??
html/css HTML/CSS javascript
한지수
2023-02-10T08:57:48.595Z
댓글 1
좋아요 1
조회수 503
해결됨
[코드캠프] 강력한 CSS
섹션0 실습1 강의 39분 50초~ 듣다가 질문남깁니다 적용이 안되는 이유를 설명하시는데 영상이 끊기고 생략되어있네요.. 그리고 강의 들을 때 가끔씩 오류인지 똑같은 부분이 반복되는 문제도 생깁니다 ㅠ,ㅠ
ymj0580
2023-02-09T12:17:35.042Z
댓글 1
좋아요 0
조회수 335
미해결
면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
기본적인 질문인것 같아서 죄송합니다 ㅠㅠ prototype 뜻인 뭔지 알 수 있을까요..?
html/css jquery 포트폴리오 HTML/CSS 포트폴리오
연지
2023-02-09T08:32:33.989Z
댓글 1
좋아요 1
조회수 721
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요. 선생님 유익한 강의 잘 듣고 있습니다~ 그런데 카테고리 페이지 코딩 작업중에 custom.js 에서 다른건 다 잘 작동되는거 같은데 siblings 선택자로 메뉴 열리고 닫히는 것, active 클래스 제거되는게 작동이 안되는데 왜그러는걸까요;;
html/css 모바일-디자인 figma 모바일-디자인 HTML/CSS jquery 포트폴리오 포트폴리오
원미
2023-02-09T08:15:38.425Z
댓글 1
좋아요 1
조회수 1511
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
"PM2를 활용한 무중단 배포"까지 진행하고 인스턴스는 현재 실행 중입니다. 이 상태를 모르고 로컬에서 VSCode로 node index.js명령을 실행했습니다. 그 후에 인스턴스를 중지할려고 WinSCP를 접속할려고 하는데 연결이 계속 거부되고 있습니다.. 서브에 연결할 수 있는 다른 방법은 없을까요? 일시적인 현상인 줄 알고 몇 일 기다렸다가 다시 시도해도 연결이 안됩니다,,
html/css mysql git HTML/CSS github rest-api javascript aws
jksyk
2023-02-09T08:03:14.498Z
댓글 3
좋아요 0
조회수 1272
미해결
코딩테스트 [ ALL IN ONE ]
안녕하세요. 그림부분에서 이해가 가지않아 질문 드립니다. a =[1,2,3] 으로 초기화를하면 array는 0,1,2 즉 배열 그림이 3칸([][][])만 있어야 하는게 아닌가요? 하지만 강의의 그림에서는 [1][2][3][][] 으로 0,1,2,3,4 까지 그려져 있습니다. (size가 3인데 말이죠) a.append(4) 를 했을때, 동적배열은 array로 구현이 돼어있기때문에 random access 가 가능하여 마지막 index를 찾을 수 있다고 하셨는데, 선언및 초기화 a = [1,2,3] // 그림 -> [1][2][3] 접근 a[0] // O(1) 수정 a[1] = 9 // 그림 [1],[9],[3] 추가 a.append(4) // 이때 Resizing 이 일어나 /* 그림 [1][9][3] // 값을 옮긴 후 삭제 [1][9][3][4][][] // 복잡도 O(n) */ 의 모양이 돼야하는게 아닌가요? 즉, 궁굼한 점은 선언 및 초기화 할때 배열의 size 는 3인데그림의 배열 size는 [][][][][] 5칸이냐는 것입니다.
python 알고리즘 코테 준비 같이 해요! algorithm
아요
2023-02-09T07:25:59.144Z
댓글 1
좋아요 1
조회수 381
