HTML 3

React /삭제,수정/Fetch요청

위와 삭제 버튼을 눌렀을 때 알고리즘은 3번을 삭제할 때 밑에 있는 4번을 3번 자리로 이동시켜주는 것이다. 이렇게 하면 자료가 10000개가 있다고 가정하면 99997개의 자료를 다시 한 칸씩 당겨야 한다. 이건 별로 좋은 알고리즘이 아니다. 컴퓨터에서 io다음으로 지연을 시키는 요소가 렌더링이다. 위 알고리즘처럼 하면 그림을 이동시켜야하는데 이게 렌더링 작업 중에 하나다. 그래서 리 엑트에서는 삭제할 때는 각 엘레맨트에 데이터를 이동시킨다. 위 경고창이 나온 이유도 item마다 key가 있어야 효율적으로 엘레멘트를 찾아서 작업을 해줄 수 있기 때문에 ket값을 넣어주라는 말이다. 삭제 버튼 구현 삭제버튼을 눌렀을 때 상태 변경을 하려면 PostItem에서 상태를 들고 있어야 하는데 App에서 들고 있..

React 2023.08.10

부트스트랩 사용해서 기본적인 프론트 만들기 연습(AIRBNB)

html배치는 flex를 사용해서 할 것이다 일단 먼저 airbnb사이트 디자인을 할 때 크게 두 개의 블록으로 나눌 것인데 이때 해더와 바디로 나눌 것이다. 시멘틱 태그를 사용한다 이제 해더를 구성해보자 위 사진이 해더가 되고 일단 큰 박스부터 설계를 한다 메인 부분을 보면 컨탠츠들이 가운데 정렬이 돼 있는 것을 볼 수 있다. 그렇기 때문에 한 박스 한 박스씩 코드 처리를 해서 정렬을 하기보단 가장 큰 하나의 박스 안에 섹션들을 넣어서 관리한다. 호스트가 되어보세요 회원가입 로그인 도움말 특색 있는 숙소와 즐길 거리를 예약하세요 목적지 체크인 체크아웃 인원 인원 검색 에어비앤비 둘러보기 숙소 및 부티크 호텔 트립 어드벤처 레스토랑 에어비엔비

HTML,CSS 2021.07.13

HTML,CSS,자바스크립트 관계, HTML 배치

HTML 기본개념 html은 문서를 만들기 위한 한글오피스 같은 것이다. html은 마크업 랭귀지 태그로 구성된 열고 닫는 태그들이 있고 그 태그들이 블락을 가지고 있는지 인라인을 가지고 있는지만 알면 html은 끝이다. 인라인은 옆으로 흐르듯이 작성되는 속성 블락은 밑으로 흐르듯이 작성되는 속성 쉽게 말해서 어떤 태그들이 있는지 알고 그 태그들이 블락인지 인라인인지 아는 게 html의 전부라는 것이다. 이 html문서를 동적으로 반응하도록 만들어 주는 것이 자바 스크립트이다 CSS 기본개념 CSS는 html로 만들어진 문서를 디자인하는 목적이 있다. 기본적인 html5의 구조이다. head에는 CDN을 주로 넣는다. body에는 브라우저가 출력해주는 태그이다. 이 body안에 있는 내용들을 동적으로 반..

HTML,CSS 2021.07.12