46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float 배치 질문
float 속성 설명중에 inline 요소에 상하 마진만 가질수 없다고 했는데 왜 margin auto 할때 중앙에 배치를 할수 없는건가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
이미지를 보다 작게 div를 만들면
찌그러지면서 이상한 모양이 되잖아요? 혹시 이미지를 브라켓 내에서 줄일 수도 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
jquery 작성 관련입니다.
html 작성시에,그냥 a태그로만 안하고 ul과 li를 사용하는 이유가,글자에만 영역을 잡으려고 한다고 하셨습니다. 그렇게 하지 않으면 보더를 그렸을때 아래사진처럼, 글자 옆으로 영역이 더 발생하기에 그렇게 한다고 하셨고,아, 그런의도구나라고 이해했습니다. 그렇다면, jquery 식을 보면, $('.navi li').mouseenter(function(){ var changeImage = $(this).attr('data-image') $('.photo').css({"background-image" : "url("+ changeImage +")"}) }) $('.navi li').mouseleave(function(){ var changeImage = $(this).attr('data-image') $('.photo').css({"background-image" : ""}) }) 이렇게 되면,".btn li"를 눌렀을 때가 되고, 결국 li의 영역은위의 사진처럼 영역이 똑같아 지게 됩니다. 따라서, '.navi li a' 여기에 mouseenter와 mouseleave가 있어야 합니다.그러나 이렇게 되면 changeImage의 data-image경로가 꼬여버리기 때문에data-image를 li가 아닌 a에 주던가, 혹은 아래처럼, $('.navi li').mouseenter(function(){ var changeImage = $(this).parent().attr('data-image') $('.photo').css({"background-image" : "url("+ changeImage +")"}) }) $('.navi li').mouseleave(function(){ var changeImage = $(this).parent().attr('data-image') $('.photo').css({"background-image" : ""}) }) parent()를 넣어줘서 해야,영역이 아래 그림처럼 잡히고 그안에서만 반응하도록선생님께서 의도한 기능이 구현되는 것 같습니다. 제가 말씀드리는 부분이 이해가 가시나 모르겠습니다. 주제넘게 이런거 올려서 죄송합니다.보다 정확하게 하고 싶은 마음과, 선생님께 제가 이렇게 생각한걸 보고 피드백도 받고 싶은 마음,그리고 제가 짚어낸 부분이 맞다면, 다른분들도 같이 참고 했으면 하는 마음이 있어서 그랬습니다. 피드백 기다리겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
overflow:hidden;
css 할때, body에 display:flex; 를 넣어주면, .star-rating 에는 overflow:hidden; 이 필요 없어지고, body에 display:flex; 를 안넣어주면, .star-rating 에 overflow:hidden;을 해줘야 하더라구요(자식요소 div에 float:left;가 들어갔기 때문에). 저는 선생님께서 예제에 overflow:hidden; 을 안넣었는데, 부모의 높이값이 살아 있어서, 왜 그럴까 보다보니까, display:flex; 때문이더라구요. display:flex;의 간단한 부가적인 설명이 있으면 좋겠다고 생각했습니다. 가능하다면 설명 좀 부탁드릴게요 ^^
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float: left 와 width 값
별점만들기 공부중입니다 선생님! 두개의 div 요소를 float:left로 배치해 주시고 width 값을 50%로 주셨는데 각 div요소값이 부모 width의 50%씩 나눠 가진다는 뜻일까요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
background 관련 질문입니다.
.items div:nth-child(1) { background: url('images/photo-01.jpg') no-repeat center center; background-attachment: fixed; background-size: cover; } .items div:nth-child(2) { background: url('images/photo-02.jpg') no-repeat center center; background-attachment: fixed; background-size: cover; } .items div:nth-child(3) { background: url('images/photo-03.jpg') no-repeat center center; background-attachment: fixed; background-size: cover; } 위에서 공통되는 부분을, .items div {} 여기에 넣으니, background-attachment: fixed; 와 background: cover; 가 작동 하지 않더라구요. 왜인지 혹시 알 수 있을까요? 제가 놓치고 있는 뭔가가 있을까 궁금합니다. 다른분들의 질답을 잘 챙겨보고 있습니다. 저는 강의보기 전에, 먼저 혼자 만들어보고, 막히면 몇번 더 해보고, 강의를 보고 다시 따라하며, 여러번 연습을 합니다. 질문하고 나서도 또 혼자 해보겠지만, 그러면서 늘겠죠 ^^;;
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
굉장히 단순한 질문이라고 생각합니다만, CSS관련 질문입니다.
input [id=trgger] {}로 꾸민다면, input#trigger {} 이렇게 꾸며도 결과는 같던데, 둘 중 어떻게 써도 상관은 없겠죠? 그리고 혹시 현업에서는 꼭 어떻게 써야된다거나 그런게 있나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
배경이미지풀스크린검색창 관련 질문 입니다!
잘 공부 하고 있습니다 선생님! 혹시 배경이미지 풀스크린 검색창 완성 하였는데요.. 창 크기가 작아지면 input 요소들, h1요소 글자가 밑으로 내려가며 난리가 나네요ㅠㅠ 보기가 안좋은데 어쩔 수 없는 부분인가요?? 수정이 가능 한가요 ㅠㅠ
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
.box2를 float으로 진행하셨는데 inline-block으로 진행하다가 막히는 점이 있습니다..ㅜ
안녕하세요! 레이아웃 강의를 진행하다가 가로로 정렬하는데 두가지 방법이 있다고 말씀해주셨는데, 강의에서는 float으로 진행을 해주셔서 저는 display속성을 inline-block으로 바꿔서 진행하는 방법으로 진행해보았습니다..! 그런데 문제는 전 강의처럼 inline-block으로 설정하고 부모요소인 .box2에 text-align을 center로 변경했을때 float처럼 붙지 않고 두개는 붙고 하나는 다른 줄에 이동해있더라구요...ㅜㅜ 혹시 제가 놓친부분이나 잘못한 부분이 있을까요..? 코드와 사진 첨부하겠습니다! .container { border: 1px solid red; width: 1200px; margin: auto; } header { background-color: skyblue; overflow: hidden; } header article { /*공통적인 부분을 넣어주기*/ background-color: gray; width: 300px; height: 100px; } .logo { float: left; } .navi { float: right; } .box1 { background-color: yellowgreen; height: 300px; } .box2 { text-align: center; background-color: greenyellow; } .box2 article { display: inline-block; width: 33.333333333%; height: 300px; } .sub1{ background-color: darkgray; } .sub2{ background-color: lightgray; } .sub3{ background-color: lightslategray; } footer { background-color: skyblue; height: 100px; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
드롭다운 네비 질문입니다!
궁금합니다. 선생님 강의로 공부 하면서 dropdown의 자식 dropdown-btn에 호버를 줬어요 .dropdown-btn:hover + .dropdown-submenu 에 디스플레이없앰을 주었는데요 버튼에 마우스를 올리면 a태그들이 밑으로 내려가긴 하는데 마우스를 내리면 내려간 a태그가 유지되지 않고 사라지네요 이유가 궁금합니다. 버튼에 마우스를 올리면 당연히 내려와야 하는것 같은데 버튼의 상위 요소에 호버를 줘야하나요ㅜ .dropdown:hover .dropdown-submenu { display: block; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
시멘틱 태그질문입니다
시멘틱 태그떄 css를 이런식으로 작성 하였는데 결과물이 이렇습니다 왜이러죠? 코드:.container{ border: 1px solid gray; width: 1200px; margin: auto; } header { background-color: skyblue; overflow: hidden; } header article{ background-color: slateblue; width: 300px; height: 100px; } .hc1{ float: left; } .hc2{ float: right; } .section1{ background-color: greenyellow; height: 300px; } .section2{ } .section2 article{} .section2 .s2a1{} .section2 .s2a2{} .section2 .s2a3{} footer{}
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
gnb a span 너비 높이값 질문요!
gnb a span { 의 width 값과 height 값을 100%로 주셨는데 혹시 inherit으로 상속 받아도 될까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
float를 활용한 배치에서 질문
저 21분 44초에서 clear 클래스의 div는 클래스 left나 right의 뒤에 배치되어 있는데 왜 텍스트는 div 박스랑 혼자 밑에 배치되어있는건가요? 그리고 레프트랑 라이트는 플로트 속성을 지니고 있으니까 패런트의 높이에 영향을 주지 않아야 하는거 아닌가요? 그런데 왜 패런트 박스의 크기가 클래스 레프트와 라이트를 포함하나요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
css 질문 드립니다.
이 부분에서 css가 emmet 기능이 안먹는데 왜인가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
혹시 prev next는 형제요소를 가르키나요? siblings와는 다른 관계일까요?
형제 요소중에 이전 이후인지 아니면 가르키고잇는 요소에 이전 이후 인지 궁금합니다.. 검색 해보았는데 형제인지 아닌지는 명확히 찾기가 어렵네요 ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
fixed를 주면 2번 3번 이미지가 사라지고 그라디언트만 나옵니다 ㅠ
그리고 h1 태그를 똑같이 3개를 주면 한번에 같이 동작합니다. ㅠ 따로 nth-child 주고 tab1 2 3 따로 주어도 같이 움직여요 ㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
그 플렉스를 주면 100퍼로 해도 적용 되는데 왜그럴까요?
플롯으로 줄때는 100%로는 안먹히고 33.333333%줘야는데 플렉스는 먹히더라구요 플렉스는 정확히 무슨 요소이기에 변수가 좀 많네요;
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 포지션 앱솔런트를 자식한테 주면은요;;
부모도 함께 높이값을 잃는게 맞나요? 앱솔런트 준 요소에는 인라인블록이 되서 크기값을 잃는것은 알앗는데요!; 부모에게 영향을 주는지는 몰랏네요 ㅠ 아 그리고 ㅠ 이강의에서 오파시티나 애니메이션으로 이동할때 부드럽게 하려고 했는데요 코드가 너무너무 길어지더라구요;; 이 한번에 감싼 900px 구조에는 부드럽게 적용하기 힘드려나요? 너무 자주 질문해서 죄송합니다..
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
인라인 요소 a같은 태그는 text-align center 전혀 안먹히지요?
인라인요소는 width값 height값 다 안먹혀서 center가 안먹힐 거같은데;; 그럼 inline-block은 block과 어떤 차이점이 있나요? 생각보다 중요한 개념인거 같구 변수도 많을거 같아서 ㅠ 검색해서 찾아보고 있는데 너무나도 간단한 설명만 되있어 여쭈어 봅니다 ㅠ 그리고 분명 저는 블록요소안에 인라인블록이나 인라인요소많이 있을때 center이 되는줄 알앗는데 ㅠ span태그안에 a태그를 넣어서 block요소로 바꿧는데도 text-align center가 먹히는것두 잇구요ㅠ 너무 변수가 많은거같습니다 ㅠㅠ
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 질문좀 드리겟습니다. ㅠ
제가 flex1로 주면 basis값이 0으로 바뀌어서 습관적으로 grow1로 주곤 했었는데요 근데 이번 예제에선 grow1로 주면 화면이 깨지는데요 그래서 basis를 0 으로 따로주니까 먹네요 ㅠ 무슨 차이일까요 ㅠ 이해가 잘안되는 부분이라서요 ㅠ 강의와 좀 어긋난 질문이지만 궁금해서 여쭈어봅니다 ㅠ