스파르타코딩클럽 웹프로그래밍 공부 시작 1주차 개발일지 기록
PyCharm 단축키
자동정렬 : Ctrl + Alt + L
반대로 들여놓기 : Shift + Tab
주석화 하기 : Ctrl + /
구글 웹폰트 가져오기
- https://fonts.google.com/?subset=korean
- 폰트선택후 맘에 드는 옵션폰트 우칙에 Select Regular~~ 플러스 눌러주기
- 오른쪽 위 박스들모양 아이콘 클릭
- 원하는 폰트 잘 선택되어 있나 확인
- Use on the Web 의 박스 내 link태그중 3번째 것만 복사해서 head안의 title 밑에 붙여넣어주기
실습에 주석으로 설명달기
<!--부트스트랩 기본 템플릿 시작-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!--부트스트랩 기본 템플릿 끝-->
<title>새사이트기본시작</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet"> <!--구글폰트 설정 (1/1)-->
<link rel="stylesheet" type="text/css" href = "씨에스에스명.css"> <!--CSS를 다른 파일저장한 후 불러와서 적용가능-->
<!-- .css파일은 <style></style>태그는 쓸 필요없이 내용만 넣으면 됨-->
<style>
* {
font-family: 'Gowun Dodum', sans-serif; /*구글폰트 적용 (1/2)*/
}
.title001 { /*가로 무제한으로 디자인된 타이틀 부분*/
background-color: red; /*범위확인용*/
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
/*그래디언트 (방향,첫색상,끝색상) 4번째는 밝기 0~1사이값*/
/*끝 속성을 2개 같이 하면 단순 이미지 밝기 어둡게 하기 기능*/
background-size: cover;
background-position: center; /* 이것 포함 위 배경태그 3개는 세트라고 보면 됨*/
color: white; /*폰트색*/
display: flex; /* 모듈 중앙정렬 문법시작 */
flex-direction: column; /*column은 세로로 나열 row는 가로로 나열*/
justify-content: center;
align-items: center; /* 모듈 중앙정렬 문법끝 */
}
.wrap { /*무제한 디자인아닌 한정된 전체 부분 내용 공통*/
background-color: yellow; /*범위확인용*/
max-width: 1200px;
width: 95%; /*그냥 width=1200하지말고 플랫폼 환경생각해서 이렇게 처리 외우자!*/
margin: auto; /* 중앙배치 공식 (width까지 꼭 주어야함) */
margin: 20px auto 0; /*margin은 값쓸때 1개는 전체, 2개는 상하/좌우, 3개는 위/좌우/아래, 4개는 위/우/아래/좌*/
/*값 사이에 쉼표를 스면 안됨*/
text-align: center;
}
.box001 { /*박스*/
background-color: green; /*범위확인용*/
max-width: 500px;
width: 95%;
margin: auto; /* 중앙배치 공식 (width까지 꼭 주어야함) */
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray; /*박스에 쉐도우 주는 방법*/
border-radius: 50px; /*박스모서리 곡선처리*/
text-align: center;
}
</style>
</head>
<body>
<div class=title001>
<h1>타이틀</h1>
</div>
<div class=box001>
<h3>박스</h3>
</div>
<div class=wrap>
<h3>wrap컨텐츠</h3>
</div>
</body>
</html>
자바스크립트 기초공부
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자바스크립트 기초 연습</title>
<script> // JS 설정 시작
function test1() { // 함수 test1을 정의
alert(a + b + '명의 ' + c); // ()안 내용를 표시하는 알림창 띄우기
alert(a % b); // 나머지 구하기
}
let a = 20 // 변수 설정
b = 6
c = 'Kim' // 한번 let 선언했으면 반복해서 안해도됨
function test2() {
alert(a_list);
alert(a_list[6]); // [6]은 배열함수의 7번째값
// 총 7개 값이긴 하지만 b_list는 배열그대로 들어가서 5번째값이 3개값가지는 배열그자체로 들어감 (총5개값) => 에러남
alert(a_list.length); // 배열값 수
alert(a_list[4][2]); // 5번째값의 3번째값
}
let a_list = ['수박', '참외', '배'] // 리스트형 변수
a_list.push('감') // 배열함수에 값 추가
let b_list = ['서울', '부산', '광주']
a_list.push(b_list)
function test3() {
alert(a_dict['height']);
alert(custmer_data[3]['name']);
}
let a_dict = {'name':'bob','age':27} // 딕셔너리형 변수
a_dict['height'] = 180 // 딕셔너리형 변수에 행추가
let custmer_data = [{'name':'kim','age':18} ,{'name':'lee','age':35} ,{'name':'park','age':22} ] // 리스트+딕셔너리
custmer_data.push(a_dict)
function test4() {
alert(myemail_id);
alert(myemail_name);
}
let myemail = 'kim111@gmail.com'
let myemail_id = myemail.split('@') // ()내의 문자를 기준으로 앞뒤 값을 나눠 배열변수로 만들기
let myemail_name = myemail.split('@')[1].split('.')[0]
function test5(x,y) { // 함수()안에 변수명을 넣어도 됨 (나중에 ()안에 직접 값을 입력해서 작동)
console.log('테스트5작동함') // 함수작동 되면 크롬 개발자모드의 console창에 로그남김
return x+y // return은 다음값으로 바뀜을 뜻함(return을 안쓰면 표시만되고 값으로 안바껴있음), 함수를 종료시키는 기능도 있음
}
let result = test5(2,3) // 함수작동됨 + return으로 5로 바뀐 값 적용
console.log(result) // 페이지 열자마자 실행 => 콘솔로그에 test(2,3)값 표시 + test(2,3)함수실행
function test6(age) {
if (age > 20) { // 조건문
alert('성인입니다')
}
else if (age > 10) {
alert('청소년입니다')
}
else {
alert('10세미만')
}
}
function test7() {
for (let i = 0; i < chips.length; i++) { // 반복문 (속성: 시작값;반복가능조건;더하기)
alert(chips[i])
}
}
let chips = ['새우깡','죠리퐁','칸쵸','빼빼로']
function test8(cutline) {
for (let i = 0; i < scores.length; i++) { // 반복문 배열변수 응용 예제
if (scores[i]['score'] < cutline) {
let low_name = scores[i]['name']
let low_score = scores[i]['score']
console.log(cutline + '점보다 낮은 사람은 ' + low_name + '이고 점수는 ' + low_score + '점 입니다.')
alert(cutline + '점보다 낮은 사람은 ' + low_name + '이고 점수는 ' + low_score + '점 입니다.')
}
}
}
let scores = [
{
'name': '철수',
'score': 90,
},
{
'name': '영희',
'score': 85,
},
{
'name': '민수',
'score': 70,
},
{
'name': '형준',
'score': 50,
},
{
'name': '기남',
'score': 68,
},
{
'name': '동희',
'score': 30,
},
]
</script> <!--JS 설정 끝-->
</head>
<body>
<div>
<button onclick="test1()">1.변수</button> <!--클릭할 때 JS 작동 : onclick-->
<button onclick="test2()">2.리스트형변수</button>
<button onclick="test3()">3.딕셔너리형변수</button>
<button onclick="test4()">4.값나누기</button>
<button onclick="test6(20)">6.조건문</button>
<button onclick="test7()">7.반복문</button>
<button onclick="test8(75)">8.반복문2</button>
</div>
</body>
</html>
'개발일지' 카테고리의 다른 글
| 웹프로그래밍 - 파이썬 API다루기, 크롤링, DB처리 3주차 정리 (0) | 2022.12.19 |
|---|---|
| 파이썬 데이터분석 3주차 정리 (OpenDart의 API다루기) (0) | 2022.12.18 |
| 웹프로그래밍 - jQuer, Ajax 기초 2주차 정리 (0) | 2022.12.17 |
| 파이썬 데이터분석 2주차 정리 (0) | 2022.12.14 |
| 파이썬 기초 1주차 정리 (0) | 2022.12.13 |
