작심삼일

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 예제를 알아보..

VSCode에서 Open in browser 크롬이 default 로 사용하기 위한 세팅 방법을 설명해보겠습니다. 맥 os환경이 아닌 윈도우 환경에서도 같은 방법으로 진행하면됩니다. 1. 먼저 VSCode에서 Open in browser를 설치 하지 않았다면, 'open in browser' 을 설치해준다. 2. 톱니바퀴에서 Extension Settings 클릭 3. Open-in-browser : Default 에서 아래 텍스트 박스에다가 'chrome'이라고 입력합니다. 4. 오픈하고 싶은 html 파일을 우클릭 후 'Open In Default Browser'를 클릭한다. 5. 열고싶은 크롬이 Default가 된 것을 확인할 수 있다.

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

Extensions 는 위 아이콘을 누르거나, Crtl + Shift + x 로 열수있다. 1. Open in browser html 파일을 저장한 후 'ctrl' + 'b' 를 누르면 브라우저로 실행 가능함 2. Prettier - Code formatter 'ctrl' + 's' (저장) 버튼을 누르면 html 파일의 포맷을 자동 정렬 해준다. (맥북은 cmd + s) 1) 'Shift' + 'Ctrl' + 'P' 를 누른후 'Open Setting(JSON)' 실행 (맥북 : cmd + shift + P) 2) 아래와 같이 세팅을 해준다. 사용하다가 괜찮은 Extension 이 나올경우 추가해서 공유하겠습니다.

웹의 기본인 HTML, CSS, 자바스크립트 에 대해서 알아봅시다. 그중에서도 UI의 뻐대를 만들어주는 HTML 을 먼저 공부해보겠습니다. 1. HTML 기본 구성 기본구성은 html, head, body로 구분됩니다. (vs code에서 기본 구성을 자동환성 하려면, html 파일에서 'html:5' 로 타이핑 하시고 엔터를 누르면 자동완성해줍니다. ) html 2. HTML 기본 문법 - 기본 형식 : 콘텐츠 기본 형식 태그의 기본 형식 - 속성 형식 : 콘텐츠 속성 형식 Hello shoney - 콘텐츠가 없는 형식 : 콘텐츠가 없는 형식 - 주석 : 주석 3. HTML 주요 태그 알아보기 h1~h6 headline 을 나타낸다. h1이 가장 크고, h6이 가장 작습니다. 소스 코드 shoney s..