코딩 교육 WIL

2024 1월 3주차 AI 코딩 WIL

HyunjunPark 2024. 2. 16. 20:24

한 주간 기본적인 코딩 프로그래밍인 html과 css javascript를 이용한 웹페이지 만들기와 mysql를 이용한 데이터 베이스 관리 및 데이터 이용방법에 대해서 배웠다.

기본적인 프로그래밍을 이용해서 내가 원하는 정보를 찾아낼 수 있으며 내가 원하는 것을 직접 만들어 보는 것이 아주 시간이 가는지 모르게 배웠으며 내가 해보고 싶었던 하는데서 오는 만족감이 아주 좋았습니다.

​

VScode 를 이용한 html 작성에 내가 배웠던 용어들을 정리하여 보자

​

일반적인 구조로

​

< 유용한 사이트 들 >

부트스크랩을 이용하면 좀 더 편리하게 내가 원하는 것들을 가져와서 이용할 수 있다.

부트 스트랩을 이용하여 좀더 편리하게 내가 원하는 ui를 가져와서 바로 사용할 수 있는 것이 좋으므로 사이트에서 내가 찾아서 하는 방법을 잘 이용해야 한다.

​

그리고 일반적으로 우리가 사용하는 사이트의 html이 어떻게 작성이 되었는지 알아보기 위해서는 f12를 누르거나 마우스 오른쪽 버튼을 눌러 검사를 클릭하여 개발자 모드로 들어가 원하는 부분의 마우스를 가져가 어떻게 작성이 되었는지 알 수 있으므로 내가 보고 있는 html이 어떻게 작성이 되었는지 쉽게 알 수 있는 부분이다.

​

원하는 폰트를 가져와서 글씨에 적용을 할 수있는 사이트

​

ex ) 사용 방법

<style> //style 안에서 사용한다. /* 폰트 주소를 가져오는 법 use on the web 탭부분에서 @import 클릭하고 복사 붙여넣기 */ @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Myeongjo&display=swap'); /* '*'를 넣어주어서 폰트를 전체 글자에 적용을 해준다고 설정하고 내가 원하는 폰트의 명을 사이트에 들어가서 CSS rules to specify families 부분을 복사 붙여넣기 */ * { font-family: 'Black Han Sans', sans-serif; font-family: 'Nanum Myeongjo', serif; } </style>

온라인에서 내가 만든 html를 인터넷으로 다같이 볼 수 있게 데이터를 넣어 둘 수 있는 사이트

​

ex ) 사용 방법

​

<script> //스크립트 안에서 사용 // Firebase SDK 라이브러리 가져오기 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js"; import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js"; import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js"; import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js"; // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyB5n_hMqin6Xo18sFGPLoZjisTeXB--n7c", authDomain: "sparta-5038b.firebaseapp.com", projectId: "sparta-5038b", storageBucket: "sparta-5038b.appspot.com", messagingSenderId: "850352148592", appId: "1:850352148592:web:331dcc9f996390276e24b5", measurementId: "G-T26V07V1D4" }; // Firebase 인스턴스 초기화 const app = initializeApp(firebaseConfig); const db = getFirestore(app); </script>

■ 코딩시 단축 시 사용방법 및 기능 설명

이곳에서 단축기를 알 수 있습니다.

처음으로 배웠던 html에서의 용어로

​

let : 변수 선언 같이 무엇인가를 정의할 때 사용.

​

console : html 화면상에는 보이지 않지만 개발자 모드에 들어갔을때 개발자들끼리 정보를 적어두는 용도로 사용하는

​

리스트 : let a = ['사과','배','수박'] 같이 하나의 변수에 여러 가지 데이터를 가져올 때 사용하는 방법이며

꺼내는 법은 console.log(a[0])으로 0번부터 원하는 위치에 꺼내 쓸 수 있다.

​

딕션너리 : let a = ['이름' : '밥' , '나이' : '30' ,'키' : '180']

위와 같이 각 변수에 특정 값을 저장을 해주는 방법으로 꺼내는 법은

console.log(a['이름'])를 입력하면 '밥'이라는 글자가 나온다.

​

​

<!-- 구역을 나누는 태그들 -->

<div> : 구역 <p> : 문단 <ul> : 범위??? <li> : 줄 단위? <!-- 구역 내 콘텐츠 태그들 --> <h1> : 제목 <h2> : 소제목 <h3~6> : 숫자가 커질수록 글자가 작아진다. <hr> : 줄띄움 <span style="color:red">글자</span> : 특정 글자 꾸밈 또는 지정 설정 <a href="http://naver.com/"> 하이퍼링크 </a> : 태그 설정 img 태그입니다: <img src="https://.png" /> input 태그입니다: <input type="text" /> button 태그입니다: <button> 버튼입니다</button> textarea 태그입니다: <textarea>글박</textarea>

​

■ 스타일안에서 사용 - 스타일 변경

 

height: 250px; /* 공간의 높이를 설정하는 명령어 */ color: white; /* 글자의 색을 변경하는 주는 명령어 */ display: flex; /* 글자의 위치를 원하는 대로 변경을 할 수 있게 해주는 명령어 */ flex-direction: column; /* 구성을 (세로 = 열 = verical) 로 정렬을 한다는 뜻 -> row는 ( 가로 = 행 = horizontal )으로 정렬*/ align-items: center; /* 세로의 위치를 어디에 정렬을 시킬 것인가를 정하는 명령어 사용 가능 한 설정으로는 [stretch, center, flex-start, flex-end, baseline, initial, inherit]가 있다. */ justify-content: center; /* 가로의 위치를 어디에 정렬을 시킬 것인가를 정하는 명령어 사용 가능 한 설정으로는 [stretch, center, flex-start, flex-end, baseline, initial, inherit]가 있다. */ /* 배경이미지를 붙여주는 명령어 */ background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-position: center; background-size: cover; }

​

​

■ 스타일안에서 사용 - /* 버튼, 사진, 그림 크기를 변경해 주는 명령어 모음 */

​

.

mytitle>button { /* 넓이 설정 */ width: 150px; /* 높이 설정 */ height: 50px; /* 배경화면의 색을 변경해주는 명령어 - transparent은 뒤에 배경을 투과시킨다는 의미 */ background-color: transparent; /* 글자색 변경 */ color: white; /* 배경에 그림자? 두께를 설정해주는 것 */ border: 1px solid white; /* 모서리의 끝을 둥글게 깍아주는 것 */ border-radius: 5px; /* 마진으로 내가 넣은 그림 또는 이미지의 크기 위로 그림을 얼마나 띄울껀지 설정하는 것 */ margin-top: 20px; /* 마진와 패딩의 명령어 */ /* 마진으로 공간 밖의 크기를 설정할 수 있으며 순서대로 "위", "오른쪽," "아래", "왼쪽"으로 공간의 크기를 설정해줄 수 있으며 auto는 자동으로 최대까지 입력이 되어진다.*/ margin: 30px auto 0px auto; /* 패딩으로 공간 안의 크기를 설정할 수 있으며 순서대로 "위", "오른쪽," "아래", "왼쪽"으로 공간의 크기를 설정해줄 수 있으며 auto는 자동으로 최대까지 입력이 되어진다.*/ padding: 20px; /* 그림의 그림자를 설정해줄 수 있으며 그림자의 길이는 "위", "오른쪽," "아래", "왼쪽" 순으로 설정을 하며 마지막은 그림자의 색을 설정해 줄수 있다.*/ box-shadow: 0px 0px 3px 0px blue;

​

​

■ 데이터 베이스에 받아오고 받아온 데이터로 html안에서 적어주는 코딩

$("#postingbtn").click(async function () { /* $('#image').val() 이걸로 내가 지정한 id의 값을 가져올수 있다 */ let image = $('#image').val(); let title = $('#title').val(); let content = $('#content').val(); let date = $('#date').val(); let doc = { 'image': image, 'title': title, 'content': content, 'date': date, }; /* 입력 값 서버에 저장 */ await addDoc(collection(db, "albums"), doc); /* 알림창 뜨게 */ alert('저장 완료!'); /* 새로고침 시켜주는거 */ window.location.reload(); }) $("#savebtn").click(async function () { $('#postingbox').toggle(); }) let url = "http://spartacodingclub.shop/sparta_api/seoulair"; fetch(url).then(res => res.json()).then(data => { /* api에서 데이터 받아오기 */ let mist = data['RealtimeCityAir']['row'][0]['IDEX_NM'] /* 받아온 데이터 텍스트 기입 */ $('#msg').text(mist); }) let docs = await getDocs(collection(db, "albums")); /* 반복문 'doc' */ docs.forEach((doc) => { /* doc'의 서버값 받아서 그걸 'row'에 저장*/ let row = doc.data(); let image = row['image']; let title = row['title']; let content = row['content']; let date = row['date']; /* 카드 만들어서 추가시키는 것 바디에서 적었던 내용을 ``여기안에 똑같이 적어준다고 보면 된다 `는 1번 왼쪽에 있는 버튼이다. */ let temp_html = ` <div class="col"> <div class="card h-100"> <img src="${image}" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">${title}</h5> <p class="card-text">${content}</p> </div> <div class="card-footer"> <small class="text-body-secondary">${date}</small> </div> </div> </div>`; $('#card').append(temp_html); });

​

​

■ 앨범 카드를 만들어주는 코딩

<!-- 클레스 설정 --> <div class="mytitle"> <h1>나만의 추억앨범</h1> <p>현재 서울의 미세먼지 : <!-- 일정 구간만 id 설정 --><span id="msg">나쁨</span></p> <button id="savebtn">추억 저장하기</button> </div> <div class="mypostingbox" id="postingbox"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="image" placeholder="앨범 이미지"> <label for="floatingInput">앨범 이미지</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" id="title" placeholder="앨범 제목"> <label for="floatingInput">앨범 제목</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" id="content" placeholder="앨범 내용"> <label for="floatingInput">앨범 내용</label> </div> <div class="form-floating mb-3"> <input type="email" class="form-control" id="date" placeholder="앨범 날짜"> <label for="floatingInput">앨범 날짜</label> </div> <div class="mybtn"> <button id="postingbtn" type="button" class="btn btn-primary">기록하기</button> <button type="button" class="btn btn-outline-primary">닫기</button> </div> </div> <div class="mycards"> <!-- row row-cols-1 row-cols-md-4 g-4 여기서 "md-4" 여기에 적힌 숫자를 변경해주면 한줄에 몇게에 카드를 넣을지 설정 가능 --> <div id="card" class="row row-cols-1 row-cols-md-4 g-4"> </div> </div>

■ < 스타일 링크 만들기

​

style.css 를 따로 만들고 그 안에 내가 만들었던 스타일을 코딩을 넣어줄 수 있다.

​

이걸로 내가 만든 사이트 입니다.