분류 전체보기

[css] 인라인, 블록 요소

인라인 요소의 경우, 블록 요소의 속성 값을 적용할 수 없기 때문에, 인라인 요소를 블록 요소처럼 사용하고 싶은 경우가 존재할 수 있다 참고로 css 선택자에서 .box::before { content : ""; display : block; width : 30px; background-color: royalblue; } 같은 경우에는 ::after, ::before 는 인라인 요소이기에 display 속성 값을 block 으로 준다면 블록 요소처럼 사용할 수 있다 결론, css 에서는 inline 요소와 block 구조에 대한 특징을 잘 알고 있어야 한다 대표적인 inline 요소는 span , a 태그이며 block 의 대표적인 요소는 div 태그를 잊지말자

자식, 하위, 인접 형제, 일반 형제 선택자

크롬브라우저에서 제공하는 기본 여백 제거하기

웹사이트마다 크로스 브라우징으로 인해서, 각기 다른 값들을 ㄱ질 수 있는데, 애플, 구글에서 서로 다른 브라우저 결과 값이 나올 수 있기에, css 에서 브라우저 기본 세팅을 초기화해야함 reset css cdn 을 가져와서 사용하려는 html에 link로 붙여넣어야(절대링크로 하는 방법을 권장) https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 bil..

node 이용한 json 콜백 함수

node.js 는 자바스크립트 자바스크립트코드를 읽어서 처리해 주는 런타임 런타임을 쉽게 말하면 실행기이며 기존 HTML에 종속되어 HTML 없이는 읽을 수 없었던 javascript가 강해질 수 있던 계기도 javascript를 실행해주는 Node가 생긴 이후로 생각할 수 있음(중요) express 설치는 npm install express json 형태의 api를 만들어주는 코드 node b.js 로 서버 실행시켜주기 /aaaa 로 api를 만들어준 것 위와 같은 내용으로, callback 함수를 정의해줄 수 있다 127.0.0.1은 루프백 ip 이다 ㅇ

온도 예측 페이지 만들기(공공 API 활용,json)

open api 활용해서 json 형식의 데이터 받아와서 차트 만들기 json데이터 예시 - hourly 요소의 time 요소 값이 필요함 필요한 open_api 정보를 정의하고 필요한 데이터는 hourly.time임 datasets은 차트 부분을 가리키는 것들로 사용 pointHoverRadius 을 통해 마우스 호버링되면 원이 커지게 됨 chart 를 쓰게 되면, 데이터 포맷팅에 맞춰서 값들을 설정하면 됨 myChart 라는 dom 에 차트를 그림(캔버스에) new Chart로 fetch 요청한 데이터를 가져와서, draw를 통해 차트를 그림 window.onload dom이 로그가 안될때를 대비하여, 스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작되게 ..

json 데이터 vscode로 깔끔하게 보는 방법(feat.정렬)

확장자 : beautify 설치 후 json 파일을 생성해서, f1 키 + beautify file 클릭하면 정렬되지 않았던 텍스트가 다음과 같이 깔끔하게 정렬되는 것을 확인할 수 있음 before after

전기차 배터리 전압강하

안녕하세요 공부하는 웅이입니다. 오늘은 예전에 공부했지만 내용을 복습하는 차원에서 배터리 그리고 배터리에서의 전압 강하에 대해 이야기 해보도록 하겠습니다. 흔히 많이 사용하고 있는 국산셀 2종류인 18650과 21700(지름 21mm·높이 70mm) 에 대해 어떤 배터리 특성차이가 있는지 비교를 한번 해보겠습니다. (*참고로 테슬라는 2022년부터 차세대 배터리로 46800 원통형 배터리를 양산 차량에 넣을 예정이라고 하는데, 배터리의 기술이 나날히 좋아지고 있는 것을 보니, 배터리 산업의 미래가 기대됩니다.) https://www.inews24.com/view/1431221 테슬라, 차세대 원통형 배터리 '46800' 발주물량 확보 경쟁 승자는 [아이뉴스24 오유진 기자] 테슬라가 차세대 원통형 배터리..

[AWS + Filezila] 웹서비스 배포 시현 영상

다른 것보다 시현 영상(사진)과 코드이다 코드 1. app.py 2. index.html app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) # DB from pymongo import MongoClient client = MongoClient('mongodb+srv://test:test@cluster0.wpvuwzi.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta @app.route('/') def home(): return render_template('index.html') @app.route("/homework",..

[웹서비스 배포] AWS EC2 + Filezila 이용하기

스파르타 코딩 웹개발 5주차 마지막 강의 내용을 듣고 작성한 내용이며, 참고 바랍니다. 사용한 것 : AWS EC2(Linux Ubuntu 22.04 LTS Server), Git Bash, Filezila, HTML , CSS , JS, Bootstrap, Ajax 1. 웹서비스란? 웹 서비스 런칭이란 클라이언트 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시키는 것을 의미 언제나 요청에 응하려면 다음 2가지가 충족되어야 함 컴퓨터는 항상 켜져있고, 프로그램이 실행되어 있어야 하고 모두가 접근할 수 있는 공개 주소인 공개 IP 주소 ( Publick IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야함 가비아에서 IP 주소를 신청하여 주소를 하나 만듬 gs-tom.shop 이라는 주..

[Ajax, Flask] 버킷리스트 웹 페이지 만들기

사용 스택 : HTML, CSS, Javascript, bootstrap, Ajax, Flask, MongoDB Post 방식 연습 ( 기록하는 방법) API 를 만들고 사용해보자 버킷리스트 기록 API ( CREATE 은 POST 방식으로) 요청정보는 URL = /bucket 이며 요청방식은 POST 방식으로 클라이언트 (ajax) 에서 서버(flask) 로 보내며 bucket 을 보내려고 한다 templates 안에 있는 index.html 이 프론트엔드 부분이므로 통상 클라이언트로 칭함 bucket은 사용자로부터 인풋 폼에서 받은 버킷리스트 텍스트 데이터이며 기록하기 버튼을 클릭하게 되면 해당 내용을 서버에 보내게 됨 참고로 ajax란 간단히 말하면 페이지 전체를 리프레시 하지 않고서도 수행할 수 ..