12주차 웹프로그래밍 (1)

정지원·2024년 5월 12일

에이블 스쿨 복습

목록 보기

44/51

VSCODE

Plugin

beautyify css

코드의 가독성을 높여주고 정렬해주는 역할을 함

shift + alt + F

python intelliSense

파이썬을 vscode에서 사용할 수 있게 함

live preview

실시간으로 CSS를 미리보기 할 수 있는 확장 프로그램

nodejs

구글창에 node.js 검색 후 설치

Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경으로, 서버 측 JavaScript 개발을 가능하게 해주는 플랫폼

javascript debugger

코드 실행 중 발생하는 버그를 식별하고 수정하는 도구

code runner

코드 실행을 가능하게 하는 확장 프로그램

html prettier

html 코드를 포멧팅하는 프로그램

autopep8

파이썬 코드를 포멧팅하는 프로그램

단축키

ctrl + b : 왼쪽 바 숨김
ctrl + alt + n : 실행
ctrl + x : 한쪽 라인 삭제
ctrl + alt : 여러 라인 선택
ctrl + j : 여러 라인 합치기
shift + alt + f : 포멧팅함

개인적으로 원하는 단축키를 사용하려면
ctrl + k, ctrl + s 를 작성시

이런 화면에서 수정이 가능하다.

HTML

웹문서를 작성하는 마크업 언어

HTML의 기본 구조

<!DOCTYPE html> : document 타입이 html 문서
<html lang="en"></html> :웹문서의 시작과 끝을 나타내는 태그
<head></head> : 웹문서의 정보에 대한 코드 작성
<body></body> : 웹문서에서 화면에 출력되는 코드 작성
meta : 페이지 데이터 정보를 출력
viewport : 렌더링 영역의 크기 설정 (반응형 웹)
title : 브라우져에 출력되는 제목

HTML 페이지 구조

시멘틱 태그 : 태그 이름으로 의미를 알 수 있는 태그

시멘틱 태그로 웹페이지의 전체적인 구조를 구성
시멘틱 태그를 반드시 사용해야 하는 것은 아님

<header> : 헤더 영역 표현
<nav> : 네이게이션 바 영역 표현
<main> : 전체 컨텐츠 영역 표현
<article> : 독립적인 컨텐츠 영역 표현
<section> : 컨텐츠 영역 표현, article 태그 안에 여러 개의 section 태그 작성함
<aside> : 본문 오른쪽이나 왼쪽 영역 표현
<footer> : 웹문서 아래 영역 표현

문자열 태그

<h1>~<h6>: 제목 태그 (크기별)
<p>: 한줄 문자열 태그
<br>: 줄바꿈
<span> : 한블럭 문자열 태그
<pre> : 줄바꿈 띄어쓰기 적용 태그
<code> : 코드 태그
<strong>, <b> : 굵은 글씨 태그
<small> : 작은 글씨 태그
<em>, <i> : 이탤릭체 태그
<sup> : 윗첨자 태그
<sub> : 아래첨자 태그
<u> : 밑줄 태그
<del> : 삭제선 태그
<a href="" target="_blank">: 링크 태그
- href: 이동할 페이지 링크
- target="_blank": 페이지 이동시 브라우져에 새로운 탭 생성

HTML 테이블 태그

<table> : 테이블 태그
<caption> : 테이블 제목
<thead> : 테이블 컬럼
<tbody> : 테이블 내용
<tr> : 테이블 로우(row)
<th>, <td> : 테이블 데이터

HTML 이미지 태그

<img src="", alt="" width="" height=""> : 이미지 태그
- scr: 이미지 경로
- alt: 대체 텍스트
- width: 넓이
- height: 높이

HTML 입력 태그

<form method="" name="", action="" target="_blank"> : 로그인 페이지와 같이 여러개의 데이터를 서버로 전달할때 사용하는 태그
- method: 데이터 전달 방법 정의 (get, post 방식)
- name: form 태그 이름 정의
- action: 데이터를 전달할 URL
<input type="" placeholder="" maxlength="" name="" value="" readonly required autofocus> : 문자열을 입력 받는 태그
- type: 다양한 형태의 입력 태그 (text, password, email, checkbox, radio, datetime, submit, reset, file)
- placeholder: 입력 전에 입력태그에 출력되는 문자열 속성
- maxlength: 최대 입력 문자열 길이 설정 속성
- name: input 태그를 묶어주는 문자열 속성
- value: 선택했을때, 서버로 전송할 데이터를 입력하는 속성
- readonly: 데이터를 입력할 수 없고 읽을 수만 있는 속성
- required: 필수 입력 속성
- autofocus: 자동으로 입력창의 포커스 설정
<label> : input 태그에 이름을 붙일 수 있는 태그
<textarea cols="" rows=""> : 여러 줄의 문자열을 입력할 수 있는 태그
- cols: 컬럼 수 태그의 너비 설정
- rows: 행수 태그의 높이 설정

Emmit 코드

html 코드를 간단하게 만들어주는 문법

<!-- html 코드를 간단하게 만들어주는 문법 -->

<!-- '>' : 하위 레벨 태그 생성-->
<!-- sp>pan -->
<p><span></span></p>


<!-- '+' : 같은 레벨 태그 생성 -->
<!-- p+span -->
<p></p>
<span></span>

<!-- '()' : 태그 묶음 -->
<!-- (p+span)(p+span) -->
<p></p>
<span></span>
<p></p>
<span></span>

<!-- '^' : 상위 엘리먼트로 이동 -->
<!-- p>span^div -->
<p><span></span></p>
<div></div>

<!-- ':' : type 속성 -->
<!-- input:text -->
<input type="text" name="" id="">


<!-- #: 아이디, . : 클래스 -->
<!-- p#no.no1>span.no2 -->
<p id="no" class="no1"><span class="no2"></span></p>

<!-- '*' : 반복해서 태그 생성 -->
<!-- ul>li.data*3 -->
<ul>
    <li class="data"></li>
    <li class="data"></li>
    <li class="data"></li>
</ul>

<!-- '$' : 순번 사용 -->
<!-- ul>li.data$*3 -->
<ul>
    <li class="data1"></li>
    <li class="data2"></li>
    <li class="data3"></li>
</ul>

<!-- '@' : 순번 시작 번호 설정 -->
<!-- ul>li.data$@6*3 -->
<ul>
    <li class="data6"></li>
    <li class="data7"></li>
    <li class="data8"></li>
</ul>

<!-- '{}' : 문자열 입력 -->
<!-- ul>li.data$@6{no$}*3 -->
<ul>
    <li class="data6">no1</li>
    <li class="data7">no2</li>
    <li class="data8">no3</li>
</ul>

<!-- '[]': 속성값 입력 -->
<!-- a[href=https://kt.com{kt 페이지 이동}] -->
<a href="https://kt.com{kt 페이지 이동}"></a>

CSS

CSS(Cascading Style Sheets): 웹 페이지의 스타일과 레이아웃을 지정하는 데 사용되는 언어
HTML과 함께 사용되어 웹 페이지의 외관을 꾸미는 역할을 함
CSS를 사용하면 텍스트의 색상, 글꼴, 크기, 배경, 여백 등 다양한 스타일 속성을 지정할 수 있다.

css 사용 방법

css-html 연결

CSS는 html에서 style 태그안에 넣어서 사용할 수 있다.

<style></style>

그 이외에
.css파일을 만들어서 연결해 주는 방법이 있다.

위 처럼 head안에 아래와 같이 작성하여 연결해주면 된다.

<link rel="stylesheet" href="경로/이름.css" />

이와 같이 사용함

글꼴 설정

font-family : 글꼴 설정
color : 글자색상 설정 (rgb, rgba)
font-size : 글자크기 설정 (주로 px단위 사용)
font-style : 글자 스타일 설정 (normal, italic)
font-weight : 글자 스타일 설정 (normal, bold, lighter, 100 ~ 900)
line-height : 글자 세로 간격 설정
letter-pacing : 글자 가로 간격 설정
text-align : 글자 정렬 (left, right, center 등)
text-decoration : 텍스트의 밑줄이나 취소선 설정

레이아웃 영역설정

margin: border 바깥 영역의 여백 설정
- ex) 5px(모든 margin 5px)
- 5px 10px(위 아래 5px, 좌우 10px)
- 5px 10px 15px 20px(top에서 시계방향으로 5 10 15 20)
  margin: 0 auto; --> 가운데 정렬임
border: 영역의 테두리 설정
- border-style: solid, dotted, dashed 등
border-radius: 둥근 모서리 설정
padding: border 안쪽 영역의 여백 설정
width: 컨텐츠의 가로길이 설정 (px % auto)
height 컨텐츠의 세로길이 설정

레이아웃 정렬

float: 레이아웃 정렬 설정 (left, right)
높이 값은 0으로 설정됨
display: 레이아웃 출력 속성 설정 (block, inline-block)
position: 레이아웃 위치 설정
(relative, absolute, fixed)

배경 설정

background-color: 배경색 설정
background-image: 이미지 파일을 배경으로 설정
background-position: 이미지 파일의 배경 위치 설정 (left, right, center, top, bottom)

JavaScript

웹브라우저에서 이벤트를 처리하는 문법

변수선언: RAM을 사용하는 문법
데이터타입: RAM을 효율적으로 사용하는 문법 (동적 타이핑)
연산자: CPU 사용하는 문법 (산술, 비교, 논리)
조건문: 조건에 따라서 다른 코드를 실행
반복문: 특정 코드를 반복적으로 실행
함수: 중복 코드를 묶어서 코드 작성 실행
객체: 식별자 1개에 데이터 여러 개를 저장하는 문법 (클래스)

특징

인터프리터언어
동적 타이핑
객체 지향

1. 변수 선언

식별자: 저장공간을 구별하는 문자열
식별자 규칙: 대소문자, 숫자, _, $, 가장앞에 숫자 x, 예약어 사용x
식별자 컨벤션: camelCase(변수, 함수), PascalCase(모듈)

식별자 1개, 데이터 1개

var data1 = 10;

식별자 n개, 데이터 n개

var data2 = 20, data3 = 30;
var data2 = 20,
    data3 = 30;

식별자 n개, 데이터 1개

var data4 = data5 = 40;
console.log(data1, data2, data3, data4, data5);
>
10 20 30 40 40

식별자 1개 데이터 n개인 경우 array이다.

2. 데이터 타입

number, string, boolean, function, object
동적타이핑: 데이터아팁 선언 없이 자동으로 데이터타입 정의

var data1 = 1;
var data2 = 'js';
var data3 = true;
var data4 = function(){console.log('js')};
var data5 = {key: 'js'};

console.log(typeof data1, typeof data2, typeof data3);
console.log(typeof data4, typeof data5);
>
number string boolean
function object

데이터가 없음

undefined: 선언은 되었으나 데이터가 할당 되지 않음
null: 선언은 되었으나 데이터 없음이 할당
NaN: Number 데이터 타입에서 undefined

var data1 = undefined;
var data2 = null;
var data3 = NaN;
console.log(typeof data1, data1);
console.log(typeof data2, data2);
console.log(typeof data3, data3);
console.log(NaN == NaN, NaN > NaN);
>
undefined undefined
object null
number NaN
false false

데이터 타입의 형 변환

Number(), String(), Boolean()

var data1 = '1';
var data2 = 2;
console.log(typeof data1, typeof Number(data1));
console.log(data1+data2);
console.log(Number(data1)+data2);
console.log(data1 + String(data2));
>
string number
12
3
12

묵시적 형변환

서로 다른 데이터 타입을 연산할때 데이터 타입을 변경

var data1 = '1';
var data2 = 2;
console.log(typeof data1, typeof (data1 - 0));
console.log(typeof data2, typeof (''+data2));
>
string number
number string

3. 연산자

산술

데이터 + 데이터 = 데이터
(+, -, *, /, %, **, ++, --)

var data1 = 11, data2 = 4;
console.log(data1 / data2, data1 % data2, data2 **3);
>
2.75 3 64
  
// ++data1 : +1하고 데이터 대입
var data1 = 5, data2 = 7;
data1 = ++data2;
console.log(data1, data2);
>
8 8  
  
// data1++ : 데이터 대입하고 +1
var data1 = 5, data2 = 7;
data1 = data2++;
console.log(data1, data2);
>
7 8

비교

데이터 + 데이터 = 논리값 (조건 1개)
(==, !=, >, <, >=, <=, ===, !==)
==(데이터만 비교), ===(데이터, 데이터 타입 비교)

var data1 = 1, data2 = '1';
console.log(data1, data2);
console.log(data1 == data2, data1 === data2);
>
1 1
true false

논리

논리값(조건1개) + 논리값(조건2개) = 논리값 (조건 2개 이상)
(!, &&, ||)

console.log(true && false, true || false);
>
false true

할당

변수 <산술> 데이터 누적해서 연산

var data1 = 10;
data1 += 20;
console.log(data1);
>
30

삼항

(python): true if condition else false
(javascript): condition ? true : false
조건 ? 참 : 거짓

var balance = 10000, amount = 6000;
var msg = balance >= amount ? '인출가능' : '인출불가';
console.log(msg);
>
인출가능

실수하기 쉬운 코드 (부동 소수점 에러)

var data1 = 0.1, data2 = 0.2;
console.log(data1 + data2 === 0.3);
console.log(data1 + data2);
>
false
0.30000000000000004
console.log(Math.round((data1 + data2) * 10) / 10);
console.log(Math.round((data1 + data2) * 10) / 10 === 0.3);
>
0.3
true

4. 조건문

if, else if, else

var balance = 3000, amount = 4000;
if(balance < amount){
    console.log('인출불가');
} else if (amount > 5000){
    console.log('인출불가: 최대인출금액초과');
} else {
    console.log('인출가능');
}

5. 반복문

while, for, break, continue

while

횟수를 특정할 수 없는 경우

var count = 3;
while(count > 0){
    count -= 1;
    console.log('js');
}
>
js
js
js

for

횟수를 특정할 수 있는 경우

for(var i=0; i<3; i++){
    console.log('js');
}
>
js
js
js

continue

실행되면 반복문을 정의하는 코드로 올라가서 코드 실행

for(var i=0; i<5; i++){
    if (i === 2){
        continue;
    }
    console.log('js', i);
}
>
js 0
js 1
js 3
js 4

break

반복을 중단

for(var i=0; i<5; i++){
    if (i === 2){
        continue;
    }
    console.log('js', i);
    if (i >= 3) {
        break;
    }
}
>
js 0
js 1
js 3

예제 문제

로또 번호 출력 1 ~ 45 랜덤한 숫자 6개 출력
중복 허용 출력

var count = 6, lotto = '';
console.log(Math.random());
console.log(Math.ceil(4.2));
for (var i=0; i<count; i++){
    var rnum = Math.ceil(Math.random() * 44) +1;
    lotto = lotto + rnum + ' ';
}
console.log(lotto);
>
0.3842289032751265
5
22 10 45 14 37 30

6. 함수

중복되는 코드를 묶어서 코드 작성 실행 문법 -> 코드 유지 보수 향상
사용법: 함수 선언(코드 작성) -> 함수 호출(코드 실행)

// 함수 선언: 코드 작성
function showLotto(){
    var count = 6, lotto = '';
    for (var i=0; i<count; i++){
        var rnum = Math.ceil(Math.random() * 44) +1;
        lotto = lotto + rnum + ' ';
    }
    console.log(lotto);
}
// 로또 번호 출력: 함수 호출: 코드실행
showLotto();
// javascript 출력
console.log('javascript');
// 로또 번호 출력
showLotto();

7. 객체

push() 데이터 추가

var data = [1, 2, 3, 'A', 'B'];
console.log(typeof data, data);

data.push('C');
console.log(data);
console.log(data[3]);

for(var i=0; i<data.length; i++){
    console.log(i, data[i])
}
>
object [ 1, 2, 3, 'A', 'B' ]
[ 1, 2, 3, 'A', 'B', 'C' ]
A
0 1
1 2
2 3
3 A
4 B
5 C

객체 생성 1

var data = { name: 'andy', plus: function(n1, n2){return n1+n2}};
console.log(typeof data, data);
console.log(data.name, datap['name']);
>
object { name: 'andy', plus: [Function: plus] }
andy andy

객체 생성 2

function Person(name){
    this.name = name;
}
var person = new Person('andy');
console.log(typeof person, person);
>
object Person { name: 'andy' }

변수 추가 삭제

var data = {};
data.name = 'alice';
data['age'] = 23;
console.log(data);

delete data.age
console.log(data);
>
{ name: 'alice', age: 23 }
{ name: 'alice' }

정지원

뒤늦게 프로그래밍을 시작한 응애

이전 포스트

12주차 IT 인프라

다음 포스트

12주차 웹프로그래밍 (1)

에이블 스쿨 복습

VSCODE

Plugin

beautyify css

python intelliSense

live preview

nodejs

javascript debugger

code runner

html prettier

autopep8

단축키

HTML

HTML의 기본 구조

HTML 페이지 구조

문자열 태그

HTML 테이블 태그

HTML 이미지 태그

HTML 입력 태그

Emmit 코드

CSS

css 사용 방법

css-html 연결

글꼴 설정

레이아웃 영역설정

레이아웃 정렬

배경 설정

JavaScript

특징

1. 변수 선언

식별자 1개, 데이터 1개

식별자 n개, 데이터 n개

식별자 n개, 데이터 1개

2. 데이터 타입

데이터가 없음

데이터 타입의 형 변환

묵시적 형변환

3. 연산자

산술

비교

논리

할당

삼항

실수하기 쉬운 코드 (부동 소수점 에러)

4. 조건문

5. 반복문

while

for

continue

break

예제 문제

6. 함수

7. 객체

12주차 IT 인프라

12주차 웹프로그래밍 (2)

0개의 댓글