작심삼일

html 요소들을 배치하기 위한 flex 레이아웃 사용방법을 알아보도록 하자 먼저, 기본이 되는 소스코드부터 따라 하도록 하자. 1. 기본 코드 이 기본 코드를 기반으로 flex 속성마다 어떻게 변하는지 확인하도록 하자. 소스 코드 .parent { background-color: orange; border: solid 1px black; } .child { width: 100px; height: 100px; margin: 8px; background-color: white; border: solid 1px black; } 자식 자식 자식 결과 2. flex-direction flex-direction을 부모에 선언하면 자식들의 정렬 방향을 설정할 수 있다. 1) row, 2) column 예제를 알아보..

1. axios 외부 라이브러리 다운로드 script 태그를 사용해서 아래 링크를 src로 연결합니다. 저는 html 헤더 부분에 아래와 같이 axios 라이브러리를 불러오는 스크립트 태그를 작성했습니다. 소스 코드 다음 스크립트에 log로 axios 객체를 확인해봅시다. 로그로 axios 라이브러리가 제대로 받아졌는지 확인 가능합니다. 소스 코드 console.log(axios); 결과 2. 통신 간단 예제 axios는 promise 객체로 비동기로 실행 가능하다. (비동기 promsie 객체에 포스팅으로 바로 가기) 또한 promise 객체는 then, catch를 사용할 수 있다. then : promise 객체가 성공 한 경우, 실행 catch : promise 객체가 실패 한 경우, 에러 코드 ..

HTML로 뼈대를 구성했다면, CSS로는 좀더 디자인 적인 요소들을 설정 할수있다. 문법을 하나하나 공부하기 보다는 아래의 예제를 눈으로 따라가보자. 코딩이라는 것은 직접 해보는 것이 이해하기 쉽다. 1. 기본 문법 먼저, HTML로 아래와 같이 작성해보자. (복사 붙어 넣기로 html 파일에 붙여넣자.) 혹시 HTML을 모른다면, HTML 부터 공부하고 CSS를 시작하자. (HTML 공부 링크 : HTML 태그 기본 문법) html (p) hello (p) 반갑습니다. (p id="id-use") 아이디 적용 (div id="id-test1") id 1 (div id="id-test2") id 2 (div class="class-test1") 클래스 1 (div class="class-test2") 클..