49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 HTML, CSS
인스타그램 실습
강의를 듣고 인스타그램 실습을 진행하였습니다.하지만 위 사진처럼 사이드바가 컨텐트박스와 겹쳐보이는 문제가 발생하였고, 강의를 여러번 보면서 오류를 확인하고 있지만 길이가 길고 제 눈으로 확인이 안되어 질문드립니다...위가 side.css일부, 아래가 main.css일부입니다.side-menu{ max-width: 290px; position: fixed; left: 50%; top: 84px; transform: translateX(calc(-50%+322px)); display: none; flex-direction: column; }.main-container{ background-color: #ffffff; margin-top: 44px; margin-bottom: 44px; display: flex; } .content-container { width: 100%; max-width: 935px; padding: 0 0 8px; margin: 0 auto; display: flex; } .content { width: 100%; max-width: 614px; margin: 0 auto; display: flex; flex-direction: column; }<main class="main-contaniner"> <section class="content-container"> <div class="content"> <div class="stories"> <div class="stories_content"> <button class="story"> <div class="story_avatar"> <div class="story_border"> <svg width="64" height="64"> <circle r="31" cy="32" cx="32" /> </svg> </div> <div class="story_picture"> <img src="assets/images/avatar.png" alt="user picture"> </div> </div> <span class="story_user">user1</span> </button> </div> </div> <div class="posts"> <article class="post"> <div class="post_header"> <div class="post_profile"> <a href="#" class="post_avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <a href="#" class="post_user">user1</a> </div> <button class="post_more-options"> <img src="assets/icons/more.svg"> </button> </div> <div class="post_content"> <div class="post_medias"> <img src="assets/images/picture.jpeg" alt="post content" class="post_media"> </div> </div> <div class="post_footer"> <div class="post_buttons"> <button class="post_button"> <img src="assets/icons/heart.svg" alt="heart"> </button> <button class="post_button"> <img src="assets/icons/comment.svg" alt="comment"> </button> <button class="post_button post_button--align-right"> <img src="assets/icons/bookmark.svg" alt="bookmark"> </button> </div> <div class="post_infos"> <div class="post_likes"> <a href="#" class="post_likes-avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <span>Liked by <a href="#" class="post_name--underline">user2</a>and <a href="#">33 others</a> </span> </div> <div class="post_description"> <span> <a href="#" class="post_name--underline"> user </a> description </span> </div> <span class="post_date-time">30 minutes ago</span> </div> </div> </article> </div> </div> <div class="side-menu"> <div class="side-menu_user-profile"> <a href="#" class="side-menu_user-avatar"> <img src="assets/images/avatar.png" alt="user picture"> </a> <div class="side-menu_user-info"> <a href="#">user1</a> <span>nickname</span> </div> <button class="side-menu_user-button"> Switch </button> </div> <div class="side-menu_suggestions-section"> <div class="side-menu_suggestions-header"> <h2>Suggestion for you</h2> <button>See All</button> </div> <div class="side-menu_suggestion-content"> <div class="side-menu_suggestions"> <a href="#" class="side-menu_suggestions-avatar"> <img src="assets/images/avatar.png" alt=""> </a> <div class="side-menu_suggestion-info"> <a href="#"> user11 </a> <span>Followed by user2, user3 and others</span> </div> <button class="side-menu_suggestion-button">Follow</button> </div> <div class="side-menu_suggestions"> <a href="#" class="side-menu_suggestions-avatar"> <img src="assets/images/avatar.png" alt=""> </a> <div class="side-menu_suggestion-info"> <a href="#"> user11 </a> <span>Followed by user2, user3 and others</span> </div> <button class="side-menu_suggestion-button">Follow</button> </div> </div> </div> <div class="side-menu_footer"> <div class="side-menu_footer-links"> <ul class="side-menu_footer-list"> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">About</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Help</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Press</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">Phone</a> </li> <li class="side-menu_footer-item"> <a class="side-menu_footer-link">API</a> </li> </ul> </div> <span class="side-menu_footer-copyright">© 2023 instargram from facebook</span> </div> </div> </section> </main>
- 미해결따라하며 배우는 HTML, CSS
유튜브 실습
안녕하세요.선생님의 강의를 보고 유튜브 실습을 진행했는데 search bar의 위치가 중앙이 아닌 오른쪽 다른 아이콘에 붙어있습니다.코드를 확인했을때 이상하다고 생각하는 부분이 없었습니다...그리고 sidebar의 글자 크기는 영상과 달라도 괜찮나요?.header{ height: 55px; display: flex; flex-direction: row; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: #212121ff; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4d4d4d; } .left-section{ display: flex; align-items: center; } .hamburger-menu{ height: 24px; margin-left: 24px; margin-right: 24px; } .youtube-logo{ height: 70px; } .middle-section{ flex: 1; margin-left: 70px; margin-right: 35px; max-width: 500px; display: flex; align-items: center; flex-grow: 1; } .search-bar{ flex: 1; height: 36px; padding-left: 10px; font-size: 16px; border: 1px solid #4d4d4d; border-radius: 2px; background-color: #121212; width: 0; } .search-bar::placeholder{ font-size: 16px; } .search-button{ height: 40px; width: 66px; background-color: #323232; border: 1px solid #4d4d4d; margin-left: -1px; margin-right: 10px; } .search-icon{ height: 25px; } .voice-search-button{ height: 40px; width: 40px; border-radius: 20px; border: none; background-color: #121212; } .voice-search-icon{ height: 24px; } .search-button, .voice-search-button, .upload-icon-container{ display: flex; justify-content: center; align-items: center; position: relative; } .search-button .tooltip, .voice-search-button .tooltip, .upload-icon-container .tooltip{ position: absolute; background-color: white; bottom: -30px; padding: 4px 8px 4px 8px; border-radius: 2px; font-size: 12px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; } .search-button:hover .tooltip, .voice-search-button:hover .tooltip, .upload-icon-container:hover .tooltip{ opacity: 1; } .upload-icon{ height: 24px; } .youtube-apps-icon{ height: 24px; } .notifications-icon{ height: 24px; } .current-user-picture{ height: 32px; border-radius: 16px; } .right-section{ width: 180px; margin-right: 20px; display: flex; justify-content: space-between; align-items: center; } .notifications-icon-container{ position: relative; } .notifications-count{ position: absolute; top: -2px; right: -5px; background-color: rgb(200, 0, 0); color: white; font-size: 11px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; border-radius: 10px; } <header class="header"> <div class="left-section"> <img class="hamburger-menu" src="assets/icons/hamburger-menu.svg" > <img class="youtube-logo" src="assets/icons/youtube-logo.svg"> </div> <div class="middle-section"> <input class="search-bar" type="text" placeholder="Search" > <button class="search-button"> <img class="search-icon" src="assets/icons/search.svg" > <div class="tooltip">Search</div> </button> <button class="voice-search-button"> <img class="voice-search-icon" src="assets/icons/voice-search-icon.svg" > <div class="tooltip">Search with your voice</div> </button> <div class="right-section"> <div class="upload-icon-container"> <img class="upload-icon" src="assets/icons/upload.svg" > <div class="tooltip">Create</div> </div> <img class="youtube-apps-icon" src="assets/icons/youtube-apps.svg" > <div class="notifications-icon-container"> <img class="notifications-icon" src="assets/icons/notifications.svg"> <div class="notifications-count">1</div> </div> <img class="current-user-picture" src="assets/images/avatars/avatar-1.png" > </div> </div> </header>
- 해결됨따라하며 배우는 HTML, CSS
a-button:hover , active에 다음과 같은 에러 메시지가 뜹니다.
- 미해결따라하며 배우는 HTML, CSS
도표 자료 (해결)
강의를 하시면서 쓰시는 자료는 어디서 볼 수 있을까요?? 옆에 띄워놓고 같이 보면서 강의를 들을려고 하는데, 강의에서 쓰시는 도표자료는 없더라고요!!
- 미해결따라하며 배우는 HTML, CSS
grid-template-columns에 대하여
함께 코드로 이해하는 부분에서, 강사님과 똑같이 코드를 작성했는데 아래 사진처럼 그리드가 만들어집니다. 맨 윗 줄은 auto의 개수만큼 정렬이 잘 되는데, 두 번째 줄부터는 세로로 일렬로 나열됩니다. 어떻게 해결하면 좋을까요??
- 미해결따라하며 배우는 HTML, CSS
flex-shrink 질문입니다
flex-shrink 코드를 똑같이 따라 치고, Item의 수를 4개에서 5개로 늘리면 shrink가 적용되지 않았습니다. shrink가 적용되는 조건에 개수 혹은 너비의 합이 있는 건지 궁금합니다!
- 미해결따라하며 배우는 HTML, CSS
가상 클래스(의사 클래스)의 정의가 이해가 되지 않습니다.
수업을 듣는 중에 가상 클래스의 정의가 이해가 가지 않아서 질문을 드려요수업에서는 가상 클래스의 정의를 '별도의 클래스를 정의하지 않아도 지정한 것처럼' 이라는 문구가 적혀있는데,가상 클래스의 사용할 때는 '클래스의 이름: 가상 클래스의 이름' 으로 작성을 하는 데,이러면 클래스를 정의한 상태인 것 같아서 이해가 되지 않습니다.혹시 좀 더 풀어서 설명해 주시면 안될까요?
- 미해결따라하며 배우는 HTML, CSS
스토리 생성하기 부분에서
안녕하세요. 수업 잘 듣고 있습니다.스토리 생성하기 부분에서 story__picture 부분에 top과 left 값을 주고 왜 다시 transform 값을 줘서 위치를 변화 시키는건가요?? top 과 left만 사용해서 위치를 변화시키는 것과 차이가 있을까요?
- 미해결따라하며 배우는 HTML, CSS
안녕하세요 강사님 질문 있습니다.
강사님의 영상 약 11분 10초 대를 보면 go live를 한 후 h1태그를 추가 한 후에 새로고침 하면 웹 창에서 추가된 h1이 보이는데 제가 하면 아래와 같은 오류가 뜨면서 추가되지 않습니다. 어떻게 하면 될까요?Live Reload is not possible without a head or body tag.
- 미해결따라하며 배우는 HTML, CSS
Abutton 만들기 css가 인식이 안돼요.
안녕하세요. 강의를 듣고 있는 수강생입니다.초반 버튼을 만드는 과정에서 css가 인식이 안되는데 어떻게 해야할까요?
- 미해결따라하며 배우는 HTML, CSS
유튜브 사이드바 생성할때 bottom 0
코드에서는Position : fixed;Left : 0;Bottom : 0; 으로 주셨는데, 저는 이렇게 하니까 사이드바가 아래에 붙어요.Bottom 0을 삭제하니까 강의처럼 위쪽에 붙어있어요.선생님 강의에서는 bottom 0을 줬는데 어떻게 위에 있는거죠? 그리고 색상코드는 6자리 알파벳, 숫자로만 나타낸다고 알고 있는데 212121FF는 뭔가요? 그냥 212121과 다른 점이 뭔지 궁금합니다.
- 미해결따라하며 배우는 HTML, CSS
영상 자료를 다운받아도 자료가 보이지 않습니다.
영상 자료를 다운받았는데 1쪽만 보이고 나머지는 보이지가 않습니다.
- 해결됨따라하며 배우는 HTML, CSS
인라인 요소, 블록 요소
인라인 요소는 블록 요소를 포함하면 안된다고 알고 있습니다.브라우저 종류 및 버전마다 특정 요소가 출력이 안되는 경우가 있다고 들었는데, 최근의 경우에는 대부분 정상적으로 출력되는 경우가 많다고 들었습니다. 이 부분에서 궁금한 점이 생겼습니다. 사용자가 어떤 브라우저를 사용할지 모르기 때문에, 유효성을 지켜야 된다고 생각해도 괜찮을까요?정상적으로 출력되는 브라우저는 유효성을 어기더라도, 사용자의 편의상 출력을 허용하도록 하는걸까요?
- 미해결따라하며 배우는 HTML, CSS
css 질문 있습니다 !!
안녕하세요, 강사님유튜브 사이트 기본 구조 생성하기 파트에서 css를 작성할 때 margin: 0;margin-top: 0;margin-bottom: 0;과 같이 0값을 왜 따로 주시는 지 궁금합니다 !!
- 미해결따라하며 배우는 HTML, CSS
자료 pdf 파일로 보내 주실수 있는지 질문드립니다.
제가 자료에 다가 필기를 하면서 공부를 하고 싶은데 pdf 로 파일이 다운이 안되는 파일들이 몇 있습니다. 혹시 보내주실수 있는지 질문드립니다. 이메일은 spiderspoder@naver.com
- 해결됨따라하며 배우는 HTML, CSS
nth-child(2n+1)에 대해 궁금해요
nth child는 몇 번째 자식 요소를 선택할 것 인지는 이해했습니다만 질문이 있습니다.Q1. nth-child(2n+1)은 왜 홀수 선택이 되는 건가요?nth-child(2n+1)이 홀수가 되는 이유를 좀 더 풀어서 설명해주시면 좋겠습니다!Q2. nth-chlid(2)와 nth-child(2n)의 차이가 궁금해요.nth-child(5)가 5번째부터 선택되는 거라면 nth-child(5n)이런식으로도 표현할 수 있나요? 이 경우 5의 배수를 선택하는 건가요?괄호 안에 들어가는 부분이 뭔지 좀 더 설명해주심 좋겠습니다!!
- 해결됨따라하며 배우는 HTML, CSS
개발블로그 내용정리 게시 가능 여부
안녕하세요! 존안님! html, css에 대해 많이 모르는 상태인데도 불구하고 이 강의를 열심히 따라 치고 공부하면서 조금이나마 알아가고 있는 수강생입니다! :)다름이 아니라 제가 개발 블로그를 사용 중인데 내용을 정리하고, 이전에 공부했던 내용들을 다시 찾아보기 위해서 해당 강의를 보고 제가 정리한 내용을 출처 표기하고 올려도 되는지 궁금합니다! 제공되는 강의 자료는 아니고 따로 제가 보고 정리한 내용들만 올리려고 합니다.감사합니다!
- 미해결따라하며 배우는 HTML, CSS
nth child에 대한 개념
nth child에 대한 개념이 설명이 안되고 , 그냥 코드를 작성하면서 지나가는 것 같은데요..이 부분에 대한 설명은 이후에 나오는건가요 ?
- 미해결따라하며 배우는 HTML, CSS
도표자료를 열 수 없습니다.
도표자료를 다운 받았는데, 확장자도 업고.. docx로 확장자를 바꿔도 파일이 제대로 열리지 않습니다.
- 해결됨따라하며 배우는 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를 안붙혀도 되는 이유가 궁금합니다!