NOW OR NEVER

반응형 웹디자인 1990 중반은 데스크탑 위주 브라우저 최근에는 태블렛과 핸드폰에서 이용하는 경우가 많아 반응형 웹디자인으로 만들어야 공간 활용을 잘 할 수 있다. 브라우저 컨테이너 사이즈에 따라 컨텐츠가 유동적으로 변화 컨텐츠를 물같이 유동적으로 어떤 컨테이너에 담기든 그것에 맞게 만들어라 웹사이트를 만들 때 고정된 사이즈 보단 유동적으로 레이아웃을 만드는 것이 중요하다. px이 아닌 flex grid, flex box, %, vw, vh 등을 이용해 사이즈를 구성한다. media queries 컨테이너 사이즈에 따라 레이아웃 재배치 : css의 media Queries 이용 데스크탑, 태블릿, 모바일 각각 사이즈 범위 지정해서 그것에 맞게 웹사이트 변화 요즘에는 기준이 되는 사이즈는 없지만 굳이 나누..

html 웹을 이루는 가장 기본적인 블록(파일) Html 없이는 웹사이트 못 만듦 Hyper text markup Language Markup 언어 : 어느정도 태그를 이용해서 구조적으로 보여지는 것 Docktype>html>head>body head : ui 적인 요소가 없음, css 불러오는 역할도 함, meta data만 존재, 상세 설명 body : user에게 보여지는 파일들로 이루어져 있다. heading h1~ w3c 웹의 표준화를 추진하는 단체 여기서 정한 표준에 맞게 브라우저를 구현해야 한다. 브라우저는 유효한 태그를 쓰지 않아 어느정도의 에러가 발생하면 똑똑히 회복해서 유저가 html을 보는데 지장이 없도록 할 수 있다. mdn 지원 가능한 태그들 확인은 mdn에서 확인 할 수 있다. ..

Javascript 나의 책 관리하기 프로젝트 만들기 구성 로그인 페이지 2. 리스트 페이지 3. add 화면 3. detail 화면 4. edit 화면 API 사용방법 axios 라이브러리 사용 http 프로토콜을 사용해서 데이터를 요청하고 가져올 수 있는 라이브러리 res 데이터를 활용해서 우리의 view에 표현하게 됨 Promise 활용 axios.post(‘주소’ , { body, }).then(res => { } ); 프로미스 상태로 지원됨(axios.post도 프로미스여서 then을 통해서 서버로부터 데이터를 정상적으로 가져오게 되면 resolve 돼서 res라고 하는 데이터가 우리에게 넘어오게 됨) async-await 활용 const res = await axios.post(‘주소’, { ..

Github 랜딩페이지 클론 코딩 반응형, 동영상 삽입, 수평 예제, 지도api 방법 배움 반응형: 사이즈가 줄 때마다 어떻게 변환되는지 수평이 어떻게 줄바꿈 되는지 모바일에서도 잘 나오게 github 예제 완성본 코드 : https://github.com/HeropCode/Github-Responsive head 태그 구성 1. viewport, IE 랜더링 정보 구성 작성자 외부적으로 보이진 않고 브라우저 내부 상 확인하는 정보 : viewport : 화면 상에 우리가 작성한 레이아웃이 나오는 전체 영역 반응형 웹사이트를 만들기 위해서는 viewport 세팅(meta name="viewport" content =”뷰포트에 세팅할 내용”)해줘야한다. 뷰포트 세팅 content= “” 안에 세팅할 내용 ..