milktea

와 안녕하세요 종민님, 조은님 두분의 질의응답 덕분에 이해되지 않던 부분들을 이해하게 되었습니다.감사합니다 ^_^b&nbsp;&nbsp;

서버 컴포넌트 관련 질문입니다!

파트4 까지 무지성 구매 갑니닷!

노드는 설치가 되어 있습니다 ㅠㅠ터미널 문구&nbsp;***@***-MacBookAir getting-started % node -vv16.14.0***@***-MacBookAir getting-started % sudo npm i typescript -gchanged 1 package, and audited 2 packages in 512msfound 0 vulnerabilities

tsconfig.json 에러

css에서

.sub-menu {

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid #000;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 100%;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #000;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 2;

&nbsp; &nbsp; &nbsp; &nbsp; }

display: none; 처리를 하셨으니 안보이는게 당연한데요!?
display: block;을 하면 보이실거에요.
제이쿼리로 서브메뉴를 노출/비노출 처리를 하려면
display: block / display: none으로 컨트롤 하셔야 합니당.

sub menu가 밑으로 숨어서 보이지 않아요ㅠㅠ

지나가던 사람입니다.
소스코드를 본 적이 없어서 확실 하진 않은데
hover시 opacity: 1을 주시고 싶다는 뜻은
호버 하지 않았을 때에는 .image의 opacity가 0.9 ~ 0까지 의 숫자로
약간 불투명한 상태여야 하는것 아닌가 합니다.
opacity: 0은 불투명도가 낮아져서 아예 안보이는 상태로 만들겠다는 뜻이고&nbsp;
opacity: 1은 불투명도를 높여서 원본대로 보이겠다는 의미입니다.

그리고 0.1 / 0.2 / 0.3 / 0.4 ... 등등 소숫점은 0부터 1까지의 불투명도를 단계적으로 세세하게 조정해서 주기 위한 수치이구요.
이미 .image 선택자는 별도의 opcity속성값이 부여되지 않았기 때문에 기본적으로 opacity: 1의 상태입니다.
그런 .image선택자를 hover를 했을때 opacity: 1를 부여하신다면 이미 동일한 상태이기 때문에 변화가 없는것이구요.

.image { opacity: 0.5;}
.image:hover {opacity: 1;} 로 하시거나
---
.image {}에는 opacity값을 주지 않고 지금처럼 그대로 두시고
.image:hover {opacity: 0.5;} 정도로 변경해서 테스트 해보세용.

쌤.. hover시 css적용을 해주고싶은데 어떤 방법이있을까요?

이 질문에 대해서는 브라우저들을 어디까지 대응하냐의 문제에 따라 달라져요.
크롬을 제외한, 파이어폭스,IE,엣지 등의 브라우저는&nbsp;
flex와 grid를 완벽히 지원하지 않습니다.
지원하더라도 최신 버전들만 지원하고
구버전은 지원하지 않아 레이아웃이 깨지구요.
 
대부분의 웹개발자들은 신기술들이 편하다는 것을 인지하고 있지만 신기술을 바로 사용하지 않는 이유는,
이러한 크로스브라우징에 관한 문제 때문입니다.
 
내 브라우저에서는 레이아웃이 깨지지 않고 잘 나오지만, 실제 사용하는 다수의 유저들.
즉, 나의 개발환경과 똑같을 수 없는 다양한 브라우저와 버전을 사용하는 유저들의 환경까지 고려하여
개발하려면 브라우저가 완벽히 지원하는 기술들을 사용하는 것이 안정적인 방법이겠죠.
혹은 나는 IE/엣지/파이어폭스/IOS등을 포기하고 크롬만 완벽히 대응하겠어! 라고 목표를 잡고 개발한다던지요.
 
float의 경우&nbsp;
https://caniuse.com/?search=float
float이라는 css속성은 대부분의 브라우저들이 안정적으로 지원하고 있습니다.
 
반면에
https://caniuse.com/?search=display%3A%20flex
https://caniuse.com/?search=grid
flex와 grid는 일부 버전은 전혀 대응하지 않는 경우도 있죠.
 
그렇기 때문에
현업자들은 안정적인 float과 어느정도 대응하고 있는 flex를 적절히 사용하고 있구요.
grid의 사용빈도는 많이 떨어지는 편입니다. 
예를 들자면 정부관련 사이트의 경우 아직 IE 9버전을 사용하는 유저들까지 생각해야 하기에 이러한 신기술들은 사용하지 않고
안정적인 기술들 table, float, position을 이용하여 레이아웃을 짜구요

인터랙티브하고 화려한 기술을 사용해서 웹페이지를 구성하는 사이트들의 경우 최신 css기술들을 적극 활용하여 레이아웃을 구성하고 디자인합니다. 
실무에서는 못하고 어려워서 포기하면 안됩니다.
해결하기 어려운 부분을 해결해내고 방법을 찾아내야 하거든요. 
경험한 바로는 하나의 기술만&nbsp; 사용하는 것 보다.
적재적소에 알맞는 기술을 사용하고 활용하는 것이 진짜 실력이라고 생각합니다. 
이런 편리하고 좋은 기술들이 있는데 왜 쓰면 안된다는 거지..? 라는 생각이 드실 수도 있습니다.
그런 의문을 해소하기 위해선
크로스브라우징에 대해서 공부를 좀 더 해보시는 것을 추천 드립니다. 
웹개발을 하시면서도 크롬에서 테스트 하던 것들을
IE 구버전이나, 파이어폭스, 엣지에서도 테스트 해보시구요.
can i use 사이트를 항상 참고하셔서 개발하시면 좋을 것 같습니다. 
float은 처음 접하면 이해가 어렵죠..
어떤 부분이 어렵고 이해가 되지 않으시는지 말씀해주시면 도와드릴게요.
참고로 실무에선 아직 float과 position을 많이 사용합니다.

float 대신 grid와 flex만써도되나요.??

전체 코드를 본 적이 없고, slick JS 를 사용해본 적이 없어서 ㅠㅠ..
정확하지 않을 순 있으나..! 일단 슬릭 슬라이드 스크립트를 찾아서 만들어보았는데용!
이렇게 만드는걸 원하시는 건가요?
👉결과화면
<img src="https://cdn.inflearn.com/public/comments/59ddcf09-f199-4e8e-9452-b8968946ec20/blob" alt="" />
<img src="https://cdn.inflearn.com/public/comments/08126763-598b-4f13-b217-7729c4c9d3db/blob" alt="" />
다음 슬라이드 일부가 보여지는 형식을 원하시는거죠!?
.slick-list 의 패딩값을 조절해주시면 되시는데...
제가 썼던 코드 이미지로 첨부해드리니 참고하셔서 만져보세용!
padding:&nbsp; 0 0 0 0; 이렇게 네자리 일 경우
padding: top right bottom left; 순서입니당!
참고하셔서 퍼센트나 px로 원하시는 만큼 샤샥 건들여보시면 되실것 같아용!😏

이미지는 글씨가 작아서 안보일 수 있으니까
이미지 마우스 오른쪽 클릭 후 새창 띄우기 하신 다음에 확대해서 보세요~!
도움이 되셨길 바라며..! 즐코하세요! 이만 뿅!❤


<img src="https://cdn.inflearn.com/public/comments/029057a7-75ee-4bdb-94ce-79ed46522aa9/blob" alt="" />

history-slider > div 들이 모바일에서 width:90%로 보이게 하고 싶습니다.

피그마 미러를 실행시킨 상태로
피그마 프레임 대지 왼쪽 위에 작게 타이틀 적혀있는것을 클릭해보세요 '-'!
그럼 그 글씨가 푸른색으로 바뀌면서 미러링이 되던 것으로 기억해용

안녕하세요!

오잉 크롬에서 정상적으로 작동하는데용
혹시 브라우저 뭐 쓰시나요
일부 브라우저에서 문제가 있을 수도 잇는데

position3

vw;
vh; 속성들은
&nbsp;디바이스 너비 혹은 브라우저 높이값에서 퍼센트로 계산하겠다는 뜻입니다.
이는 해상도에 대한 이해가 조금 필요해용 '-'!

만약 글쓴이님의 디바이스나 브라우저 높이 값이 100px 인데
90vh를 사용하셨다면 90px이되는 것이구요

강사님 디바이스 혹은 브라우저 높이값이 1000px이라면 90vh;의 기준은 900px이 될거에요.
.
.
또한 css들은 특히 크롬은 웹표준성에 근거하여 최신 css까지 적용되나
엣지나 ie는 지원되지 않는 css가 있습니다.
가장 정확하게 보시려면 크롬을 기준으로 보셔야 할거에요.
노트북은 화면은 일반 1920*1080 너비 모니터에 비해서 작을 수 있으니
강사님과 크기 차이가 있을 수 있어욥!

참고용 링크 드립니당 뿅
https://programming119.tistory.com/93
https://nykim.work/85
https://mber.tistory.com/48

milktea

Posts