WeCode4 @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. RDBMS와 ERD 나는 개발자의 길을 프론트로 시작했지만 DB와 데이터에 대해 프론트도 알고 있어야 한다며 DB수업을 듣게 되었다. 정말 간단히 알려주셔서 아래에 간단히 정리해보았다. Database : 정보/데이타 저장소 DBMS(database management system) : 정보/데이터를 관리, 활용, 가공하는 것 RDBMS(relational database management system) : 관계형 데이터 베이스 데이터를 상호관련성 가진 형태로 표현 모든 테이블을 2차원 table로 표현 각 행은 자신만의 고유 key 존재 각각의 테이블은 상호관련성 가지고 연결가능 primary key를 통해 low 검색 및 참조 관계 유형 primary key : 자신만의 고유 키, foregin key : 참조하는 키.. 2023. 6. 10. 이전 1 다음
