westagram3 @midea를 이용해 반응형 웹 구현하기 일이 거대할까봐 걱정했는데 애초에 css 짤때 크기가 화면에 따라 키웠다 줄었다 할 수 있도록 신경써서 짜서 생각보다 쉬웠다. 그저 @midea만 사용해주면 손쉽게 되었다. Mission 9 | 반응형 구현 HTML, CSS repl.it 문제에서 Responsive Web(반응형 웹) 에 대해 학습하였습니다. 화면의 크기가 어느 지점(break point) 이하로 줄어들 시 우측 아이디 추천 섹션이 사라지도록 구현해주세요. 화면이 줄어들면 우측섹션이 사라져야해서 1200px에서 더 줄어들면 display속성을 none으로 설정해주었다. min과 max가 있어서 직접 적용해보면서 필요한 것을 적용하는 것이 좋을듯 하다. @media screen and (max-width: 1200px) { .main-r.. 2023. 6. 13. opacity로 프로필사진 클릭시 메뉴박스 보이게 구현하기 프로필 박스를 누르면 메뉴박스가 나오게 하는건 금방했지만 메뉴 박스 바깥 영역 클릭 시에는 닫히는 것을 구현하는데 시간이 좀 걸렸다. 실제 인스타 페이지처럼 프로필 사진 클릭 시 메뉴 박스가 생성될 수 있도록 구현해주세요. 메뉴 박스 바깥 영역 클릭 시에는 다시 닫히도록 구현해주세요. 먼저 DOM으로 필요한 값들을 불러왔다. const man = document.getElementById("man"); 버튼을 누르면 나올 메뉴박스를 html에서 미리 만들어두고 css속성 중 opacity를 0으로 설정해두었다. 사실 display:none을 쓰고 싶었지만 display:flex로 요소들을 배치해둬서 opacity로 설정했다. 이것 또한 첫 설정값은 0이지만 조건에 0으로 설정해두면 첫 클릭이 먹히지 않아.. 2023. 6. 13. filter method 이용해서 아이디 검색 기능 구현하기 이번 과제 중에 제일 어려웠던것 같다. 다른것들도 하루종일 고민했지만 이건 하루종일 고민해도 너무 어려웠다. 다른 기능은 다 구현했는데 여기서 filter를 통해 원하는 검색결과만 보이게 하는 기능이 제일 어렵게 느껴졌다. 실제 인스타 nav 검색창에 아이디를 입력 시 검색 기능이 실행됩니다. 아이디 데이터를 담고 있는 배열을 선언해주세요. 검색 창에 텍스트 입력 시 배열의 요소 중 해당 텍스트에 일치하는 아이디만 보일 수 있도록 구현해주세요. for 문이 아닌 다른 array method를 사용해 구현해주세요. DB가 아닌 그냥 간단하게 보여줄 정도라서 javascript 파일 상단에 배열로 id list를 만들어준다. let userArray = [ { id: "wecode_bootcamp", sub.. 2023. 6. 13. 이전 1 다음