HTML, CSS, Javascript 왕초보 딱지 떼기

Daun Bin·2022년 2월 25일

코딩의 전체적인 맥락을 이해하는 것이 좋을 것 같아, 스파르타 코딩 클럽의 '왕초보' 웹개발 종합반을 신청해서 듣고 있다.
1주차에서는 크게 아래 3가지를 배웠는데, 해당 내용 중 중요하다고 생각했던 핵심만 간략히 정리해보고자 한다.

1주차 [수업 목표]

서버와 클라이언트의 역할에 대해 이해한다.

HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!

Javascript 기초 문법을 익힌다.

1. 서버와 클라이언트의 역할

우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서","그려주는" 것 뿐이다. 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐.
요청을 보내냐고? 바로 서버가 만들어 놓은 "API"라는 창구에 보내는 것이다.

예전 회사에서 개발자 분과 얘기할 때 API, JS, mongoDB 엄청 많이 들었었는데... 이번 강의에서 다 다루지는 않았지만 어쨌든 큰 그림에서 어떻게 동작하는지 이해해서 되게 반가웠다.

2. HTML, CSS의 기초 지식

예전에 유튜브로 HTML, CSS를 대략적으로 배워뒀었는데 이 두 가지만 자유자재로 다루기에도 꽤 오랜 시간이 걸렸던 것으로 기억한다. 하지만 이 강의에서는 굉장히 굵직한 개념 + '모든 걸 다 배우거나 외울 필요 없다' 철학 하에 빠르게 훑는다.

👉🏽 HTML은 뼈대, CSS는 꾸미기!

2-1. CSS로 간단한 페이지 만들기

아래와 같은 페이지를 만들 때, background-image, background-position, background-size를 활용하여 이미지를 원하는 대로 넣을 수 있었다. 이 부분이 아주 편리했음.

    <style>
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
            
            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
      
</body>
</body>

</html>

2-2. 구글 웹폰트 입히기

구글 폰트 -> select this style -> embed tab에서 아래 link를 복사하여 head에, 아래 css를 복사하여 style에 넣으면 된다.

/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Nanum Gothic', sans-serif;
}

2-3. 부트스트랩(bootstrap)

부트스트랩이란? 예쁜 CSS를 미리 모아둔 것이라고 생각하면 된다.
부트스트랩을 바로 가져다쓰기 위해서는 아래 템플릿을 사용해야 한다.

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

  <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

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

</html>

3. Javascript 기초 문법 배우기

JS (자바스크립트)는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어다. 1주차에는 JS의 기초 문법만 배워보았다. 변수 & 기본연산, 리스트 & 딕셔너리, 함수, 조건문, 반복문을 배우는데 그 중에서도 '반복문'에 대해 기록해보고자 한다.

3-1. 반복문

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

👉 이 코드가 아마 가장 많이 쓰이는 코드가 아닐까 싶다. i가 0번부터 99번까지 하나씩 증가하면서 i를 출력하라는 말이다. 그러니까 console.log(i)의 값으로는 0-99까지 하나씩 찍힌다.

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

👉 반복문은 list와 자주 쓰인다. 이 경우에는 i가 0부터 people의 리스트 길이인 6개까지 돌면서 하나씩 추출하라는 뜻이 되므로 '철수','영희','민수','형준','기남','동희' 이렇게 하나씩 나오게 된다.

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']);
	}
}

👉🏽 이렇게 하게 되면 i는 0부터 6 미만까지 하나씩 커지면서 값을 추출하되, i번째 scores리스트의 score 값이 70보다 작을 때만 i번째의 'name'을 출력하게 된다. 한마디로, 저렇게 list형식의 데이터에서 '점수가 70점 미만인 사람들의 이름만 뽑는' 방법인 것.

이외의 꿀팁들

1강을 들으며 메모했던 소소한 꿀팁도 정리해봤다.

코드 정렬하기: Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L)
margin vs padding: margin은 바깥 여백을, padding은 내 안쪽 여백을 의미함.
주석 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)

2주차 내용도 후딱 듣고 남겨보겠다 👼🏻

Daun Bin