묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
푸터 부분이 안보여요.
<!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; 을 지우면라인이 보이는데, 다시 넣으면 안보여요.뭐가 잘못된걸까요?
-
미해결처음 만난 리액트(React)
chapter06-질문
26줄 notifications 과 31줄 notifications 차이점 ?26줄 notifications22 로 수정, 39줄 notifications22로 수정 50줄 this.state.notifications22 했더니 에러가 발생해서요 this.setState({ // this.setState({}) 함수로 state를 update 한다notifications: notifications, //이 부분 설명 좀 부탁합니다});
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
d 1 레이아웃 연습중에 궁금한것이 있어서 질문 남깁니다.
<!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;}
-
미해결자바스크립트 : 기초부터 실전까지 올인원
git 허브나 netlify 용량
git 허브나 netlify를 통해 쉽고 유용하게 도메인얻는 방법 너무 잘 들었습니다. 궁금한 부분은 git hub에 올리는 용량은 제한이 없나요?git hub에 올리는 용량과 netlify의 용량은 상관이 없는지 궁금합니다. 좋은 강의에 항상 감사드립니다.
-
미해결반응형 웹사이트 포트폴리오(Architecture Agency)
slider 적용이 안되어서 올립니다
<div class="history-info"> <h2>History</h2> <hr class="bar" /> <div class="history-slider"> <div> <h4> The Project<br />of Architect for the <span>2013</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2014</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2015</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2016</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2017</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2018</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2019</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> <div> <h4> The Project<br />of Architect for the <span>2020</span> </h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium ipsum dolor consectetur officia nobis veritatis qui doloribus impedit quia! </p> </div> </div> </div> 도저히 문제를 못찾겠습니다 한시간동안 체크했는데 답이 안나오네요..
-
해결됨[코드캠프] 강력한 CSS
diary-date 부분 질문
여기서 display:flex; 입력시 왜 text -align은 적용안되는지 궁금합니다! .diary-date{ font-size:14px; color:gray; text-align:right; }
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
<header>와 <div class="header"> 둘다 사용해도 상관없나요?
<header> <footer> 시맨틱태그와 <div class="header"> 클래스 네임 중에 어떤방식으로 시험을 봐야할까요? 둘 다 상관없나요? 강의 화면이랑 다운받은 html 다른 경우도 있는 것 같아서요~
-
미해결애플 웹사이트 인터랙션 클론!
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
(() => { const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅(디바이스 마다 높이가 다르기에 각 기계가 가진 높이를 불러오고 곱해준다.) scrollHeight: 0, }, { // 1 type: 'normal', heightNum: 5, scrollHeight: 0, }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; } console.log(sceneInfo); } setLayout(); })(); 4645값으로 그대로 진행해도 될까요?
-
미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
float: right 요소가 아래에 배치되는 이유 쉽게 설명
강의에서 나온 것처럼 하나는 float:left 하나는 margin:auto 하나는 float: right시 마지막 요소가 아래에 배치됩니다. 생각해보면 이것은 너무나도 당연한 것입니다.마지막 요소의 float:right을 꺼보면이렇게 되죠. 왜 이렇게 되는지 모르겠다면, 그냥 float와 margin:auto를 적용시키지 않고, div 요소 3개를 그냥 그대로 놔두면이렇게 차곡차곡 쌓이게 되죠!그렇기에 마지막 요소를 float: right을 하면 자기가 갈 수 있는 가장 오른쪽으로 가게 되는 거죠그러면 다시 돌아가서 왜 첫번째 요소는 float:left를 했을때 중간 요소와 같은 줄에 있는 거고, 2,3 요소 순서를 바꾸면 해결이 될까요?우선 1번 요소가 float:left로 배치가 되어도 없는 아이처럼 작동하죠. 그러니까 중간 요소가 배치될때는 1번 요소는 없는 것처럼 무시를 하고 혼자만 있을 때 처럼 가운데에 오게 되겠죠. 그러나 2,3 요소 순서를 바꾸면원래처럼 1번 요소는 왼쪽에 가고, 그다음에 오는 것이 3번(float:right)요소가 되니까 이 아이도 1번 요소가 없을때와 동일하게 그냥 오른쪽으로 가겠죠. 그다음에 2번 요소(margin:auto)가 배치 되려고 하는데, 이전에는 1번 요소만 무시했다면 이번에는 1,3 요소 모두 무시하고 그냥 아무것도 없는 것처럼 가운데에 오게 되는 거죠!
-
미해결[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용
강의자료 다운로드 어디서 하나요?
강의자료 다운로드 어디있나요??
-
미해결[웹 개발 풀스택 코스] HTML&CSS 기초
html 표 태그 강의
html 표 태그에서 6분 44초에 <tbody>안에 <tr>넣고 <tr>전체를 앞으로 한 번에 옮긴 건 어떤 단축키를 누른건가요?
-
해결됨[코드캠프] 시작은 프리캠프
class 와 id 작성 순서
<div class="token__wrapper"> <div class="token" id="token">000000</div> 여기서 div class="token" 이랑 id "token" 순서를 반대로 하면 왜 컬러가 안 입혀지나요? css 적용순서가 달라지게 되나요?
-
해결됨[코드캠프] 시작은 프리캠프
파이널 과제 onkeyup="onchange()" 관련 질문
안녕하세요파이널 과제를 한 후 레퍼런스와 검토 중인데요,1/ 수업시간엔 changeFocus()로 알려주셨는데, 굳이 onchange="changePhone2()" onkeyup="onchange()" 로 사용된 이유가 있을까요? 굳이 두개로 나눠서 사용한 이유가 궁금합니다.2/ 해당 코드가 "키보드를 눌렀다 때면 onchange함수를 실행시켜줘. onchange는 changePhone함수를 실행시킨다는 의미야," 라는 의미일까요? 찾아봤지만 명쾌하게 이해가 되지 않아 질문합니다.
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
제이쿼리 적용이 안돼요.
안녕하세요 선생님.제이 쿼리 적용이 안돼서 궁금해서 여쭤봅니다.<script type="text/javascript" src="script/jquery-1.12.4.js"></script><script type="text/javascript" src="script/custom.js"></script> 요렇게 적용하라고 하셔서 그대로 했을때는 되는데,js파일을 script 폴더에 넣지않고 밖으로 뺀다음 <script type="text/javascript" src="../jquery-1.12.4.js"></script> 요렇게 .. 처리해서 같은 폴더내에 넣으려고 하는데적용이 안되더라구요. 혹시 제이쿼리는 요렇게 하면 안되는것일까요? 그리고 폴더에 넣는 편이 실무나, 정리 면에서 확실히 더 도움이 되나요...?
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
object-fit 속성 사용법
D E 유형 필독사항에서 object-fit 속성 강의에서object-fit 속성을 사용할 때 부모요소의 너비 높이가 반드시 지정되어 있고그 너비와 높이를 object-fit 속성이 들어간 img가 똑같은 값으로 받아와야 한다(inherit)고 했는데,부모요소의 너비높이가 없이, inherit 없이도,img의 너비나 높이만 있어도 구현되던데,문제가 있을까요?아래처럼 해도 될까요?꼭 반드시부모요소의 너비높이가 있어야되고inherit로 받아와야만 하나요?참고로 아래는 D1 유형 중 슬라이드부분 입니다. <div class="slide"> <div class="slide-image"> <a href="#none"><img src="images/slide-d-01.jpg"alt="slide-d-01"></a> <a href="#none"><img src="images/slide-d-02.jpg"alt="slide-d-02"></a> <a href="#none"><img src="images/slide-d-03.jpg"alt="slide-d-03"></a> </div> </div>.slide{ position: relative; /**/ overflow: hidden; width: 400px; } .slide-image{ font-size: 0; animation: slide 10s linear infinite; } .slide-image img{ width: 100%; height: 400px; object-fit: cover; }
-
미해결처음 만난 리액트(React)
unmount 질문있습니다.
5:36 부분에setState 를 활용해서 notifications에 들어있던 내용을 지워야만 unmount가 되던데왜 그런건가요??render() 부분에서 더 이상 출력?할 만한 내용이 없다고 판단해서 unmount가 되는건가요?
-
미해결애플 웹사이트 인터랙션 클론!
scrollLoop 함수 질문
const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } };선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() }조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...
-
미해결따라하면서 배우는 웹애플리케이션 만들기
bitnami 설치
bitnami 설치 제공이 이제 중단되었다는데... 어떻게 설치하나요??
-
미해결[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
.banner 간격 조정 어떻게 하나요?
<!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/logo-header.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> </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> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner"> <a href="#none"><img src="images/slide-01.jpg" alt="slide1"></a> <a href="#none"><img src="images/slide-02.jpg" alt="slide2"></a> <a href="#none"><img src="images/slide-03.jpg" alt="slide3"></a> </div> </div> <div class="banner"> <img class="banner-image" src="images/banner-01.png" alt="banner image"> <div class="banner-content"> <h3>얼리버드 선착순 할인 이벤트 최대 30% 할인</h3> <p> 12월은 사랑의 달~ 코딩웍스에서 여러분께 사랑을 뿌려요~<br> 12월 개강반을 12월 06일까지 접수하는 분들께는 15%~ 20% 의 얼리버드 할인을 제공합니다. </p> </div> <a href="#none"><img src="images/banner-02.png" alt="banner link"></a> </div> </div> <div class="items"> <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> <a href="#none"><img src="images/gallery-03.png" alt="gallery3"><span>라인을 만드는 필라테스</span></a> </div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"> <a href="#none"><img src="images/logo-footer.png" alt="footer logo"></a> </div> <div class="copyright"> 상호 : (주)코딩웍스 | 대표자 : 홍길동 | 개인정보관리책임자 : 성춘향 부장 사업장주소 : 경기도 남양주시 별내동 1234 코딩웍스 빌딩 6층 (주)코딩웍스 </div> <div class="family-site"> <select> <option value="">패밀리 사이트</option> <option value="">코딩웍스 커뮤니티</option> <option value="">코딩웍스 쇼핑몰</option> <option value="">코딩웍스 재단</option> </select> </div> </footer> </div> <div class="modal"> <div class="modal-content"> <h2>스트리밍 서버 이전으로 서비스 장애</h2> <p> 스트리밍 서버 이전 작업으로 2시간 서비스 중지됩니다.<br> <br> 주요 작업 내용은 아래와 같습니다.<br> 1. 서버 이전에 따른 DNS 이전으로 기존 호스팅 서비스 대체<br> 2. 문자셋을 utf-8로 변경 후 모바일 등에 대처하기 위해 미리 조치<br> 3. 스트리밍 서버 CDN과 연동 후 멀티미디어 이러닝 서비스가 제공<br> <br> 위 내용을 보시면 제법 큰 작업이었음을 알 수 있습니다.<br> 특히 문자셋의 변경에 따라 기존의 DB, data, 웹사이트 솔루션 등의 커스트마이징 등에 상당한 어려움이 있었고, 이에 따른 일부 접속 오류가 있을 수 있었음에 양해를 구합니다.<br> 특히 인터넷익스플로러 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: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .main-content { display: flex; } .main-content > div { /* border: 1px solid black; */ /* height: 650px; */ } .left { width: 200px; background-color: rgba(210, 181, 161, 0.5); } .right { flex: 1; } header {} header > div { /* border: 1px solid red; */ } .header-logo { height: 100px; display: flex; align-items: center; } .navi { height: 400px; } /* Navigation */ .menu { list-style: none; padding: 0; width: 90%; margin: auto; margin-top: 10px; } .menu li { text-align: center; } .menu li > a { border: 1px solid lightgray; display: block; padding: 5px; background-color: lightskyblue; transition: 0.1s; } .menu li:hover > a { background-color: olivedrab; color: #ffffff; } .sub-menu { border: 1px solid lightgray; background-color: lightcyan; display: none; } .sub-menu a { display: block; padding: 5px; transition: 0.1s; } .sub-menu a:hover { background-color: olivedrab; color: #ffffff; } .slide { display: flex; } .slide > div { /* border: 1px solid blue; */ height: 400px; } .slide-image { flex: 1; height: inherit; overflow: hidden; position: relative; } .slide-image-inner { font-size: 0; width: 300%; height: inherit; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide-image-inner a { height: inherit; display: inline-block; width: calc(100% / 3); } .slide-image-inner a img { height: inherit; width: 100%; 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; } } .banner { width: 230px; text-align: center; box-sizing: border-box; padding: 5px; font-size: 14px; background-color: ivory; } .banner .banner-image { width: 88%; } .items { display: flex; } .items > div { /* border: 1px solid green; */ height: 250px; flex: 1; } .news {} .gallery {} /* News & Gallery */ .tab-inner { width: 95%; margin: auto; margin-top: 5px; } .btn {} .btn span { border: 1px solid #000000; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: lightskyblue; } .tab1 { border: 1px solid #000000; height: 208px; box-sizing: border-box; padding: 10px 15px; } .tab1 a { display: block; padding: 9px; border-bottom: 1px solid #000000; } .tab1 a:last-child { border-bottom: none; } .tab1 a em { font-style: normal; } .tab1 a b { float: right; font-weight: normal; } .tab2 { border: 1px solid #000000; height: 208px; text-align: center; box-sizing: border-box; padding-top: 10px; } .tab2 a { display: inline-block; text-align: center; } .tab2 a img { height: 165px; border-radius: 5px; } .tab2 a span { display: block; } footer { display: flex; height: 100px; align-items: center; background-color: rgb(211, 211, 211, 0.3); } footer > div { /* border: 1px solid red; */ text-align: center; } .footer-logo { width: 200px; } .copyright { flex: 1; } .family-site { width: 230px; } .family-site select { padding: 5px; border-radius: 3px; } .modal { background-color: #00000077; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { background-color: #ffffff; width: 460px; padding: 20px; border-radius: 10px; box-shadow: inset 0 0 10px #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-content h2 { text-align: center; } .close-modal { float: right; border: 1px solid #000000; padding: 5px 10px; border-radius: 5px; } $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() }) .banner에서 gap처럼 요소 간의 간격을 띄우는 방법이 있나요?
-
해결됨따라하며 배우는 HTML, CSS
profile__picture 사진 크기 조정
<header class="header"> <nav class="header__content"> <div class="header__buttons"> <a href="index.html" class="header__home"> <img src="assets/icons/logo.svg" alt="logo"> </a> </div> <div class="header__search"> <img src="assets/icons/search.svg" alt="search"> <input type="text" placeholder="Search..."> </div> <div class="header__buttons"> <a href="#none"> <img src="assets/icons/home.svg" alt="home"> </a> <a href="#none"> <img src="assets/icons/shop.svg" alt="shop"> </a> <a href="#none"> <img src="assets/icons/messenger.svg" alt="messenger"> </a> <div class="profile__picture"> <img src="assets/images/avatar.png" alt="user picture"> </div> </div> </nav> </header>.header { width: 100%; height: 44px; background-color: #FFFFFF; display: flex; justify-content: center; position: fixed; top: 0; left: 0; z-index: 2; border-bottom: 1px solid #DBDBDB; } .header__content { width: 100%; max-width: 975px; padding: 0 14px; display: flex; justify-content: space-between; align-items: center; } .header__logo { margin-top: 5px; } .header__search { width: 216px; height: 28px; display: none; align-items: center; position: relative; } @media (min-width: 768px) { .header__search { display: flex; } } .header__search img { width: 12px; height: 12px; position: absolute; top: 8px; left: 8px; } .header__search input { width: 100%; height: 100%; background-color: #FAFAFA; padding: 4px 10px 4px 28px; border: 1px solid #DBDBDB; border-radius: 4px; outline: none; font-size: 12px; /* 폰트 굵기 */ font-weight: 300; color: #999999; text-overflow: hidden; white-space: nowrap; } .header__search input:focus { color: #262626; } .header__buttons { display: flex; align-items: center; gap: 16px; } .profile__picture img{ width: 24px; border-radius: 50%; }css의 .profile__picture부분에서 저는 강의처럼 말고 뒤에 img를 넣어야지만 사진 크기가 조정되는데 img를 안붙혀도 되는 이유가 궁금합니다!
