묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨따라하며 배우는 HTML, CSS
CSS 부분
CSS 부분에서 이런식으로 top 0 left 0 또는 right 0 이 추가되어있는데 적용하는 이유를 알 수 있을까요?? 수업내용을 놓친건가해서 다시봤는데 모르겠어서..ㅠㅠ
-
해결됨[코드캠프] 강력한 CSS
left:calc(100% - 100px) 질문드립니다.
.container { position: relative; width: 100%; height: 104px; /* height:104px 이유 : box-sizing:border-box 설정 때문 */ background: rebeccapurple; border: 2px solid red; } .item { width: 100px; height: 100px; background-color: black; display: flex; justify-content: center; align-items: center; animation-name: moveBox; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; position: absolute; } .item span { color: white; } @keyframes moveBox { from { border-radius: 0; left: 0; } to { border-radius: 50%; left: calc(100% - 100px); } } item에 애니메이션 효과를 넣고 .container에서 범위에 벗어나지 않게 @keyframes moveBox에서 left:calc(100% - 100px)을 했는데 영상 설명에서 .item width 크기가 100px이라고 하셨는데 이해가 잘 되지 않아서 질문드립니다ㅠㅠ
-
해결됨[코드캠프] 시작은 프리캠프
마지막 과제 이후, 여러 궁금증 문의드립니다.
(1) dom 이용해서 style 지정할 때document.getElementById('menuGame').style.color= "white"; document.getElementById('menuGame').style.backgroundColor= "white";위와 같이 개별로 지정하지 않고document.getElementById('check').style = 'color: #FFFFFF; background-color: #0068FF;';위와 같이 style 에 string으로 여러 속성을 줄 수 있는건 강의를 통해서 알게되었는데요.구글링을 하다보니document.querySelector('.class').style.cssText=`color: pink; font-size: 20px;`'.cssText'라는 걸 사용하면 동일하게 Multi로 style을 줄 수있다고 하네요.인터넷 검색의 해당 설명을 보고 이해하기로는 기존 강의에서 배운'.style' 까지만 사용하는것과의 차이는'.cssText'의 경우 덮어쓰기 개념인 걸로 판단되는데요... 실무 입장에서 어떤 차이가 있을 때 사용하시는지 문의드립니다. (2) html에서 함수 호출 시, 자동완성이 원래 안되는지?위에 보시는 것 처럼, oninput 에서 함수 호출할 때따옴표 내에서, 기존 JS 파일에 있는 함수 자동완성이 안되고, 직접 타이핑하여야 되더라구요.css나 html의 경우 여러 extenstion을 설치하여각 파일에서 자동완성 되는것까지는 했는데html 파일에서 JS의 함수나 변수? 등은 자동완성이 원래 불가능한건지 문의드립니다. (3) 특정 속성? 자동완성 안됨일부 속성?은 자동완성이 안되고소스 내 사용한적이 있다면 "abc" 형태로 자동완성 제안을 해줄 때도 있는데요.실제로는 사용하게 되는 속성인데도 자동 완성이 안되는 것들이 몇 개 있는 듯 한데요ex) .value이런 것들은 실제 사용되는데도 자동완성이 기본적으로 안되는 별도의 이유가 있나요? 특별한 속성이라 그런건지..... 한 번에 여러 질문을 드려서 죄송하지만,위에 대한 해답을 아시면 답변해주시면 감사하겠습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
네비 상단
안녕하세요 선생님:)상단 네비 전체드롭다운에사이사이 선들을 어떤방법으로 제거해야하나요? <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style3.css"></head><body><div class="container"><header><div class="header-logo"><a href="#"><img src="img/logo.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">탑</a><div class="sub-menu"><a href="#">블라우스</a><a href="#">티</a><a href="#">셔츠</a><a href="#">니트</a></div></li><li><a href="#">아우터</a><div class="sub-menu"><a href="#">자켓</a><a href="#">코트</a><a href="#">가디건</a><a href="#">머플러</a></div></li><li><a href="#">팬츠</a><div class="sub-menu"><a href="#">청바지</a><a href="#">짧은바지</a><a href="#">긴바지</a><a href="#">레깅스</a></div></li><li><a href="#">악세서리</a><div class="sub-menu"><a href="#">귀고리</a><a href="#">목걸이</a><a href="#">반지</a><a href="#">팔찌</a></div></li></ul></div></header><div class="slide"><div><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><a href="#" class="actvie">공지사항</a><a href="#">갤러리</a></div><div class="tabs"><div class="tab1"><a class="open-modal" href="#">3월 재입고 품목을 알려드립니다.<b>2020.03.14</b></a><a href="#">반품/환불 규정에 대해 알려드립니다.<b>2020.03.14</b></a><a href="#">S/S 시즌 신규 의류 신상품 안내<b>2020.03.14</b></a><a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a><a href="#">신규회원 대상 할인 이벤트 안내<b>2020.03.14</b></a></div><div class="tab2"><img src="img/gallery1.jpg" alt=""><img src="img/gallery2.jpg" alt=""><img src="img/gallery3.jpg" alt=""></div></div></div></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</div><div class="sns"><a href="#"><img src="img/sns1.png" alt=""></a><a href="#"><img src="img/sns2.png" alt=""></a><a href="#"><img src="img/sns3.png" alt=""></a></div></footer></div> <div class="modal"> <div class="modal-con"> <h3>이벤트 안내</h3> <p>안녕하세요! JUST쇼핑몰입니다. 고객님들의 성원에 보답하는 JUST쇼핑몰이 되고자 신규회원 20% 할인 이벤트를 실시하고 있습니다. 웹과 모바일 가입회원 대상이며, 서비스만족을 위해 꾸준히 노력하겠습니다.</p> <a class="close-madal" href="#">x 닫기</a> </div> </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: #333;}a{text-decoration: none;color: #333;}.container{width: 1200px;margin: auto;}header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid #000; /}.header-logo{ float: left; width: 200px; line-height: 130px;}.navi{ width: 600px; float: right;}.menu{ / border: 1px solid #000; / padding: 0; list-style: none;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center; margin-top: 15px;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li>a:hover{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;}.slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid #000; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 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; / border: 1px solid #000; / float: left; width: 400px; box-sizing: border-box;}.news{}.tab-inner{ width: 95%; margin: auto; padding: 6px;}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; width: 120px; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px;}.btn>a.actvie{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px; padding: 0 10px;}.tab1{ }.tab1 a{ border-bottom: 1px solid #000; display: block; padding: 6px;}.tab1 a:last-child{ border-bottom: none;}.tab1 a b{ float: right; font-weight: normal;}.tab2{ display: none; text-align: center;}.tab2 img{ width: 100px; padding-top: 30px;}.banner{}.shortcut{}footer{}footer>div{ height: 100px; / border: 1px solid #000; / float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;}.modal{ background-color: #000; position: absolute; / 너비값 잃음 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none;}.modal-con{ background-color: #fff; width: 400px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px;}.modal-con h3{ background-color: #000; color: #fff; padding: 5px;}.modal-con p{ line-height: 1.6em;}.modal-con a{ border: 1px solid #000; padding: 5px; float: right;} $('.menu>li').mouseover(function(){ $('.sub-menu').stop().slideDown()})$('.menu>li').mouseout(function(){ $('.sub-menu').stop().slideUp()})$('.btn>a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')})$('.btn>a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')})$('.open-modal').click(function(){ $('.modal').fadeIn()})$('.close-madal').click(function(){ $('.modal').fadeOut()})
-
해결됨[코드캠프] 강력한 CSS
텍스트박스안에서 padding-bottom 이 이렇습니다
padding 값을 상하좌우 모두 20px 값으로 주었습니다 그런데 padding 값에 따라 위쪽, 왼쪽, 오른쪽은 모두 먹히는데 아랫쪽은 적용이 안되어서 이렇게 나오더라구요 이건 아래쪽은 이런건가요 ?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Github 인증 에러 뜨시는 분들 참고해주세요.
Github에서 레지토리에 등록하실 때 아래와 같이 인증오류 뜨시는 분들 참고해주시면 좋을 것 같아요.remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.해당 오류는 Github에서 2021년 Aug 13일부터 인증 방식이 비밀번호에서 토큰값을 입력하는 방식으로 변경이 되었는데요.해결방법은 비밀번호를 쓰지 않고, 토큰 값을 입력하시면 간단하게 해결이 가능합니다.Username : Github ID (이름이 아닌 로그인 할 때 적는 ID 입력)Password : 토큰 값 입력 그렇다면 토큰이 뭐냐? 개개인의 인증에 쓰이는 고유한 값인데요 (ex. ghp_tA0QVuK5zoectiJ6bgbD...) 등토큰은 어떻게 만들어서 입력하는데요? 아래 링크를 확인해주세요.https://dev.classmethod.jp/articles/resolving-github-token-authentication-errors/그리고 Password에 토큰값을 입력해주시면 정상적으로 push가 됩니다.끝.
-
해결됨[코드캠프] 시작은 프리캠프
이벤트 변형 감지 로그인창 부분 질문입니다.
아이디와 비밀번호 칸에 0 이 들어가도 버튼이 작동되는것은 이해 되지만아이디와 비밀번호 칸에 '엔터' (빈공간) 이 들어가도 버튼이 작동 됩니다. 이 빈공간의 경우도 문자열로 인식되는 것인가요이것을 제한 하려는 경우 if (email&&pw1&&pw2) 에 어떤 식을 넣어야 가능한지 질문드리고 싶습니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
탭메뉴가 실행이 안됩니다 ㅠ
<!DOCTYPE html><html lang="en"><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="img/logo.png" alt=""></a></div><div class="navi"><ul class="menu"><li><a href="#">MENU-1</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-2</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-3</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li><li><a href="#">MENU-4</a><div class="sub-menu"><a href="#">sun-menu1</a><a href="#">sun-menu2</a><a href="#">sun-menu3</a><a href="#">sun-menu4</a></div></li></ul></div></header><div class="slide"><div><a href="#"><img src="img/slide1.jpg" alt=""></a><a href="#"><img src="img/slide2.jpg" alt=""></a><a href="#"><img src="img/slide3.jpg" alt=""></a></div></div><div class="items"><div class="news"><div class="tab-inner"><div class="btn"><span class="active">공지사항</span><span>갤러리</span></div><div class="tabs"><div class="tab1">공지사항</div><div class="tab2">갤러리</div></div></div></div><div class="banner"><a href="#"><img src="img/banner_img.jpg" alt=""></a></div><div class="shortcut"><a href="#"><img src="img/shortcut_img.jpg" alt=""></a></div></div><footer><div class="footer-logo"><a href="#"><img src="img/logo2.png" alt=""></a></div><div class="copy"> COPYRIGHTⓒ by JUST Shop. ALL RIGHTS RESERVED</div><div class="sns"><a href="#"><img src="img/sns1.png" alt=""></a><a href="#"><img src="img/sns2.png" alt=""></a><a href="#"><img src="img/sns3.png" alt=""></a></div></footer></div><script src="script/jquery-1.12.4.js"></script><script src="script/custom.js"></script></body></html> @charset "utf-8";.container{ width: 1200px; margin: auto;}a{ text-decoration: none; color: #333;}header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid red; /}.header-logo{ width: 200px; float: left;}.navi{ width: 800px; float: right;}.menu{ margin-top: 30px; list-style: none; / border: 1px solid #000; / padding: 0;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; 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;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;}.slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid red; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 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; / border: 1px solid red; / box-sizing: border-box;}.news{ width: 400px;}.tab-inner{ width: 95%; margin: auto;}.btn{}.btn>span{ border: 1px solid #000; padding: 5px; width: 130px; display: inline-block; text-align: center; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px; cursor: pointer;}.btn>span:active{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px;}.tab1{}.tab2{ display: none;}.banner{ width: 400px;}.shortcut{ width: 400px;}footer{}footer>div{ height: 100px; / border: 1px solid red; */ float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;} $('.menu>li').mouseover(function(){ $(this).children('.sub-menu').stop().slideDown()})$('.menu>li').mouseout(function(){ $(this).children('.sub-menu').stop().slideUp()})$('.btn span:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active')})$('.btn span:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active')})
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
4092 Error
8080으로 안되서 검색해서 이것저것 해봐도 안되길래 8090으로 하니까 되는데 8090을 써도 상관 없나요?
-
미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ
23:33분에 background:url(images/...) no-repeat;부분이 있는데 다른 사진 넣으면 뜨는데 카카오톡 이미지만 넣으면 뜨지 않아서 문의 글 남깁니다ㅜㅡㅜ
-
해결됨풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
header 의 CSS 값 중 left:0 으로 설정한 부분이 잘 이해가 되지 않습니다.
[모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기3] 12:10 부분에서, header 의 CSS 값 중 top :0 인 것은 이해가 되는데,left :0 으로 설정한 이유는 잘 모르겠습니다.이미 width:100% 로 설정해서 좌우에 딱 맞게 설정된것으로 이해했는데, 여기에다가 또 left:0 을 해서 중앙이 아닌 좌측 정렬을 하는 이유가 있는걸까요?
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
fixde문제인가요?
마지막 goods- detail페이지 문의인데요 아래와 보시다 시피 fixed주고나서 저렇게 뛰어나왔어요 box-sizing: border-box 줘도 안먹히고요 width:값을 335px로 줄이면 딱맞는데 원래 fixed 주고 box-sizing: border-box 안먹히는건가요 ??html도 아래 good-order-info는 goods-detail-content밖으로 밖으로 잘 분리되어 있는데요~~ .goods-order-info { background-color: #fff; border-radius: 10px 10px 0 0; box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05); padding: 20px; position: fixed; bottom: 0; width: 375px; border: 1px solid red; box-sizing: border-box; } .goods-order-info
-
미해결애플 웹사이트 인터랙션 클론!
마지막 강의 js파일로 바꿀 시 스크롤 프레임 렉? 버벅임?
마지막 강의에서 올리신 js파일로 바꾸니 애니메이션이 들어가있는 section 0, 2에서 터치패드로 스크롤 시 멈추는 부분에서 몇프레임 앞뒤 왔다갔다 하는 현상이 좀 심하게 발생합니다. 이전만큼 부드럽게 진행이 되지 않고 좀 간격이 넓게 스크롤 되는 느낌입니다. 이미지 로딩 후 정렬 때문에 이렇게 되는건가요? 아니라면 혹시 팁을 좀 주실 수 있나요?다시 확인해본 바 새로고침을 하면 이러한 문제가 사라지긴 합니다만 원인을 잘 모르겠네요. 좀 더 알아보겠습니다. 제가 진행한 파일입니다!https://leealvinlee.github.io/Leeum_Maurizio_Catellan/
-
미해결처음 만난 리액트(React)
CommentListItem의 props에 대한 질문입니다.
강의에서 CommentListItem 컴포넌트를 만든 후에CommentList 컴포넌트를 만들었는데,CommentListItem에서 comment를 props로 받는건CommentList에 map에서 comments에서 배열을 하나씩 뽑을 때 사용할 이름 comment를 생각해두고 CommentListItem가 comment로 명명한 props를 받는건가요? 그리고map에서 사용할 comment 처럼 쓰이는 것들도 그냥 변수라고 부르나요?index가 key 값으로 사용되지 않았는데 존재 이유는 무엇인가요?
-
해결됨[코드캠프] 시작은 프리캠프
js 파일로 따로하면
안녕하세요 강사님 질문이 있습니다.인증번호 전송하는 예시를 html내부에 js 태그로, 퀴즈를 거의 비슷하게 맞춰서 완료하긴 했는데, 이를 js 확장자로 파일을 2개 나눠서 진행해봤는데 뭐가 문제인지 잘 작동하지 않습니다. 단순히 제가 뭐를 잘못 입력한건지 아니면 이렇게 2개 나눠서 하는게 안되는건지 궁금합니다!!
-
미해결[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
아톰 에디터 설치
atom.io로 들어가면 자꾸 이런 화면이 나오네요! 어떻게 해야 강의에서 보여주시는 화면으로 들어갈 수 있나요? ㅠㅠㅠ
-
미해결CSS Flex와 Grid 제대로 익히기
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; 적용시키는게 일반적인 방법인가요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
input type 체크할때 btn label 이 색깔이 안바뀝니다
<!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; }
-
해결됨SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱
@mixin 관련 질문입니다.
@mixin 파트 시청중 궁금점이 생겨서요!첫번째 이미지 처럼 hover를 저렇게주고 css 컴파일하면은두번째이미지처럼 3개의 hover를 가진 css로 컴파일 되어서 보여지는데요.저러면은 괜히 css만 지저분해져보이는데 저렇게 hover를 주는 이유가 있었을까여?.그리고 css 컴파일 된것을 보면은ex) .complete.complete:hover -> 이렇게 되어있으면은 제가 알고 있는 css개념으로는.complete 클래스를 가지면서 .complete를가진 요소에 hover를 줘라라고 알고있기때문에hover가 먹지 않을꺼라고 생각이들었는데요. 먹어지는 이유가 있을까요?..
-
미해결컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
코드 작성 후, 리로드하면 웹브라우저에서 코딩이 그대로 실행됨
처음에는 태그 자동완성도 되고 리로드도 정상적으로 실행됐습니다.그런데 수강 중 실습하면서 코딩 작성하다가 알림창이 떠서 확인도 안하고 클릭했더니다음부턴 태그 자동완성도 안되고, 웹브라우저로 리로드하면 원본 코드 그대로 나타납니다...visual studio code 삭제 이후 재설치해봤는데도 똑같은 상태라서 어떻게 해야할지 모르겠습니다.
