기타/front_end

HTML/JavaScripts API 이용하기

자바 스크립트를 이용한 API 데이터 요청 - POST 1) XMLHttpRequest - XMLHttpRequest 함수를 불러옵니다. - open 함수를 이용하여 타입(get, post, update, delete)과 주소를 지정합니다. ※ 데이터 요청시 해당 백엔드에서 Access-Control-Allow-Origin으로 접근을 허용해야 데이터를 얻을 수 있습니다. 2-1) 데이터 요청(데이터 포함 x) - send 함수로 데이터를 요청합니다. - 전송 성공시 데이터(json)를 받고 데이터를 처리 2-2) 데이터 요청(json형태 데이터를 전송과 요청) - 요청 할때 필요한 헤더를 지정해줍니다. - 데이터를 json형태로 파싱하고 데이터를 보내면서 요청을 합니다. - 전송 성공시 데이터(json)..

css 반응형 웹 Flex 시작하기

CSS Flex vs Grid Grid는 Flex보다 늦게 나온 기술로 Flex로 구현가능한 대부분을 구현할 수있다. 하지만 두가지 모두알고 적절한 상황에 적절하게 사용하는 것이 중요하다. reset.css 기본 html 태그 속성들의 값을 모두 없애주는 css 파일 https://meyerweb.com/eric/tools/css/reset/ Flex 레이아웃 기본적인 HTML 구조 (1) 컨테이너에 적용 속성 1) display: flex 내용물의 width 만큼만 차지한다. 좌 -> 우로 이동하는 축이 메인축, 위 -> 아래로 이동하는 축은 교차축 2) 배치 방향 설정: flex-direction 아이템들이 배치되는 축의 방향을 결정, flex-direction: row; 기본 값, 메인축을 좌에서 ..

CSS 미디어 쿼리

CSS 미디어쿼리 css2에서 도입된 미디어 타입 규칙 휴대폰, 태블릿, PC의 각 장치의 화면 크기에 맞게 유연한 구조를 만들기 위한 도구 미디어 쿼리 사용방법 소스코드: min-width 보다 커지면 해당 값으로 변경 실행결과 소스코드: max-width 보다 값이 작으면 해당 값 적용 실행결과