[스.코] 웹개발 종합반 1주차

Jessie H·2021년 11월 29일
개발일지마코의코딩공부스파르타코딩클럽웹개발종합반취미코딩공부
1

스파르타코딩클럽 웹개발종합반

목록 보기
1/13

이 글은 강의를 듣고 공부한 내용을 정리하기 위해 작성한 글입니다.
(스파르타코딩클럽 웹개발 종합반 1주차)

스파르타코딩클럽 서포터즈 르탄즈 1차 미션에서 우수활동자로 선정되어 정규 강의 하나를 받을 수 있게 되었다. 코딩을 하나도 모르는 나는 코딩 입문자용 강의인 웹개발 종합반을 선택했다.
앞으로 8주 동안 열심히 복습해서 꼭 남자친구랑 재미삼아 만들고 있는 홈페이지를 맛깔나게 꾸며보고 싶다!!

이번주에 배운 내용

  • 웹동작 원리, HTML, CSS 기본 내용
  • CSS 기초 & 자주 쓰이는 CSS
  • 폰트, 주석처리, 파일분리
  • 로그인 페이지 만들기
  • 부트스트랩
  • 포스팅박스 완성
  • Javascript HTML에 연결하기
  • Javascript 기초
    - 변수 & 기본연산
    - 리스트 & 딕셔너리
    - 기본함수
    - function
    - 조건문
    - 반복문

🚩 웹동작 원리, HTML, CSS 기본 내용

웹동작 원리

  • 브라우저는 요청을 보내고 서버에서 준비해둔 것을 받아서 그려주는 것!
  • 서버는 API라는 창구에서 미리 정한 내용을 보내줌

HTML, CSS

HTML은 뼈대, CSS는 꾸미기
HTML: 구역, 텍스트 나타내는 코드

  • head(페이지의 속성 정보), body(홈페이지 내용)로 구성
  • meta, script, link, title 등
    CSS: 잡은 구역을 꾸며주는 것

meta가 계속 어떤 의미인지 너무 검색해서 검색하다가 너무 잘 정리해놓은 글을 발견!
meta태그 정리

script: 쉽게 말하면 javascript를 HTML에 연결할 때 필요한 코드
script 관련 좋은 글
script태그 위치 비교

코드정렬 단축키
tab: 들여쓰기
shift + tab: 빼기
ctrl + Alt + L : 자동정렬 기능(여러 줄 한꺼번에 정렬할 때 편함)

🚩 CSS 기초 & 자주 쓰이는 CSS

CSS 쓰는 법

<head></head>
<style></style>
안에 공간을 만들어 작성한다

자주 쓰이는 CSS

배경
background-color
background-image
background-size

사이즈
width
height

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

간격
margin
padding

CSS flex box 관련 좋은 글
링크텍스트

🚩 폰트, 주석처리, CSS 파일분리

폰트, 주석처리, CSS 파일분리

구글폰트 적용하기

① 마음에 드는 폰트를 골라 Select this style를 하여 추가한 후 View your selected families 누르기

② 노란색 표시된 부분 복사하기

③ head부분에 복사한 걸 넣고 css rules to specify families의 코드를 복사하여 style에 입력한다(일부분에만 할 경우 따로 클래스 지정하고 '.클래스'에 이 코드를 삽입)

구글 폰트 적용한 코드

눈누 폰트 적용하기

① 원하는 폰트를 고르고 '웹폰트로 사용'부분의 코드를 복사하여 style부분에 입력

② 원하는 부분에 font-family 부분 입력

눈누 폰트 적용한 코드 (class=wannago)

주석 다는 법

주석은 언제 사용?

  • 필요없어진 코드를 삭제하지 않고 임시로 작동하지 못하게 하고 싶을 때
  • 코드에 대한 간단한 설명을 붙여두고 싶을 때
  • 개발자 본인 또는 동료를 위해 붙여둔다

주석 단축키: 주석처리 할 라인 선택 + ctrl(또는 Command) + /

CSS 파일 분리

  • style부분이 길어지면 보기가 어려울 수 있어 이 부분을 따로 파일로 빼내는 것
  • style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기
<link rel="stylesheet" type="test/csss" href = "(css파일이름).css">

🚩 간단한 로그인 페이지 만들기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">
    <style>
        * {
        font-family: 'Gaegu', cursive;
        }
        .mytitle {
            width: 300px;
            height: 200px;

            color: white;

            text-align: center;

            background-image: url("http://image.dongascience.com/Photo/2019/12/fb4f7da04758d289a466f81478f5f488.jpg");
            background-size: cover;
            background-position: center;

            border-radius: 10px;

            padding-top: 40px;
        }
        .wrap   {
            width: 300px;
            margin: auto;
        }
    </style>

</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>로그인하고 햄스터를 보러 가요!</h5>
        </div>
        <p>ID <input type="text"/></p>
        <p>PW <input type="text"/></p>
        <p><button>햄스터 보러가기</button></p>
    </div>

</body>
</html>

완성본

🚩 부트스트랩(bootstrap)

  • 예쁜 CSS를 모아둔 것
  • 남이 작성한 CSS를 내 HTML에 적용, CSS파일이 인터넷 어딘가에 있는 것

🚩 포스팅박스 완성

<!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">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            background-color: green;

            height: 250px;
            width: 100%;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 30px;
        }

        .mytitle > button:hover {
            border: 2px solid white;

        }

        .mycomment {
            color: gray;
        }

        .mycards {
            width: 1200px;
            margin: 20px auto 0 auto;
        }

        .mypost {

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

            margin: 20px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;
        }

        .input-group {
            max-width: 500px;
            width:95%;
            margin: 20px auto 0px auto;
        }

        .twobuttons {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }


        .twobuttons > button {
            margin-right: 10px;
        }

    </style>    
</head>

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기❣</button>
    </div>

    <div class="mypost">
        <div class="form-floating">
            <input type="url" class="form-control" id="floatingInput" placeholder="url">
            <label for="floatingInput">영화url</label>
        </div>

        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>-- 선택하기 --</option>
                <option value="1">⭐</option>
                <option value="2">⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="5">⭐⭐⭐⭐⭐</option>
             </select>
        </div>

        <div class="form-floating">
          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
          <label for="floatingTextarea2">코멘트</label>
        </div>

        <div class="twobuttons">
            <button type="button" class="btn btn-dark">기록하기</button>
            <button type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다</p>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

*모바일 처리하기 Tip

  • 가로 사이즈는 500px로
  • 화면이 모바일 크기로 줄어들 때 자동 변환시키는 법
width: 95%;
max-width: 500px;
화면 폭 500px전에는 95%로 맞추다가 넘으면 500px로 보여줘라는 의미

🚩 Javascript HTML에 연결하기

ex) '나는 버튼이다'를 누르면 안녕이 뜨게 하기

① head안에서 script로 공간을 만들어 안에 작성

② 버튼에 함수 연결하기

<button onclick = "hey()">나는 버튼이다</button>

적용한 모습

🚩 Javascript 기초

웹페이지>마우스 우클릭 '검사'>console에서 테스트 가능
한번 입력한 내용은 새로고침만 안하면 계속 유지됨

변수 & 기본연산

변수대입: 오른쪽에 있는 것을 변수에 넣는다.

> let a = 2
-------------
> a
> 2
-------------
> let b = 3
-------------
> b
> 3
-------------
> a+b
> 5
-------------

리스트 & 딕셔너리

  • 리스트: 순서를 지켜서 데이터를 가지고 있는 형태
> let a_list = [1,2,'사과']

> a_list[0]
> 1

> a_list[2]
>'사과'

길이 구하기
> a_list.length
> 2
  • 딕셔너리 = key:value
>let a_dict = {'name' : 'Minsu', 'age': 26}

>a_dict['name']
>Minsu

>a_dict['age']
>26

기본함수

ex) 특정 문자로 문자열 나누기

>let myemail = 'abc@velog.com'
>let result = myemail.split('@')
>'abc', 'velog.com'
>result[0]
>'abc'
result[1]
>velog.com

>let result2 = result[1].split('.')
>'velog','com'
>result2[0]
>velog


보다 간편하게 velog 도출하는 법

>let myemail = 'abc@velog.com'
>let result = myemail.split('@')[1].split('.')[0]
>velog

기본 함수 function

function 함수이름(필요한 변수들) {
명령 순차적으로 작성
}

예시
sum = 두 개의 숫자를 입력하면 두 개의 합을 돌려주는 함수
function sum(num1, num2) {
	console.log;
    (--console.log는 console창에 결과를 띄워줘라는 뜻--)
    return num1 + num2;
}

console에서 입력하면
> sum(3,5)
> 8

조건문

20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
	if(age>20) {
    alert('성인이에요')
    } else if (age>10) {
    alert('청소년이에요')
    } else{
    alert('10살 미만이에요')
    }
 }
 
 >is_adult(25)
 성인이에요!가 뜬다

반복문

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

console에서 입력하면
console.log(1)
console.log(2)
console.log(3)
.
.
.
console.log(99)

1주차 내용을 한꺼번에 복습하려하니 굉장히 양이 많은 것 같다.
앞으로는 강의를 듣고 바로바로 복습하면서 올려야겠다.
이제 팬명록 만들기만 제출하면 1주차가 마무리된다!
팬명록 만들기도 다 하고 나면 여기에 코드를 올려야겠다.

profile
Jessie H
코딩 공부 기록장
다음 포스트

[스.코] 웹개발 종합반 2주차-1

0개의 댓글