한 주간 기본적인 코딩 프로그래밍인 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>
■ < 스타일 링크 만들기
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
style.css 를 따로 만들고 그 안에 내가 만들었던 스타일을 코딩을 넣어줄 수 있다.
이걸로 내가 만든 사이트 입니다.
'AI 코딩 교육 WIL' 카테고리의 다른 글
| 2024 3월 2주차 WIL (0) | 2024.03.09 |
|---|---|
| 2024 3월 1주차 WIL (0) | 2024.03.03 |
| 2024 2월 4주차 WIL (1) | 2024.02.24 |
| 2024년 2월 2주차 AI 코딩 WIL (0) | 2024.02.16 |
| 2024 2월 3주차 AI 코딩 WIL (0) | 2024.02.16 |
