New_1주차

5w31892p·2022년 10월 27일

미니캠프

목록 보기

13/17

HTML / CSS

1. 부트스트랩 시작 템플릿

<!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>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

2. CSS 꿀팁

이미지 어둡게 하기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('#');

이미지 넣기 세트

background-image: url('');
background-position: center;
background-size: cover;

배경색 없애기
```
background-color: transparent;
```

display flex로 내용물 정렬 세트

display: flex;
flex-direction: column; // column은 상하, row는 좌우
justify-content: center;
align-items: center;

.class > tag
클래스 안에 해당 태그에 적용
.class > button:hover
버튼에 마우스를 올렸을 때

3. 본격 부트스트랩 써보기

이미지 넣고 개수 조절
row-cols-md-3 → row-cols-md-4 로 바꾸기

4. 포스팅박스 만들기

그림자 효과
```
box-shadow: 0px 0px 3px 0px gray;
```
모바일 효과
화면 폭 500px 전에는 95%로 넘으면 500px으로
```
width: 95%;
max-width: 500px;
```

JavaScript

1. 변수 & 사칙연산

let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1

2. 리스트 & 딕셔너리

리스트

let a_list = ['사과', '배', '수박']
a_list[1] // '배'
a_list.push('감')
a_list // ['사과', '배', '수박', '감']

let b_list = ['철수', '영희']
a_list.push(b_list)
a_list // ['사과', '배', '수박', '감', ['철수', '영희']]
a_list[4] // ['철수', '영희']
a_list[4][1] // '영희'

딕셔너리

let a_dict = {'name':'bob', 'age':20}

a_dict['age'] // 20
a_dict['height'] = 180
a_dict // {'name':'bob', 'age':20, 'height':180}

특정 문자로 문자열 나누기

let email = 'starta@naver.com'

email.split('@') // ['starta', 'naver.com']
email.split('@')[1].split('.') // ['naver', 'com']
email.split('@')[1].split('.')[0] // naver

함수

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
    console.log('숫자', num1, num2);
    return num1 + num2;
}

sum(3, 5); // 8
sum(4, -1); // 3

조건문

function is_adult(age){
    if(age > 20){
        alert('성인이에요')
    } else {
        alert('청소년이에요')
    }
}

is_adult(25)

반복문

let scores = [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]

for (let i = 0 ; i < scores.length ; i++) {
  if (scores[i]['score'] > 70) {
    console.log(scores[i]['name']);
  }
}
// 철수, 영희

3. JavaScript 연습

let mise_list = [....]

for (let i = 0; i < mise_list.length; i++) {
  let list = mise_list[i]
  if (list['IDEX_MVL'] < 40) {
    let name = list['MSRSTE_NM']
    let mise = list['IDEX_MVL']
    console.log(name,mise)
  }
}

or

for (let i = 0; mise_list.length; i++) {
  if (mise_list[i]['IDEX_MVL'] < 40) {
    console.log(mise_list[i]['MSRSTE_NM'])
  }
}