본문 바로가기
STUDY/다스리는 개발병아리🐥

2022_09_01

by 스리스리12345 2022. 9. 1.

➡to-do list

  1. 스파르타 웹종반 5주차 줴에에에ㅔ발 끝내기,,!,,✅
  2. 5주차 끝낸다면,,1-3주차 복습!

스파르타 웹종반 1주차

HTML : 뼈대
CSS : 꾸미기
자바스크립트 : 움직이는 것
브라우저 : 받아와서 보여주는 것

<div> 구역 나눔
<p> 문단
bullet point
<h1>- 문서 제목,페이지마다 h1 넣는것이 좋다
<h2~6> 글씨가 작아진다
<span>-특정글자만 꾸밀때
<a>하이퍼링크
<img> 이미지태그
<input>box
<button>
<textarea>

CSS : 꾸미기
 👉 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 

mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!

 👉 배경관련 background-color /

background-image / background-size /background-position->어딘가에 background 넣을거다

저 세줄 항상 같이!!

사이즈 width / height

폰트 font-size / font-weight / font-family / color

간격 margin / padding

(margin 바깥여백
padding 안쪽여백)

 

❓박스내 내용물(글자) 중간정렬❓

display:flex;

flex-direction:column or row;

justify-content:center;

align-items:center;

항상 네줄!같이!

 

❓만든 화면을 중간으로 하고싶다❓

ex.<div class ="wrap"> ->묶는 과정

</div> 안에 진행했던 div들을 넣고

<style> 안에 .wrap{}내에 width: px숫자조정 ; / margin:auto;

 margin auto;는 상하좌우 최대로 다 민다는 뜻!

 

 

✅구글 웹폰트 입히기(https://fonts.google.com/?subset=korean)

마음에 드는 폰트 들어가 

select this style- 세번째link 복 <head-title>밑 붙

이어서 select this style 창 font-family 복 <style> 밑에 *{}내에! 붙

❓ *은 모든 태그에 먹이겠다!라는 뜻

주석 : ctrl+/❓

 

✅부트스트랩 컴포넌트 (https://getbootstrap.com/docs/5.0/components/buttons/)

 

✅이미지 어둡게 하기-이미지 url 앞 붙(linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)))

 

✅이모티콘 모음( https://kr.piliapp.com/facebook-symbols/ )

 

✅모바일 처리

👉 모바일에서는 "가로 사이즈"가 가장 문제😎

어디서나 500px 로 맞춰라 (width: 500px)

대신에, 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면?

width: 95%; max-width: 500px;

 

 

자바스크립트 : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.

 

변수, 자료형, 함수,조건문, 반복문

 

자료복사본

 

  • 변수 & 기본연산
    • 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
    • let으로 변수를 선언합니다.
    • let num = 20
      num = 'Bob'

      // 변수는 값을 저장하는 박스예요.
      // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
    • 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
    • 다른 특수문자 또는 띄워쓰기는 불가능합니다!
    •  '나눗셈의나머지'를 구하고 싶은 경우

      let a = 20
      let b = 7

      a % b = 6
    • 또, 특정 문자로 문자열을 나누고 싶은 경우

      let myemail = 'sparta@gmail.com'

      let result = myemail.split('@') // ['sparta','gmail.com']

      result[0] // sparta
      result[1] // gmail.com

      let result2 = result[1].split('.') // ['gmail','com']

      result2[0] // gmail -> 우리가 알고 싶었던 것!
      result2[1] // com

      myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
  • 리스트 & 딕셔너리
    • 리스트: 순서를 지켜서 가지고 있는 형태입니다.
    • let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

      // 또는,

      let b_list = [1,2,'hey',3] // 로 선언 가능

      b_list[1] // 2 를 출력
      b_list[2] // 'hey'를 출력

      // 리스트에 요소 넣기
      b_list.push('헤이')
      b_list // [1, 2, "hey", 3, "헤이"] 를 출력

      // 리스트의 길이 구하기
      b_list.length // 5를 출력
    •  
    • 딕셔너리: 키(key)-밸류(value) 값의 묶음
    • llet a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

      // 또는,

      let b_dict = {'name':'Bob','age':21} // 로 선언 가능
      b_dict['name'] // 'Bob'을 출력
      b_dict['age'] // 21을 출력

      b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
      b_dict // {name: "Bob", age: 21, height: 180}을 출력
    •  
    • 리스트와 딕셔너리의 조합
    • names = [{'name':'bob','age':20},{'name':'carry','age':38}]

      // names[0]['name']의 값은? 'bob'
      // names[1]['name']의 값은? 'carry'

      new_name = {'name':'john','age':7}
      names.push(new_name)

      // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
      // names[2]['name']의 값은? 'john'
    • 함수
    • // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
      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)
    • function is_adult(age){
      if(age > 20){
      alert('성인이에요')
      } else if (age > 10) {
      alert('청소년이에요')
      } else {
      alert('10살 이하!')
      }
      }

      is_adult(12)
    •  
    • 반복문
    • for (let i = 0; i < 100; i++) {
      console.log(i);
      }
    • for (1. 시작조건; 2. 반복조건; 3. 더하기) {
      4. 매번실행
      }

      1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
      -> 2체크하고 -> (괜찮으면) -> 4 -> 3
      -> 2체크하고 -> (괜찮으면) -> 4 -> 3
      -> 2체크하고 -> (괜찮으면) -> 4 -> 3

      와 같은 순서로 실행됩니다.
      i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
  • 연습

function show_gus(index) {
  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < index) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
    console.log(gu_name, gu_mise);
    }
  }
}

// 이러면 아래와 같은 것이 가능!
show_gus(40) // 40보다 작은 구만 출력!
show_gus(35) // 35보다 작은 구만 출력!

 

 

스파르타 웹개발종합반 - 1주차 

Copyright ⓒ TeamSparta All rights reserved.

 
 
 

 

1주차 정리 끗!

'STUDY > 다스리는 개발병아리🐥' 카테고리의 다른 글

이클립스에서 html열기  (0) 2022.11.19
2022_09_13 :버튼을 누르면 div내용 보였다가 안보였다가!  (0) 2022.09.13
2022_09_08  (0) 2022.09.08
2022_08_31  (0) 2022.08.31
2022_08_30  (0) 2022.08.30

관련글

티스토리툴바