[240730] 웹개발 기초 강의

[UX 기획 및 리서치 강의]

1주차

01. 웹 브라우저 작동 원리

웹 브라우저(클라이언트)가 API로 요청을 보내면 서버에서 HTML을 전달해주는 것.

 

---

 

02. HTML 기초

📌 HTML과 CSS의 개념

✅ HTML

웹의 뼈대가 되는 형태. 

 

✅ CSS

CSS는 HTML을 통해 작성된 뼈대에 디자인을 가미하는 역할.

 

✅ Javascript

디자인까지 완료된 형태에 움직임을 부여하는 역할.

 

- head 안에는 페이지의 속성 정보를, body 안에는 페이지의 내용을 포함하여 코드 작성.

- Shift + Option(Alt) + F를 누르면 코드 자동 정렬.

- Option(Alt) + B를 눌러, 실행.

 

---

 

03. 로그인 페이지 만들기

VS Code로 만들어본 로그인 화면

 

1. Body 영역에 <h1> 을 이용해 타이틀 생성.

2. Body 영역에 <input>을 이용해 아이디/ 패스워드 텍스트필드 생성. 이때, <p>를 이용해, 단락을 구분함.

* <hr>을 이용하면, 라인으로 단락 구분 가능.

3. Body 영역에 <button>을 이용하여 로그인 버튼 생성.

4. Body 영역에 <div class="클래스 이름">으로 묶은 후, Head 영역에 <style>을 추가하여 꾸미기

---

 

04.자주 쓰는 CSS

h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding

 

📌 margin과 padding

margin은 바깥 여백, padding은 안쪽 여백 설정.

각각 

margin: 50px auto 0px auto; /* 좌우 기준 가운데 정렬 */

padding: 50px;

이런 식으로 이용. 왼쪽부터 상좌하우의 순. 값을 하나만 입력 시 상하좌우에 동일한 값이 적용됨.

 

📌 가운데로 옮기고 싶을 때 사용하는 코드

display: flex;

flex-direction: row; /* row, column에 따라 배열의 상하, 좌우가 결정됨 */

align-items: center;

justify-content: center;

---

 

05. [구글폰트] 가져다 쓰기

1. 구글 폰트에서 폰트 찾기

2. Get Font 버튼 클릭

3. Get Embeded Code 클릭

4. @import 선택 후, 코드 복사

5. Head 영역 <style> 안에  폰트 정보 붙여넣기

 

ex. noto sans KR

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

 

* {

font-family: "Noto Sans KR", sans-serif;

}

 

---

 

06. [부트스트랩] 가져다 쓰기

css를 모아둔 것. 코드 소스를 이용해 일부만 수정하여 적용 가능.

부트스트랩 링크

 

부트스트래핑을 이용한 예제 실습

 

 

---

2주차

01. [스파르타플릭스]프로젝트

 

1주차에서 배운 내용을 기반으로 OTT 화면 구성.

 

---

 

02. Javascript

프로그래밍 언어 중 하나로 브라우저에 움직임을 부여하는 역할.

 

✅ 변수

값을 정의하여 저장. let으로 정의.

ex. let a = '사과';

 

✅ 리스트

여러 개의 데이터를 순서대로 저장.

ex. let b = ['사과', '배', '감', '수박']

 

✅ 딕셔너리

여러 개의 데이터를 별칭을 부여하여 순서대로 저장.

ex. let c = {'name':'Bob', 'age': 35, 'gender': 'Man'}

 

✅ 리스트 + 딕셔너리

두 가지를 결합하여 사용 가능.

ex.

let people = [

            { 'name': '서영', 'age': 24 },

            { 'name': '현아', 'age': 30 },

            { 'name': '영환', 'age': 12 },

            { 'name': '서연', 'age': 15 },

            { 'name': '지용', 'age': 18 },

            { 'name': '예지', 'age': 36 }

]

 

✅ 반복문

forEach를 이용하여, 동일한 형태의 일을 반복적으로 실행할 수 있도록 함.

 

✅ 조건문

만약 ~하다면, ~하라는 조건을 달아, 프로그램이 명령을 시행하도록 함.

 

ex.

ages.forEach(a => {

            if (a < 20) {

                console.log("청소년입니다.");

            }

            else if(a >=20 && a < 60){

                console.log("성인입니다.");

            }

            else

            {

                console.log("노인입니다.");

            }

});

 

 

---

 

03. JQuery

Javascript를 더 쉽게 사용할 수 있도록 한 것.

 

자바스크립트

document.getElementById('hello').innerHTML = '안녕';

에서

 

JQuery

$('#hello').html('안녕');

로

 

📌JQuery 예시 따라해보기

1. 기본형

 

코드/ 실행 화면 버튼 누르기 전, 후

2. 응용 - 사다리타기 프로그램

코드/ 실행 화면 버튼 누르기 전, 후

 

 

- 랜덤 값을 불러오는 함수를 추가하여 사람을 한명 고를 수 있게 함.

 

 

---

 

💭 한 파일 안에서 형식이 다양하다는 게 좀 신기했다. Javascript와 HTML/CSS 부분이 전혀 다른 방식으로 코드를 작성하는 것 같다. 개발 분야에 대해서는 거의 아는 바가 없기는 하지만, 개인적으로 Javascript는 자바나 C언어와 비슷한 느낌인데 HTML은 전혀 다르다고 느껴졌다.