Hidden

[TIL] JS fetch 비동기 통신을 이용한 CRUD

✍ Today I Learned [Read] 서버와 통신하여 가져오는 데이터의 개수를 알 수 없기 때문에 html의 item card를 미리 만들어 놓는 것이 아니라 1개의 card를 데이터 개수만큼 찍어내야 한다. 대략적인 흐름 [클라이언트가 서버에 데이터 요청 -> 서버가 데이터베이스에서 요청된 데이터를 받아옴 -> 그걸 string으로 클라이언트에게 보냄 -> 프론트에서 데이터의 개수만큼 html을 생성 -> 화면단에 출력] button 타입이 submit 일 경우 자동으로 페이지 이동이 되기 때문에 preventDefault() 메서드를 이용해 기본 속성을 막아주어야 한다. [Read - Detail] 비표준 속성(Non-Standard Attribute)이란? html 태그의 속성이 제한적이므로..

[TIL] CSS 심화버전, 실습 위주

✍ Today I Learned table 마크업을 할 때는 웹 접근성을 준수하여 thead, tfoot, tbody 순서로 작성한다. colgroup 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 사용한다. !important를 사용하면 최우선으로 적용된다. 꼭 필요한 경우에만 사용한다. 내비게이션 바 만들 때 overflow:hidden; 은 왜 사용하는 걸까? W3School TCPSchool currentcolor 키워드를 사용하면 color로 설정한 값을 그대로 사용할 수 있다. inherit 키워드는 부모 요소에게 값을 상속받는다는 의미이다. word-wrap: break-word; 단어가 길면 끊고 다음 줄로 줄 ..

[TIL] CSS 아웃라인, 대체글꼴, 디스플레이 속성

✍ Today I Learned CSS에서 설정하는 height와 width는 내용(content)을 대상으로 한다. 아웃라인(outline)이란 html 요소의 가장 바깥 부분, border 외부에 그려진 선이다. border 속성과는 달리 html 요소의 전체 크기에는 포함되지 않는다. 주로 button에 사용된다. CSS에 text-shadow와 box-shadow 속성을 이용해서 그림자를 추가할 수 있다. font-family 속성을 이용하여 글꼴을 지정할 땐, 대체글꼴을 같이 지정해주는 것이 좋다. 태그를 사용하면 여백과 줄바꿈이 그대로 브라우저 화면에 나타난다. list-style-position: inside; 이렇게 하면 리스트 마커(marker)까지 리스트 태그에 포함된다. display..