베이스캠프 1주차 TIL

전은평·2023년 4월 6일

TIL

목록 보기

12/16

1주차

1일차

컴퓨터 기본지식

확장자
컴퓨터가 해당 파일이 어떤 형식인지 알려주는 정보
컴퓨터가 어떻게 어떤 파일로 인식해야 하는지 알려주는 정보
ex) .html&.css
브라우저
코드 실행기
반응형 웹
실행되고 있는 브라우저 화면 크기에 따라 실시간 반응을 통해 화면크기에 적합하게 디자인이 변화
어플로 만들면 ‘웹앱’
부모&자식/형제 관계
부모&자식 관계 : 상위폴더가 하위 폴더를 담고 있는 형태
형제 관계: 폴더나 파일이 같은 Depth에 위치한 형태
웹페이지 구성 언어
HTML (구조)
CSS (시각)
JavaScript (기능)

HTML(Hyper Text Markup Language)

: 웹페이지에 문서를 작성하는데 정해진 약속, 웹페이지 구조 역할

: 쉽게 말해 웹페이지에 공간을 만들고 그 공간을 무엇으로 채울지 설정

: 태그를 통해 구조 형성

태그(TAG)

HTML element
약속된 명령어이자 고유기능을 보유
block tag : 페이지 가로 넓이 전체를 차지하는 요소 (ex. h1 , div , p ..)
inline tag : 자신의 크기만큼만 차지하는 요소 (ex. span , input , a , button , label ..)

<strong> Hello! </strong> => 굵게 표현

<u> Hello! </u> => 밑줄

<i> Hello! </i> => 기울이기

<em> Hello! </em> => 기울이기

<pre> Hello! </pre> => 텍스트 형태 유지

<button> Hello! </button> => 버튼 생성

<textarea> Hello! <textarea> => 여러줄 텍스트 입력창 생성

<input type="text"> => 한줄 텍스트 입력창 생성

<input type="password"> => 비밀번호 입력창 생성

<input type="color"> => 색상 선택창 생성

<input type="checkbox"> => 체크박스(여러개 선택)생성

<input type="radio" name="group"> 라디오버튼(1개 선택)생성
			name이 동일한 radio 버튼 중 1개만 선택됨

<label> 라벨 </label> => 체크박스, 라디오버튼 등에 라벨(사용자들이 체크 더 편하게 해줌) 생성

 ex)
<input type="radio" id="women" name="gender">

<label for="women">여성</label>

<input type="radio" id="man" name="gender">

<label for="man">남성</label>

=> laber for 와 해당 type의 id 일치시켜주면 label 문구 클릭시 해당 박스 체크

<a href="http://google.com">구글로 가기</a> => 현재창에서 해당주소로 이동

<a href="http://google.com" target="_blank">구글로 가기</a> =>새창에서 해당주소로 이동

빈태그(Self-Closing Tag)

시작태그 or 종료태그 없이 사용

<hr> 수평선
<br> 줄바꿈

이미지 & 동영상 태그

이미지, 동영상 보여주는 태그

///일반 이미지
<img src="/이미지경로/이미지.확장자"/>

///배경 이미지
<div style = "background-image:url('/이미지경로/이미지.확장자')"/>

///동영상
<video muted="muted" autoplay="autoplay" loop="loop">
	<source src="동영상위치.mp4">
</video> 
=> muted:음소거  autoplay:자동재생 loop:반복재생

종속태그

다른태그와 상호작용을 해야 작동하는 태그

/// 선택박스 태그
+ 기본 설정값 만들기
<select>
	<option disabled="true" selected="true">지역을 선택하세요</option>
	<option>서울</option>
	<option>경기</option>
	<option>인천</option>
</select>

// 목록 태그

<ol>
	<li>순서 있는 리스트 1번</li>
	<li>순서 있는 리스트 2번</li>
	<li>순서 있는 리스트 3번</li>
</ol>

<ul>
	<li>순서 없는 리스트</li>
	<li>순서 없는 리스트</li>
	<li>순서 없는 리스트</li>
</ul>

// 표 태그

<table>
	<tr> === 줄
		<th>테이블 제목</th>
		<th>테이블 제목</th>
	</tr>
	<tr>
			<td>테이블 내용</td>
			<td>테이블 내용</td> 
	</tr>
	<tr>
			<td>테이블 내용</td>
			<td>테이블 내용</td>
	</tr>
</table>
 => 제목 줄까지 합쳐 총 3줄인 테이블 완성

HTML 기본 구조

<!DOCTYPE html> -> 최신버전의 html로 작성되었다고 브라우저에 알려줌
<html>
	// 검색엔진을 위한 영역
	<head>
		<title>사이트 이름</title>  -> 사이트 좌측 상단 제목 부분
		<meta name="description : 사이트 소개"/>  -> 검색엔진에서 사이트 검색시 상세 설명 내용 부분
		<meta property="og:image" />           <!-- 다른 사이트(카톡 등)에 이미지 알리기 -->
		<meta property="og:title" />           <!-- 다른 사이트(카톡 등)에 사이트명 알리기 -->
		<meta property="og:description" />     <!-- 다른 사이트(카톡 등)에 사이트상세 알리기 -->
	</head>

	// 브라우저에서 보여지는 영역
	<body>
		<header></header>           <!-- 웹페이지의 상단(또는 상단메뉴) 부분 -->
		<nav></nav>                 <!-- 웹페이지의 좌측(또는 우측메뉴) 부분 -->
		<section></section>         <!-- 웹페이지의 독립적인 섹션 부분 -->
		<article></article>         <!-- 웹페이지의 블로그, 뉴스, 기사 등 -->
		<footer></footer>           <!-- 웹페이지의 하단 기업정보 부분 -->
	</body>
</html>

CSS

: Cascading Style Sheet

: 웹페이지에서 시각적 요소 담당

: HTML 색, 크기, 정렬 등 변경하여 꾸며주는 언어

사용방법 3가지

html 태그에 입력하기

: 유지 보수 측면에서 굉장히 비효율

<div style="color:red" ; "font-size:10px"> 철수</div>

<span style="color:blue" ; "font-size:10px"> 영희</span>

//속성 사이에 ; 입력

style 태그에 입력하기

:유지 보수 측면에서는 유리할 수 있지만 관심사 분리가 안됨

<head>
	
<style>

	    span {color: red;                              

		 }

	</style>

</head>

<body>

	<span>Hello World!!</span>

</body>

CSS파일 분리하기
: 실무에서 가장 많이 사용되며, 유지 보수에 유리.
: 파일 불러올 때 태그 사용
```
```jsx
<head>
	
	<link href="style.css" rel="stylesheet"/>

</head>
```
```

CSS 선택자

: CSS에서 꾸밀 대상. 즉, 속성을 줄 대상

1) * {} : 전체 선택자

2) tag {} : 해당 태그 선택자

3) .class {} : 해당 클래스 선택자

4) #id : 해당 아이디 선택자

5) 선택자 : 가상상황 {} : 가상선택자

<style>
    * {
        color: red;
        }

    tag {
        color: red;
        }

    .class {
        color: red;
        }

    #id {
        color: red;
        }

    선택자:가상상황 {
        background-color: red;
        }
</style>

///02-signup.css///

red {
    background-color: red;
    border: 3px solid yellowgreen;
    }
.blue {
    background-color: blue;
    border: 3px solid yellowgreen;
    }
#submit {
    width: 100px;
    height: 100px;
    border: 2px solid purple;
    border-radius: 15px;
    }

/* 가상선택자 사용해보기 - hover */
#submit:hover {
    background-color : yellow;
    }

해당 CSS파일을 HTML 문서와 연결

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>회원가입</title>
		<link href="./02-signup.css" rel="stylesheet">
</head>
<body>
    <h1>회원가입</h1>
		<input class="red" type="text" placeholder="이메일을 입력해주세요"><br><br>
		<input class="red" type="text" placeholder="이름을 입력해주세요"><br><br>
		<input class="blue" type="password" placeholder="비밀번호를 입력해주세요"><br><br>
		<input class="blue" type="password" placeholder="비밀번호를 확인해주세요"><br><br>
		<br><br>
		<select>
			<option disabled="true" selected="true">지역을 선택하세요</option>
			<option>서울</option>
			<option>경기</option>
			<option>인천</option>
		</select>
		<br><br>
		<input type="radio" name="gender"> 여성
		<input type="radio" name="gender"> 남성
		<br><br>
		<input type="checkbox"> 이용약관 어쩌구에 동의합니다.
		<hr>
		<button id="submit">가입하기</button>
		<!-- 원래는 이렇게 사용했습니다. -->
		<!--  <input type="button" value="가입하기"> -->
</body>
</html>

박스모델

margin	border를 기준으로 박스의 바깥 여백
border	박스의 기준이 되는 바깥 테두리 선. 두께 조절가능
padding	박스의 안쪽 여백
contents	박스의 실질적인 내용 부분

박스모델 화면 표시 방법

border-box : border 고정 contents 변동
contents-box : contents 고정 border 변동

정렬

Flex

: 여러 태그를 하나로 묶어서 정렬

: 기준점 = 부모박스

: 부모박스를 기준으로 움직

자주 사용되는 flex 속성

/* 부모박스 */
 
   display: flex;
    
/* 행기준: row, 열기준: column */

    flex-direction: row;

    flex-direction: column; 
      
/* flex-direction 기준 수평 방향으로 자식박스 정렬 */

    justify-content: center;

/* flex-direction 기준  수직 방향으로 자식박스 정렬 */

    align-items: center;

참고하기 좋은 사이트

1.flex 공식 사이트

: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2.flex 연습 사이트

: https://flexboxfroggy.com/

3.UI 감각키우기 사이트

: https://cantunsee.space/

4.flex 참고 사이트

: https://studiomeal.com/archives/197

position

: flex에 종속되지 않고, 박스를 개별적으로 배치

1) absolute

/* 박스의 절대 위치 */
div {
    position: absolute;
    top: 0px;
    left: 0px;
}

2) relative

/* 부모 박스 기준으로 상대위치 */
div {
    position: relative;
    top: 0px;
    left: 0px;
}

3) fixed

/* 화면을 기준으로한 절대 위치 */
div {
    position: fixed;
    bottom: 0px;
}

2일차

JavaScript

변수와 상수

: 데이터를 담는 공간

변수 = 변동가능 ⇒ 선언 : var, let
상수 = 변동 불가능⇒ 선언 : const

1) 선언(declaration)

: 변수와 상수 사용하기 위해 처음으로 해야할 일

: 변수의 이름을 알려주는 행위

let apple

2) 할당(definition)

apple = "사과"

3) 선언 + 할당

let apple = "사과"

‘=’ 는 같다는 의미가 아닌 할당의 의미!

	var	let	const
변수명 중복(재선언) 여부	O	X	X
데이터 수정(재할당) 여부	O	O	X

변수와 상수의 작명 규칙

: 협업하는 팀원들이 이해하기 쉽게 고심해서 만들기!

1) camelCase : javascript에서 이용

2) snake_Case : python에서 이용

자바스크립트와 HTML파일 연결

<script src="./javascript명.js"/>

크롬에선 F12 (or command + option + i )에 개발자 도구 console에서 연습

배열

: 여러 개의 데이터 담을 수 있음

: [ ]안에 데이터를 ,로 각각의 데이터 구분

배열의 특징 (index)
: index란 배열에 있는 각 데이터의 위치값테이블 제목테이블 제목
```
: 주의! 배열은 0부터 시작

length 는 배열의 길이, 갯수를 의미(1부터 시작)
```

배열의 매서드 및 속성

// 배열 만들기

const blanks = []                            // 비어있는 배열

const numbers = [2, 10, 7, 3.3]              // 숫자들로 이루어진 배열

const classmates = ["철수", "영희", "훈이"]     // 문자들로 이루어진 배열

// 배열의 길이 구하기 _ length

classmates.length          // 3

// 배열의 값 꺼내기

classmates[0]              // "철수"

classmates[1]              // "영희"

// 배열의 맨 뒤에 추가하기 _ push

classmates.push("민지")     // ["철수", "영희", "훈이", "민지"]

// 배열의 맨 마지막 삭제하기 _ pop

classmates.pop()          // ["철수", "영희", "훈이"]

// 배열의 요소 정렬하기, 거꾸로 뒤집기 _ sort

classmates.sort()               // ["영희", "철수", "훈이"]

// 배열이 가지고있는 데이터 확인하기 _ includes

classmates.includes("철수")     // true

classmates.includes("영구")     // false

-----------------------------------------------------------

const classmates1 = ["철수", "영희", "훈이"]

const classmates2 = ["민지", "민수"]

// 배열 2개 연결하기 _ concat

classmates1.concat(classmates2**)     // ["철수", "영희", "훈이", "민지", "민수"]

// 배열을 문자로 만들기 _ join

classmates.join(', ')     // 철수, 영희, 훈이

classmates.join("와 ")    // 철수와 영희와 훈이

// 배열 분리하기 _ splice

const classmates = ["철수", "영희", "훈이"]

classmates.splice(0, 1)     // ["철수"]

// 배열에서 원하는 요소만 뽑아내기 _ filter

classmates.filter((data) => (data === "영희"))     // ["영희"]

classmates.filter((data) => (data !== "영희"))     // ["철수", "훈이"]

// 배열에서 모든 요소 변경하기 _ map

classmates.map((data) => (data + "어린이"))         // ["철수어린이", "영희어린이", "훈이어린이"]

문자열도 배열과 같이 매서드를 이용할 수 있고, index를 이용해 요소 가지고 올 수 있음

// 문자열(배열)

const classmates1 = "철수"

classmates1[0]     // "철"

classmates1[1]     // "수"

// 문자열 쪼개기

const classmates2 = "철수&영희"

classmates2.split("&")     // ["철수", "영희"]

// 문자열 양쪽 공백 제거하기

const classmates3 = " 철수 & Milk "

classmates3.trim()     // "철수 & Milk"

// 문자열 대소문자 변환하기

classmates3.toUpperCase()     // "철수 & MILK"

classmates3.toLowerCase()     // "철수 & milk"

// 문자열에 빈칸 채우기

const chulsooNumber = "1234"

chulsooNumber.padStart(10, "0")     // "0000001234"

chulsooNumber.padEnd(10, "0")       // "1234000000"

객체

: 키와 값으로 구성된 다양한 데이터를 하나의 객체로 묶음

: { } 를 이용하여 , 로 묶어줌

: 주로 성격이 다른 데이터를 객체에 저장함

// 객체 선언하기

const classmate = {

	name: "철수",

	age: 8,

        school: "꽃샘초등학교"
}

// 객체의 값 꺼내기

classmate.name        // 철수

classmate['name']     // 철수

// 객체의 키&값 삭제하기

delete classmate.name

classmate = {

	age:8,

	school: "꽃샘초등학교"

}

객체와 배열 함께 쓰기

// 객체들을 배열에 담아서 선언하기

const classmates = [
    
{ name: "철수", age: 8, school: "다람쥐초등학교" },

    { name: "영희", age: 8, school: "다람쥐초등학교" },

    { name: "훈이", age: 7, school: "토끼초등학교" }

]

// 배열안의 객체에서 뽑아내기

classmates[0].name     // 철수

classmates[0].age      // 8

classmates[0].school   // 다람쥐초등학교

// 배열 안의 객체에서 원하는 객체(8살 이상)만 뽑아내기

classmates.filter((data) => (data.age >= 8))

    // classmates = [

    //    { name: "철수", age: 8, school: "다람쥐초등학교" },

    //    { name: "영희", age: 8, school: "다람쥐초등학교" },

    // ]

3일차

JavaScript

데이터타입과 연산자

데이터 타입

문자열(String) : “”안에 적어주며, 안에 적힌 값들은 숫자여도 문자열로 취급
숫자(Number) : 모든 숫자를 실수로 처리
불린(Boolean) : true(참), false(거짓)으로 나타내는 자료형
undefined : 변수를 선언했지만 값이 할당되지 않았을 때 자바스크립트 엔진이 암묵적으로 초기화 하는 값
null : 의도적으로 값이 없음을 명시하기 위해 할당하는 값

: 확인하는 방법은 “typeof” 이용

: 데이터 타입 변경도 가능

Number("32") => 문자에서 숫자
String(24) => 숫자에서 문자
String(true) => 불린 true를 문자

연산자

산술연산자

: 덧셈

: 뺄셈

: 곱하기

/ : 나누기

% : 나머지 값

비교연산자

= = = : 같다

! = = : 같지 않다

< = : 작거나 같다

= : 크거나 같다

: 크다

< : 작다

논리연산자

&& : and 개념

|| : or 개념

! : 부정

조건문

if…else

: if가 참일때 명령문을 실행, 거짓일땐 else문을 실행

if( 조건1 ) { 

    // 조건1이 참이면 실행

} else if( 조건2 ) {

    // 조건1은 거짓, 조건2는 참이면 실행

} else {

    // 모두 거짓이면 실행

}

반복문

: 반복작업 해야할 때 사용

: for 문

for( 초기식; 조건식; 증감식 ){

    // 반복해서 실행할 코드 

}

초기식 : 변수의 선언
조건식 : 반복할 조건
증감식 : 변수의 증가 또는 감소
- 증감식의 i = i + 1 ⇒ i++

수학 객체

: 자바스크립트에서 수학과 관련된 기능과 속성을 가진 객체

//반올림

Math.round()

//올림

Math.ceil()

//버림

Math.floor()

//랜덤

Math.random()

//루트

Math.sqrt()

DOM

: Document Objet Model

: 웹브라우저가 정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을 자바스크립트 객체로 만들어 줌.

// HTML 파일

<html>

    <head></head>

    <body>

        <div id="apple">철수는 사과를 먹습니다.</div>

        <div id="banana">맹구는 바나나를 먹습니다.</div>

        <div class="food">영희는 피자를 먹습니다.</div>

	<div class="food">훈이는 치킨을 먹습니다.</div>

    </body>

</html>

// JAVASCRIPT 객체

document = {

    head: <head></head>,

    body: {

        children: [

            <div id="apple">철수는 사과를 먹습니다.</div>,

            <div id="banana">맹구는 바나나를 먹습니다.</div>,

            <div class="food">영희는 피자를 먹습니다.</div>,

            <div class="food">훈이는 치킨을 먹습니다.</div>

        ]

    }

}

// 객체로부터 정보 가져오기

console.log(document.body.children[0].id)            // apple

console.log(document.body.children[0].innerText)     // 철수는 사과를 먹습니다.

console.log(document.body.children[0].innerHTML)     // 철수는 사과를 먹습니다.

// ID로 HTML 태그값 가져오기

const text1 = document.getElementById('apple');      // <div id="apple">철수는 사과를 먹습니다.</div>

console.log(text1.innerHTML);     // 철수는 사과를 먹습니다.

// CLASS로 HTML 태그값들 가져오기

const text2 = document.getElement**s**ByClassName('food');

console.log(text2[**0**].innerHTML);     // 영희는 피자를 먹습니다.

console.log(text2[**1**].innerHTML);     // 훈이는 치킨을 먹습니다.

// 자바스크립트로 HTML 및 속성 변경하기

document.getElementById('apple').setAttribute('style', 'color: red;')

document.getElementById('banana').innerHTML = '맹구는 노란 바나나를 <strong>맛있게</strong> 먹습니다.'

// 		<html>

//			<body>

//				<div id="apple" style="color: red;">철수는 사과를 먹습니다.</div>

//   			<div id="banana">맹구는 노란 바나나를 **<strong>맛있게</strong>** 먹습니다.</div>

//				<div class="food">영희는 피자를 먹습니다.</div>

//				<div class="food">훈이는 치킨을 먹습니다.</div>

//			</body>

//		</html>

4일차

함수

: 직접 생성 가능

네모박스 : 함수(기능)
3, 5 : 입력데이터(매개변수=parameter)
8 : 결과데이터(반환데이터 =return값)

함수 작성 방법

함수의 선언식

function 함수이름(param1, param2, ...){

    // ...code here

    return 결과값
}

함수의 표현식(익명함수)

const 함수이름 = function(param1, param2, ...){

    // ...code here

    return 결과값
}

화살표 함수(실무함수)

const 함수이름 = ( param1, param2, ... ) => {
 
   // ...code here

    return 결과값

}

함수 실행 방법

: 함수 호출

내장함수

: 자바스크립트가 함수 선언을 미리 해놔서 호출만으로 사용할 수 있는 함수

1) alert

: 메세지를 지정할 수 있는 경고 대화 상자를 띄움

alert("")

2) setTimeout

: 시간 지연함수로 입력 시간이 만료된 후 함수나 지정한 코드를 실행

setTimeover(기능,시간)

//기능은 함수이고, 시간은 밀리세컨드 단위 1초=1000ms

3) setInterval

: 시간 반복함수로 입력한 시간마다 함수를 반복적으로 호출하거나 코드를 실행합니다.

setInterval(기능,시간)

시간지연함수와 시간반복함수는 중간에 강제로 종료가능

// 시간지연함수 강제종료

const time = setTimeout(기능, 시간)     // 시간지연함수를 임시로 변수/상수에 저장해놓습니다.

clearTimeout(time)                    // 저장했던 시간지연함수를 종료합니다.

// 시간반복함수 강제종료

const time = setInterval(기능, 시간)    // 시간반복함수를 임시로 변수/상수에 저장해놓습니다.

clearInterval(time)                   // 저장했던 **시간반복함수를 종료**합니다.

각각 각자의 함수 안에서 사용가능

템플릿

템플릿 리터럴

: 문자와 변수를 + 로 연결

:${} 도 가능

alert(`안녕하세요 ${name}고객님`)

5일차

이벤트 핸들러

: 지정된 HTML요소에서 지정된 타입의 event가 일어나면 브라우저가 핸드러 함수를 호출

: 함수는 event 처리 및 반응

: 이벤트가 발생하는 것을 감지하는 역할

// 해당 태그 클릭시 함수 실행

onclick = "자바스크립트함수()" 

// 해당 태그 변경시 함수 실행

onchange = "자바스크립트함수()"

// 해당 태그에서 벗어났을 때 함수 실행

onblur = "자바스크립트함수()"

// 해당 태그에 입력시 함수 실행

oninput = "자바스크립트함수()"

git/gitgub

전은평

`아는 만큼 보인다` 라는 명언을 좋아합니다. 많이 배워서 많은 걸 볼 수 있는 개발자가 되고 싶습니다.

베이스캠프 1주차 TIL

TIL

1주차

1일차

컴퓨터 기본지식

HTML(Hyper Text Markup Language)

태그(TAG)

빈태그(Self-Closing Tag)

이미지 & 동영상 태그

종속태그

HTML 기본 구조

CSS

CSS 선택자

signup css 예제

박스모델

박스모델 화면 표시 방법

정렬

Flex

자주 사용되는 flex 속성

position

2일차

JavaScript

변수와 상수

1) 선언(declaration)

2) 할당(definition)

3) 선언 + 할당

배열

객체

3일차

JavaScript

데이터타입과 연산자

데이터 타입

연산자

산술연산자

비교연산자

논리연산자

조건문

if…else

반복문

수학 객체

DOM

4일차

함수

함수 작성 방법

함수 실행 방법

내장함수

템플릿 리터럴

5일차

이벤트 핸들러

git/gitgub

4/5 TIL

오프라인 코드캠프 12일차 TIL

0개의 댓글