WEB (6) 썸네일형 리스트형 자바스크립트 파일 preview const imgInput = document.querySelector("#img-select"); const imgPreview = document.querySelector(".preview"); imgInput.addEventListener("change", function () { const file = this.files[0]; if (!file) return; const reader = new FileReader(); //2. 이미지 다운로드가 끝난 후 실행 reader.addEventListener("load", function () { //imgPreview의 주소에 불러온 file의 url을 넣음 imgPreview.src = this.result; }); //1. 먼저 url로 변환 re.. flexbox LandingPage https://youtu.be/-drcStMYOcM 이 영상을 따라 만들었다. 분석 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: poppins; } ul,nav{ list-style: none; } a{ text-decoration: none; cursor: pointer; color: inherit; } 초기화 css 헤더 Saffron Home About Services Contact header{ position: absolute; top: 0; left: 0; z-index: 10; width: 100%; display: flex; justify-content: space-between; align-items: .. float 레이아웃 예시1 유튜브 링크 IE가 망하고 나서 Flex와 grid를 가지고 레이아웃 짜는 것이 정석이 됐지만 어느정도 float로 짜는 법을 알고는 있어야 한다고 생각한다. 처음구조 Navigation Header Section1 Section2 Footer 처음 구조는 매우 간단한다. Container 세팅 body{ margin: 0; background-color: #dddddd; font-family: sans-serif; } *{ box-sizing: border-box; } .container{ max-width: 1140px; background-color: #ffffff; height: auto; margin: 40px auto; padding: 20px; } h1{ font-size: 30px; mar.. 생활코딩) Parallax 생활코딩parallax Parallax(시차를 이용한 효과) - 겁나 빠른 웹 레시피 수업소개 parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, opentutorials.org HTML Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipisci fugiat deserunt Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti adipi.. 간단한 CardBox HTML 코드 Fly in the Sky MORE? bg클래스를 가지는 div는 배경 투명도를 조절해주는 역할을 해준다. CSS 코드 body { background-color: #e9ecef; } .cardbox { width: 500px; height: 800px; margin: 0 auto; margin-top: 50px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04); position: relative; } .card_comment { width: 100%; height: 200px; position: absolute; bottom: 0; background-color: #f8f9fa; } .more_btn { font-size: 16px; color: #e9ecef;.. NODEJS 복습[생활코딩 WEB2-Node.js] 노드에서 url을 가져오고 파싱을 하는 방법 const http = require('http'); const fs = require('fs'); const url = require('url'); const app = http.createServer((req, res) => { //req 객체의 url 문자열을 가져오고 이를 파싱해서 객체로 사용 let _url = req.url; let queryData = url.parse(_url, true).query; let pathName = url.parse(_url, true).pathname; }); app.listen(3000); [parseQueryString] - true : url 객체의 query 속성을 객체 형식으로 가져옵니다. - false :.. 이전 1 다음
