CSS Layout 방식은? 코드 용량 절감 사람이나 컴퓨터가 이해하기 쉬운 구조 쉬운 유지보수 반응형 웹 브라우저의 가로 크기에 따라 각기 다른 CSS 스타일을 적용 되는 웹페이지 단점은 복잡한 컨텐츠와는 맞지 않을 수도 있으며, 모든 해상도 대응을 위한 CSS / 이미지를 모두 불러와야하므로, 로딩 시간이 길어짐 따로 분리하는 것도 좋은 방법 ex) www.naver.com 과 www.m.naver.com 처럼 기술이 중요한 것이 아닌 유지보수 하기 좋고, 사용자가 이용하기 좋도록 사용자는 반응형 / 적응형 웹이든 모바일 / 데스크 탑 기기에서의 사용만 편리하면 OK CSS Framework 초기 구성의 용이함 기본적인 CSS 스타일을 이미 구성 이미 일정 수준의 작업이 되어있기에, 원하는 레이아웃으..

웹 프론트엔드를 위한 3가지 언어 HTML : 웹페이지의 내용 및 구조 CSS : 웹페이지의 스타일 JavaScript : 웹페이지의 로직 #위 세 언어는 모든 웹브라우저에서 거의 유사하게 동작함. CSS / JS 파일을 별도 파일로 분리하는 이유 HTML 응답 body 크기를 줄일 수 있다. 여러번 새로고침하더라도, 브라우저 캐싱기능을 통해 같은 파일을 서버로부터 다시 읽어들이지 않는다 웹페이지의 응답성을 높여줄 수 있다. CSS 소스코드 처음에는 직접 CSS 날코딩을 하는게 좋음 추후에는 성향에 따라 Sass, Less 사용을 검토해봄 #sass, lass 문법으로 작성된 코드를 빌드하여, css 파일을 만들어냄 JavaScript 처음에는 직접 JavaScript 날코딩을 하는게 좋음 추후에는 성향..

출처 : https://youtu.be/5ETqQWvwXV4 참고 자료 : https://unikys.tistory.com/371 [Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system) * 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로 unikys.tistory.com 무료 템플릿 자료 : https://tonhnegod.tistory.com/102 무료 반응형웹 템플릿 사이트 모음 이번 포스팅에서는 무료 반응형웹 템플릿 사이트들을 소개해 드리겠습니다. 직접 사이트들을 찾아보니, 트렌드에 심하게 뒤처지는 것들만 ..

출처 : https://nomadcoders.co/ Setup 핵심 : To do list를 위해 기본 환경을 세팅한다. 0. todo.js를 만들어주고, html에 import해준다. 1. 사용자가 todo를 입력하는 것을 입력받을 form이 필요하다. 2. todo-list라는 id를 가진 ul을 만들어준다. 3. form과 ul을 HTML에서 JS로 가져온다. const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); 4. greeting의 form에서 했던 것을 똑같이 반복해줌 (submit시 브라우저의 기본 동작인 새로고침이 되는 issue) function ..

출처 : https://nomadcoders.co/ Quotes 핵심 : Random 배경화면과 Random 명언을 화면에 표시하는 법을 배운다. 0. quotes.js를 만들어주고 HTML과 연결을 시켜준다. . Random 명언을 화면에 표시하기 1. frontend에서 HTML을 생성한다. 2. quotes.js에서 div랑 span들을 가져온다. // HTML의 quote 아이디를 가진 span의 첫번째와 마지막 자식을 호출 const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); 2-1. array에 element들을 입력..

https://youtu.be/jWh3IbgMUPI . 웹사이트를 만들때 가장 중요한 것은? 우리가 만든 박스들을 원하는 위치와 사이즈로 배치하는 것이 가장 중요함 배치 할 수 있도록 만드는게 display와 position임 . display div는 대표적인 Block-level, span은 대표적인 inline-level임 block은 한 줄에 하나씩 들어가는 상자 inline이라는 것은 컨텐츠의 크기만을 기준으로 꾸며주는 것 inline-block은 block같이 상자의 크기로 변환되어서 안의 컨텐츠의 크기와는 상관없이 표시 됌, 한 줄에 여러개 가능 Block-level은 기본적으로 한 줄에 하나씩 출력 inline-level은 기본적으로 공간이 많으면 여러개 출력 가능함 . Position p..