ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [1주차 개발일지] 스파르타코딩클럽 웹개발반
      카테고리 없음 2022. 3. 17. 15:20

      *코드 줄 맞추는 단축키: ctrl+a로 전체 선택 후, ctrl+alt+L

       

      [웹의 동작 개념]

      *모든 활동은 크롬에서 이루어진다!

       

      - 네이버 열기

      ‘뉴스홈’에서 오른쪽 마우스 클릭 후 ‘검사’버튼을 누르면 뜨는 창에서 ‘뉴스홈’을 원하는 글자로 바꿨을 때, 내 페이지에서만 페이지의 해당 이름이 변경된다.

      1. 내가 보는 웹 페이지만 바꿀 수 있다.

      2. 내가 보는 페이지는 사실 인터넷과 상관이 없다.

      3. 새로고침하면 원상복귀 된다.

      →왜? 서버로부터 새로 무언가를 받아왔기 때문

      →무언가: HTML, CSS, JS(자바스크립트)

      →HTML: 뼈대, CSS: 꾸미기(폰트 사이즈, 굵기, 색), JS: 움직이는 것

       

      - 웹 동작

      브라우저는 (1)서버한테 요청하고 (2)결과물을 받아서 그려준다.

       

      [HTML, CSS 기본내용]

      *파이참은 파이썬을 쓰기에 쉬운 툴

      HTML은 문서 형태 기반-태그는 외우는 게 아니라 가져다가 쓰는 것

      Head: JS, CSS 등등

      Body: 화면 전체: 내 눈에 보이는 하얀 부분 전부

       

      - 연습1-1

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dan-ing
    </title>
</head>
<body>
My First Page
</body>

</html>

       

      - Body 태그

      Div(division): 구역을 묶는 것

      P(paragraph):  문단

      Bullet point: 앞에 점 모양 생기는 것

      H1: 제목: 페이지마다 하나씩 있는 게 좋음

      H2~h6도 있음

      Span: 특정 부분만 꾸미기

      Hr: 가로선

       

      [QUIZ]

      로그인 페이지 만들기

      - 내가 만든 코드

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p><h3>ID : <input type="text" /></h3> <h3>PW : <input type="text" /></h3></p>
<button>로그인하기</button>
</body>
</html>

       

      [CSS 기초]

      꾸미기를 하려면 꾸밀 대상을 지칭할 수 있어야 한다.

      (ex)

      <head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .mytitle {
            
        }
    </style>

</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>

       

      - 자주 쓰이는 CSS

      1) 이미지 깔 때 트릭: 3줄이 항상 같이 다닌다!

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

       

      2) 여백은 ‘내 바깥으로 여백’과 ‘내 안으로 여백’이 있다.

        (1) 내 안으로 여백: padding

        (2) 내 바깥으로 여백: margin

            응용(padding도 마찬가지)

            ①margin-top: 위쪽으로만 여백 ②margin-left: 왼쪽으로만 여백

            ③ 시계방향으로 생각하고 순서대로 쓰면 됨
               (ex)       위쪽 20 오른쪽 0 아래쪽 0 왼쪽 30
                    = margin: 20px 0px 0px 30px

      3) 로그인 페이지 박스를 화면 중간으로 옮기기

      <div><div/> 로 <body> 내용을 묶은 다음, <div class="wrap">으로 명찰을 달아서 style에 margin적용

      <style>
.wrap {

     width: 300px;
     margin: auto;
 }
</style>

<body>
    <div class="wrap">
     <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 패스워드를 입력해주세요</h5>
     </div>

        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <button class="mybtn">로그인하기</button>
    </div>
</body>

       

      **주의점

      박스 속성과 글 속성은 다르다!

      margin: auto; 라는 치트키를 적용하고 싶다면,
      글 속성은 박스 속성으로 바꿔줘야 한다 → display: block;

      <style>

.mybtn {
     width: 100px;
     margin: auto;
     display: block;
 }
</style>
<body>
    <div class="wrap">
     <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 패스워드를 입력해주세요</h5>
     </div>

        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <button class="mybtn">로그인하기</button>
    </div>
</body>

       

      *class는 중첩이 가능: 명찰 2개 붙이기

      <button class="mybtn red-font">로그인하기</button>

       

      [구글 웹폰트 입히기]

      https://fonts.google.com/?subset=korean

      Link 코드를 복사해서 <title><title/> 아래에 첨부,

      <style><style/> 아래에

      *{
    font-family: 'Jua', sans-serif;
}

      → ‘*’은 모든 것에 적용한다는 의미

       

      [주석 처리]

      주석이란? 사람은 읽지만 컴퓨터는 읽지마! →  내 메모

      주석처리 원하는 부분을 드래그해서 Ctrl+/(슬래시)

       

      [부트스트랩: CSS 예쁘게 꾸미기]

      *부트스트랩 컴포넌트
       https://getbootstrap.com/docs/4.0/components/alerts/

      시작 템플릿을 가지고 시작해야한다!

      필요한 코드를 가지고 와서 쓰되, 쓸모없는 것이 있다면 html을 실행한 홈페이지에서 내가 쓸 컨텐츠에 [오른쪽 마우스-검사]해서 마우스를 움직이면, 내가 뭐가 필요한지 알 수 있다.

      필요한 것만 남기고 필요없는건 지워버려!!

      * CSS 찾을 거(영어로) W3SCHOOL 아니면 CSS 찾을 거(영어로) mdn

       

      [JS(자바스크립트)]

      브라우저가 알아듣는 유일한 언어

      *자바와 자바 스크립트는 전혀 상관 없다.

       

      자바스크립트 문법을 알아야 우리가 원하는 동작을 잘 수행할 수 있다

       

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

      변수: let 으로 선언

      자료형: 리스트 (ex) a_list.push(“smh”) 은 a_list에 smh를 추가해라

      함수
      (ex1) %       는 나머지 구하기-짝홀구하기 등
      (ex2)       부등호, 플러스, 마이너스, 곱하기, 나누기 등
      (ex3)       글씨 분리하기 split-특정 문자를 기준으로 나누기

       

      //함수, 조건문, 반복문

      함수: 부르면 정해진 함수를 하는 것이 프로그래밍의 함수
      (ex1) 2+3=5

      function sum(num1, num2) {
       return num1+num2
}
Let result = sum(2,3)

       

      (ex2) 해당 페이지에 ‘안녕!’이 뜨고 그 다음에 5값이 나옴

      Function mysum(num1, num2) {
    alert('안녕!')
    return num1+num2
}

let result2 = mysum(2,3)

      (ex3) 아무것도 안받을 때

      function mysum() {
    alert('안녕!')
}

mysum()

       

      조건문:

      (1) If, else if, else / if else

      (2) And = &&

      (3) Or = ||

       

      반복문

      (ex1) 0 부터 9까지 반복

      for (let i = 0; i < 10; i++){
    console.log(i)
}

      (ex2) people.length는 리스트의 길이가 나오는 것-이름반복

      For 문을 쓸 때, 리스트의 길이를 모르는 경우 곤란하다.

      let people = ['철수','영희','민수','형준','기남','동희']
for (let i = 0; i < people.length; i++){
    console.log(i)
}

      (ex3)

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

      0번째인 철수 이름과 score 90이 출력

      scores[0][‘score’]

      0번째 사람의 점수를 출력

      for (let i =0; i < scores.length; i++){
    let nam = scores[i]['name']
    let scor = scores[i]['score']
    console.log(nam, scor)
}

      이름, 점수 형태로 출력

       

       

    Designed by Tistory.

    티스토리툴바