49,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨중상급 퍼블리싱을 위한 CSS3의 모든 것
inherit와 100%의 차이가 궁금합니다.
안녕하세요 선생님, ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 를 듣다가 궁금한 점이 생겨 질문 드립니다. 10:32 분에 보여지는 .dropdown {width: 150px'}.dropdown-btn {width:inherit;} 14:50 분.tour-item {width:400px;}.tour-photo img {width:100%;} 둘다 부모 자식관계라 부모의 크기를 따라가는 것도 이해가 되었는데 inherit 과 100% 는 그럼 같은 기능을 가진 코드일까요?두 가지 방식 모두 사용할 수 있다는 것을 소개해주신건지, 아님 특정 상황에 각각의 사용법이 있는지 궁금합니다.
- 해결됨중상급 퍼블리싱을 위한 CSS3의 모든 것
<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.
안녕하세요 쌤~ 제가 지금까지 디스플레이 이해도가 낮아서br 태그를 엄청 썼었는데요,(display 속성 이해도가 없을 경우 생기는 비 웹 표준 코딩)강의를 보고 무릎을 탁 쳤습니다..!!ㅠㅠ 그러다 문득 드는 생각이 있더라고요. 강의에 나온 예문에는 span 태그를 block 속성으로 바꿔서줄바꿈을 하는 건 이해를 했는데요, h1과 span 이라, 짧은 문장이라 쉽게 이해되는데밑에 첨부한 사진처럼 p 태그 안에 문단을 바꿔야 하는 장문일때는 줄바꿈을 어떻게 해야 좋을까요?
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
수업자료는 없나요?~
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.,
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
[공유] 부모 요소가 position: absolute 인 경우에 대한 설명
영상 마지막 부분에 보면 부모 요소에 position: absolute인 경우에도 부모-자식 요소가 매칭이 되게 되는 걸 보셨을 겁니다. 정확하게는 relative가 부모, absolute가 자식으로 매칭되는 것이 아닌 (편의상 이렇게 설명을 하셨지만) absolute는 position: static 속성을 가지고 있지 않는 조상을 기준으로 작동합니다 즉, relative, absolute, fixed, sticky 의 값을 가지고 있는 부모가 있다면 자식-부모 매칭이 됩니다.그러나, 대부분의 경우에는 relative-absolute인 경우가 대다수죠!
- 미해결중상급 퍼블리싱을 위한 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 요소 모두 무시하고 그냥 아무것도 없는 것처럼 가운데에 오게 되는 거죠!
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
안녕하세요 가상클래스 포지션 활용 질문드립니다
안녕하세요 강의를 듣다 의문이 생겨 질문을 드립니다. before after 가상클래스(도형과 버튼 만들기 , 포지션 활용)01 강의중13분 경 가상클래스 포지션 활용을 설명해 주시면서 absolute가 relative가 우선 한다고 설명해주셨는데요 강의에서는 .btn:before에 적용되어있는데 .btn:after 로 적용하게 되면 text가 가려지게 되는데 relative가 우선하게 되면 before after에 관계없이 text가 보여야 될거 같은데 가려지게 됩니다 동작 원리에 대해 좀 더 설명을 해주시면 감사하겠습니다
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중
안녕하세요 강사님 강의를 듣다 질문이 생겨 질문드립니다.드롭다운 컨텐츠 강의 중 23분경에 마우스 호버 이벤트가 p태그나 image가 위치하는 곳에 마우스가 올라가도 이벤트가 발생하는 문제가 있다고 말씀하셨는데요 그러면서 tour-item 에 border 가 그려진 영역이 마우스 반응영역이라고 하시면서 부모요소에 position :relative 자식요소에 position:absolute를 주시고 border영역을 제한하셨는데요이렇게 border영역이 줄어들어도 실제로 마우스border가 그려진 영역 밖에 올려도 hover 이벤트가 발생을 하는데요 border영역 밖에서는 hover이벤트가 발생하지 않는것을 보여주시는거라 생각했는데 그게 아니라서 혼돈이 와서 질문드립니다 제가 뭔가 놓친 부분이 있나요? 최초 border영역에서만 hover 이벤트를 발생시키고 tour-content영역이 보여질때는 마우스가 tour-content영역에 있으면 tour-content를 계속 보여주고 싶은데요 여러가지 방법을 시도해보았는데 컨텐츠 내용이 사라질때 transition이 적용안되는 반쪽짜리 해결법이라 다른방법이 있나 궁금합니다
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
nav 태그
안녕하세요 강사님 질문이 있어 질문드립니다.강의 1분 30초경에 nav 태그를 설명하시면서 하나의 html 문서에 여러개의 nav 태그가 오는것은 시멘틱 태그 취지에 맞지 않다고 설명해주셨는데요mdn 사이트에 nav 태그를 검색해보면<nav> 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 <nav> 태그를 가질 수 있습니다. 이럴 때 aria-labelledby를 사용해 접근성을 향상할 수 있습니다.이렇게 내용이 나오는데요 혼란이 있어 질문드리게 되었습니다. 감사합니다.
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
css 선택자의 모든-선택자 우선순위가 중요한 이유 강의 내용중에서
안녕하세요 수강을 시작한지 얼마 되지 않은 학생입니다. 강의를 듣던중 질문이 생겨 질문드립니다. 강의 12분 경 선택자 우선순위를 설명하시면서 외부 스타일시트 보다 내부 css가 더 우선한다고 말씀해주셨는데<link rel="stylesheet" href="style.css"><style>h1 {color : yellowgreen;}</style> 이런식으로 구성되어 있는데 내부 css가 우선해서 yellowgreen 이 적용된다는 식으로 말씀을 해주셨는데 우선순위가 같을 경우 top-down 으로 적용되다 보니 yellowgreen이 적용되는거 아닌가요 style 태그가 link 태그 상단으로 이동된다면 결과는 반대가 됩니다 우선순위가 같을 경우 나중에 쓴것이 덮어쓴다고 알고있습니다 하신 말씀이 오해의 소지가 있는거 같아 질문 남깁니다 답변 부탁드리겠습니다 감사합니다.
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
강의자료는 어디서 받을 수 있나요?
비주얼 스튜디오 코드(Visual Studio Code) 사용법 강의를 보고 있는데 자주사용하는 에밋 단축키라던지 vscode 설정법 관련 강의자료 pdf 를 올려주신다고 하시던데.. 그 자료는 어디서 받을 수 있나요?
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ
23:33분에 background:url(images/...) no-repeat;부분이 있는데 다른 사진 넣으면 뜨는데 카카오톡 이미지만 넣으면 뜨지 않아서 문의 글 남깁니다ㅜㅡㅜ
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
유튜브 영상 파일
선생님 유료강의 다 듣고 유튜브에 올라온 필수 영상 공부중입니다!<a태그 앵커 만들고 2가지 방식으로 스크롤하기>영상에서 제공해주신 파일이 어딨는지 모르겠어요ㅠㅠ알려주세요~~!!!
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
모바일 css 작업(단위)
선생님, 오랜만에 인사를 드리게 되었네요.벌써 입사를 한지 1년이 다되가고 있네요.처음에는 너무 힘들어서 전화를 하면서 선생님께 고민상담도 했는데 지금은 다들 2~3년차로 볼만큼 성장(혹은 찌든..)하였습니다.현재 자사 신규서비스 퍼블을 하면서 바쁘지만 또 재미를 느끼고 있네요.다름이 아니라 여쭤볼게 있어서 질문을 남기게 되었는데요.저희회사는 모바일을 미디어 쿼리를 안쓰고 모바일 환경이 세팅이 되어있는 상태인데요.pc는 1920이나 2560 환경에 맞게 작업을 해서 ui적으로 문제가 없습니다.하지만 모바일은 디바이스별로 천차만별이라 어떤것에선 ui가 맞고 어떤것에선 틀어지는 현상이 발생하고 있습니다.처음에는 vw단위를 활용해 작업을 하였는데, 실제 qa나 stage에 올려 모바일에서 볼 경우 깨지는 경우가 종종 있더군요그래서 퍼센트 단위를 사용하거나 vw를 적절히 사용중인데요.선생님께선 모바일 환경에서 작업 시 어떤 단위를 활용해서 작업을 진행하셨나요??? 요번주 금욜부터 많이 추워진다는데 감기 조심하시고 또 코로나 조심하세요. 감사합니다.
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
유튜브의 초급,중급 이론과는 어떤차이가 있나요?
회사 업무상 마크업을 할 일이 없어 손을 놓고 지내다가이직을 생각하며 다시 마크업 공부를 하려고하는데요.html/css를 아예 모른다고는 하기 힘든데 (기본적인 작업정도는 구글링 해가면서 가능합니다)완전 초급부터 다시 해야 할지아니면 이 강의를 통해서 부족한 부분을 채워나가는게 맞을지.. 어느 것이 더 효율적일지 궁금해서요.
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
선생님 질문이 있습니다. (float 속성)
안녕하세요 선생님. 질문이 있습니다..logo .menu 부분의 float를 저렇게 설정을 해주었는데요,float: right 가 오른쪽으로 이동하질 않아서요...아무리봐도 오타는 보이지 않는데 뭐가 문제인걸까요?..
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
파일다운로드와 관련하여
안녕하세요 선생님. [다운로드] 퍼블리싱 완성본(프로필카드, 생생후기, 로그인폼, 로그인폼 :is 가상클래스) 다음의 수업자료를 저장하려고 하니, 저장버튼이 안떠서요. 확인 부탁드리겠습니다.
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
포지션(position) 속성(z-index와 포지션 속성 우선순위) 강의 질문있습니다.
HTML <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> CSS div[class*=box] { border: 1px solid #000; width: 200px; height: 200px; font-size: 2em; text-align: center; line-height: 200px; position: absolute; } 저 강의에서요 box클래스명을 가진 div에 position: absolute를 주면 div3개가 한꺼번에 모이는데 왜3개가 한꺼번에 모이는지 원리를 잘 모르겠는데 궁금해요 저 div3개 박스들이 absolute를 줘서 붕뜨는 그런 원리인가요?
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
오타(contaner)
안녕하세요. 강의 열심히 듣다 오타를 발견해 글 올립니다. 강의36분 24초에 클래스 이름 container가 html파일에 contaner 적힌 것이 오타인 듯 합니다. 감사합니다.
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
float 속성을 설정했을 때 display: inline-block이 되는 것에 관련하여 질문이 있습니다.
inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'css(propertyIgnoredDueToDisplay) VS Code에서 display: inline-block; float: right;로 설정하니 노란색 밑줄이 생겼습니다. 그래서 그 위로 마우스를 올렸더니 위처럼 메시지가 떴는데요. 이 메시지는 float 값이 none이 아닌 경우 display 속성은 블록으로 처리된다고 하는데 선생님 말씀과 달라서 헷갈립니다..
- 미해결중상급 퍼블리싱을 위한 CSS3의 모든 것
margin: auto;
6분 20초 쯤에 margin: auto;가 등장했는데요. margin: auto;를 했을 때 상하좌우가 아니라 좌우 마진만 정렬되는 이유가 무엇인가요..