Web 기초

!section 1.FreeCamp 강의노트

프론트앤드와 백앤드의 이해

프론트앤드

1. 웹 : HTML, CSS, JavaScript , Angular, Vue, React
2. 앱 : 코틀린(android) ,swift(ios), React native (cross) , 플러터 (cross)

인터넷 브라우저 : html, css 로 작성된 파일을 유저가 보기 편하게 로드하는 역할을 한다.
반응형 브라우저 : 유저의 해상도에 따라 UI구성이 달라지게끔 만들어진 브라우저.

HTML

html 은
Hyper Text Markup Language의 약자로,웹페이지에서 문서를 작성,조회,공유하기 위해 만들어진 체계이다.

인터넷 브라우저는 이 html을 그려주는 도구이다.

<div></div>

구역을 나누는 태그. block element로, 가로 전체를 차지한다.

<span></span>

구역을 나누는 태그. inline element로, 내용물 만큼의 가로만 차지한다.

<input>

유저가 내용을 입력할 수 있다.

type 속성: 입력형식이 어떤 형식인지 지정할 수 있다.

placeholder : 입력 안내 설명란

<input type="radio">

<input type="radio"> 로 설정 후, name 속성을 이용해 여러 input의 name을 동일하게 맞추면 여러 라디오 값중 한개만 true값으로 설정할 수 있다.

<input type="radio" name="gender" />여성
<input type="radio" name="gender" />남성

<selection>

drop&down으로 한 가지를 선택하는 기능.
<selection> 태그 안에 <option>태그를 넣어 선택의 종류를 관리한다.
<option> 태그에서 설정할 수 있는것은 다음과같다.

disabled : 선택할 수 있는지 여부

selected : 처음에 선택되어있는지

CSS

html의 시각화를 꾸며주는 역할을 한다. css를 사용하는 방법은 다양하지만, 유지보수및 협업을 위해 css파일을 따로 만들어 관리하도록 한다.

CSS 파일을 HTML 파일과 연결하기

html 파일의 헤더부분에 아래와 같이 입력한다.

<link href="./fileName.css" rel="stylesheet">

CSS 선택자

.{..} : 모든 html 태그에 적용되는 스타일

div{..} : div태그에만 적용되는 스타일. 앞에 태그의 이름이 온다.

.className{..} : 해당 이름을 class로 설정한 태그에게만 스타일을 적용한다.여러 가지 태그에 동일한 class를 설정할 수 있다.

#idName{..} : 해당 이름을 id로 설정한 태그에게만 스타일을 적용한다. id는 고유하게 하나의 태그에만 적용할 수 있다

전체 고정 CSS

*{
    box-sizing: border-box;
}

앞으로 css를 제작할때 box-sizing은 항상 border-box로 고정한다. content-sizing 은 패딩값이 달라질 경우 박스 자체의 크기가 달라지기 때문에, 복잡한 레이아웃에서 사용 시 전체 레이아웃의 구조가 틀어질 확률이 높기 때문이다.

정렬

정렬은 부모박스를 기준으로 계산한다.
정렬하는 방법은 flex와 position이 있다.

flex

여러 태그를 하나로 묶어서 정렬한다.

display: flex;
flex-direction : column/row ;
justify-content : center/space-between/space-around/space-evenly;
align-items : center/space-between/space-around/space-evenly;

display: 정렬방식을 고름. flex/position

flex-direction : flex 정렬법일때, 아이템들의 기본 정렬 방향

justify-content : flex-direction에서 고른 방향기준의 정렬. 가운데 놓거나 같은 간격으로 놓을 수 있다.

align-items : flex-direction에서 고른 방향의 반대방향을 정렬한다. 가운데 놓거나 같은 간격으로 놓을 수 있다.

position

position: absolute : 박스의 절대적인 위치(부모박스와 관련없이)

position: relative : 부모박스 기준으로 상대위치

position: fixed 유저의 브라우저 화면을 기준으로 절대위치. 하단의 네비게이션 바에 사용한다.

flex-direction 이 column일 경우, justify-content = center 일 경우 세로 축의 중앙에 정렬된다.
반대로 flex-direction 이 row일 경우, justify-content = center일 경우 가로축의 중앙에 정렬된다.

JavaScript

html과 css에서는 할 수 없는 기능적인 부분을 담당한다. 버튼클릭과 같은 이벤트가 발생했을 때 특정 작업을 수행할 수 있도록 도와준다.

JavaScript 파일을 HTML 파일과 연결하기

html 파일의 헤더부분에 아래와 같이 입력한다.

<script src="./fileName.js"></script>

변수

var : 재선언및 데이터 수정이 가능하다. (위험. 사용하지않는다)

let : 재선언은 할 수 없지만, 데이터는 수정할 수 있다.변수 선언에 사용한다.

const : 재선언과 데이터수정을 할 수 없다. 상수 선언에 사용한다.

배열

여러 데이터를 하나의 변수 안에 담을 수 있는 것을 배열이라고 부른다.

let count = array.length() : 배열의 크기 반환

let value = array[index] : 해당 index 번째의 데이터를 반환

array.push(value): value값을 배열에 추가

let value = array.pop() : 마지막 요소를 제거 및 제거된 값 반환

array.sort() : 정렬수행.

let contain = array.includes(value) :value값이 들어있는지 확인. true/false를 반환한다.

let array3 = array.concat(array2) : array와 array2를 합친 결과를 반환

let value = array.join("@") : 배열 값들 사이에 @를 모두 넣어서 문자열로 반환

array.slice("@") : @를 기준으로 배열로 분리할 수 있다.

객체

관련있는 데이터끼리 묶어서 하나의 변수에 담을 수 있는 것을 객체라고 한다. key와 value 쌍으로 이루어져 있다.선언 방법은 아래와 같다.

const profile = {
    name: : "철수",
    age : 6,
    height : 100,
    school:"초등학교"
};

console.log(profile.name); //철수

객체의 배열도 사용이 가능하다.

console.log(array[0].name);
과 같은 방식으로 배열 내의 객체에 접근가능.

데이터 타입과 연산자

String :문자열

Number :숫자

Boolean : true/false값

Object : 객체. 배열은 객체의 한 종류이다.

Null : 값이 없는 경우. 아무것도 없음을 직접 입력한 것.의도한 것.

undefined : 정의되지 않은 경우. 의도하지 않은 비어있는 값.

=== :같다 엄격한 동치 연산자. 데이터 타입도 동일해야 한다. 1 === '1' 는 false이다.

== 느슨한 동치 연산자. 값만 동일하면 true를 반환한다. 안정성이 떨어진다. 1 == '1' 은 true이다

!== :다르다

조건문

if(조건문A){
    //조건문A가 true라면 실행, 아니라면 실행하지 않고 넘어감
}else if(조건문B){
    //조건문B가 true라면 실행, 아니라면 실행하지 않고 넘어감
}else{
    //둘다 아니라면 실행
}

반복문

for(let i = 0; i<5 ; i++){
    //함수실행
    if(조건문A) continue; //아래명령어를 실행하지않고 다음루프로 넘어간다.
    if(조건문B) break; //밖으로 빠져나간다.

}

수학 객체

Math.max(1,2,3) : 인자중 최대값 반환. 3반환

Math.min(1,2,3): 인자 중 최소값 반환. 1 반환

Math.random() : 0~1사이의 랜덤값 반환

Math.round(2.12) : 반올림값 반환. 2반환

Math.ceil(2.12) : 올림값 반환. 3반환

Math.floor(2.12): 내림값 반환.2반환

기타

String(123) : 인자를 문자열값으로 변경. "123" 반환

"123".padStart(6,"0") 문자열을 6자리로 맞추고, 남은 자리는 "0"으로 채우기. "000123" 반환

DOM

Document Object Model의 약자이다. HTML만으로 웹페이지를 구현하면 제한이 굉장히 많음. HTML과 javascript가 상호작용하며 여러가지 동작을 할 수 있도록 한다. HTML에서 값을 받아와 JS에서 기능을 수행하고, 그 기능의 결과값을 다시 HTML에 뿌려주는 역할을 하는것이 DOM이다.

document.getElementById("tagId") 를 통해 html내의 요소를 가져올 수 있다.

함수

함수 작성은 3가지 방법이 있다.

function sum(a,b){
    return a+b;
}

const sum = function(a,b){
    return a+b;
}

const sum =(a,b) => {
    return a+b
}

내장함수

setTimeout(func,time) : time ms이후 func를 실행한다.

setInterval(func,time) : time ms 간격으로 func를 실행한다.