TIL

JavaScript이용하여 HTML에 list추가하는 방법 익히기

안써본 background 효과 익히기

익숙하지 않은 Attribute selector 다시 보기

CSS로 숫자를 자동으로 생성하는 방법을 배워보자!

물이 담긴 컵 같이 유동적으로 반응하는 반응형 웹사이트를 위한 Units를 배워보자!

: 모니터의 해상도. 모니터 사이즈: URL, Tab을 포함한 브라우저의 전체 사이즈: URL, Tab은 제외되지만 스크롤바는 포함한 페이지 사이즈: 스크롤바도 제외한 페이지 사이즈clientHeight/clientHeight return width/height of

position:fixed와 유사하게 window 상단/왼쪽 모서리에서부터 계산하고이 좌표를 clientX/clientY로 표시document 최상단(root)에서 position:absolute를 사용하는 것과 비슷하게 document 상단/왼쪽 모서리에서부터 계산하

주문 전송사용자 정보 읽기서버에서 최신 변경분 가져오기기타 등등새로 고침 없이 필요할 때 서버에 요청을 보내고 새로운 정보를 fetch()메서드로 받아올 수 있다.fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다.resource : 불러올

scrollWidth와 scrooHeight 속성은 clientWidth, clientHeight와 유사하지만, 스크롤바에 의해 감춰져 있는 숨겨진 영역도 포함한다는 점이 다르다.수평 스크롤바가 없기 때문에 scrollWidth = clientWidth수직 스크롤바가

🎯Datatype을 바꾸는 방법을 익혀보자 🔑방법1. 자동형 변환 이용 1. From Number to String 2. From String to Number * 장점: 가장 간단하게 변환 시킬 수 있다. * 단점: 타인이 보면 어떤 의도로 작성한 코드인지

프로그래밍에서 "semantic하다" 는 것은 의미를 가지고 있음을 나타낸다.HTML 마크업을 할 때, 컨텐츠(데이터)를 대표할 수 있는 태그를 사용하여 작성되어야 한다.브라우저와 개발자 모두에게 코드에 담긴 컨텐츠(데이터)의 의미를 명확하게 전달할 수 있는 요소로 그

문서 상에서 요소의 위치를 지정하는 속성은 position이다.position의 속성값에는 static(default), relative, absolute, fixed 그리고 sticky가 있다.Type - 어떤 종류의 position을 사용할 것인지이동의 기준점 -

HTML의 모든 요소는 box다.display: block, display: inline, display: inline-black, display: flexwidth, height, padding, border, margin값 모두 줄 수 있다.block 요소 옆에 충

float: left - 요소를 왼쪽 방향으로 부유하게 설정float: right - 요소를 오른쪽 방향으로 부유하게 설정float: none(default)float는 이미지와 텍스트의 레이아웃을 구성할 때 쓰던 속성이지만 전체 웹 레이아웃을 생성하는데 사용되기도 한

/^\[a-z]{5}/ 여러 글자 중 앞 5 글자/\[a-z]{5}$/ 여러 글자 중 뒤 5 글자/^\[a-z]{5}$/ only 5 글자만 유효 /gr(a|e)y/ gr로 시작하고 a 또는 e 가 오며 y로 끝나는 단어/gr\[ae]y/ 위와 같은 뜻으로 a

부모 component에서 alices를 props로 받아와서 변수에 할당하고배열인 alices에 map() method를 써서 그 결과를 새 변수 aliceList 에 할당하고(Destructuring)jsx가 들어가야하는 return에서 변수 aliceList

React에서는 부모 컴포넌트에서 자식 컴포넌트로 전달한 props를 통해 자식 컴포넌트는 데이터를 수정하고 재렌더링 되어 UI에 반영되는 것이 기본이다. 하지만 예외적으로 직접 DOM에 접근하여 요소를 불러와서 수정해야 하는 경우가 생긴다. 이때 사용할 수 있는 것이

하나의 컴포넌트는 한 가지 일을 하는가? 하나의 컴포넌트가 커지게 되어 보다 작은 하위 컴포넌트로 분리하였는가? JSON 데이터를 불러왔을 때, 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리하였는가? 데이터 모델을 가지고 UI를 렌더링은 되지만 아무

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 부모 컴포넌트 DOM 계층 구조에

constructor()컴포넌트 생성자 함수.컴포넌트가 새로 만들어질 때마다 이 함수가 호출componentDidMount()컴포넌트가 화면에 나타나게 됐을 때 호출되는 API.DOM 을 사용해야하는 외부 라이브러리 연동: D3, masonry etc해당 컴포넌트에서

quiz1에 의해 원래 배열인 arr의 변형이 일어났다.quiz1의 결과 주목! map은 결국엔 배열을 뱉어낸다. 이 경우, 배열 안의 요소 수만큼 "천재"가 담긴 배열이 탄생하였다.원래 배열에는 변형이 없지만, 아무것도 뱉어내지 못한 quiz2는 undefined을

URLSearchParams interface defines utility methods to work with the query string of a URL.유연한 환불 정책에 동의 여부, 슈퍼호스트 여부 및 숙소유형, 주류 종류를 선택하면 그 값들을 query st

호스트모드에서 숙소를 등록할 때 사진을 업로드 해야한다.단순히 미리보기만 하는 것이 아니라, 숙소 등록이 완료된 후 DB에 사진 정보를 포함한 모든 정보들이 등록이 되어야 하고, 숙소리스트에서 방금 호스트가 등록한 숙소가 보여야 한다. 이를 위해 사용한 것이 FormD