20230307

1. 3주간의 학습 중 1,2주차 복습

   1주차 : PRECAMP ( 1 ~ 5 )

   2주차 : CSS ( 1 ~ 5 )

2. 앞으로의 다짐과. 각오

PRECAMP

• 싸이월드 메인 홈

• 싸이월드 게임

• 싸이월드 주크박스

• 타이머

• 회원가입

CSS

• 일기장 만들기

• 나의 쇼핑몰

PRECAMP Day 1

VSCode를 설치, HTML의 기본적인 내용을 배우고 다양한 HTML태그를 배웠다.

<background-image:url(/경로)>

블록요소, 인라인 요소의 개념

블록 요소는 페이지의 가로 너비 전체를 차지하고 인라인 요소는 자신의 크기만큼만 차지하는 요소

h1, div, p태그는 보통 블록 요소, span input a button label 태그는 인라인요소

종속태그

select, option 태그, ol li 태그, table, th, tr, td 태그

HTML 태그의 형태 - 박스모델

보더박스, 컨텐츠 박스와 함께 마진(밖으로) 패딩(안으로)

정렬

flex 속성

Precamp Day2

JS의 기본적인 내용을 배우기 시작.

변수와 상수란?

let, var, const 의 차이?

선언과 할당?

배열이란?

배열의 메소드

arr.length

arr[i]

arr.push()

arr.pop()

arr.includes(’’) // boolean

arr1.concat(arr2)

arr.join(’,’) 배열을 문자로 만들기

arr.splice

arr.filter

arr.map((data)⇒(data+’’~’’)) 모든 요소 변경하기

객체란?

키와 값?

객체를 배열에 담기?

PRECAMP Day3

데이터의 종류 ? 데이터 타입, 숫자, 문자, 불린

undefined, null?

Number(”35”), String(25) 는 무슨 작업?

산술연산자? %?

비교 연산자

조건문?

반복문?

수학 객체

• 최대, 최소값 Math.max()

• 반올림 올림 버림 Math.round, ceil, floor

• 랜덤, 루트

** 0.002345 일 때 002345 를 출력하게 하는 방법?

const num = Math.random()

const token = Math.floor(number*1000000)

const paddedTokien = string(token).padStart(6,”0”)

DOM이란? HTML파일을 자바스크립트 객체로 만들어 준다

** 휴대폰인증번호, 싸이월드 게임

PRECAMP Day 4

함수 만들기, 매개변수, 결과

선언식, 표현식, 화살표 함수 - 호이스팅의 영향을 받는 익명함수는 ? 선언식

타이머 만들기

alert(” “)

setTimeout(기능,시간) 지연함수, 시간 만료 후 함수나 지정 코드 실행

setInterval(기능,시간) 시간 반복함수, 시간마다 반복호출or 코드 실행

let timer = 180

setInterval(function(){

timer = timer - 1

const minutes = Math.floor(timer / 60)

const seconds = timer - minutes*60

console. log(minutes + “ : “ + seconds)
}, 1000)

지연함수, 반복함수의 종료

// 시간지연함수 강제종료
const time = setTimeout(기능, 시간)     // 시간지연함수를 임시로 변수/상수에 저장해놓습니다.
clearTimeout(time)                    // 저장했던 시간지연함수를 종료합니다.

// 시간반복함수 강제종료
const time = setInterval(기능, 시간)    // 시간반복함수를 임시로 변수/상수에 저장해놓습니다.
clearInterval(time)                   // 저장했던 **시간반복함수를 종료**합니다.

문자열과 변수를 잇는 방법

• or 백틱

console.log(`오늘은 ${year}년 ${month}월 ${date}일 입니다.`)
console.log(`오늘은 ${hours}시 ${minutes}분 ${seconds}초 입니다.`)

PRECAMP Last Day

프리캠프의 마지막 날

이벤트핸들러 함수 ?

onclick ?

onchange 해당 태그가 변경되었을 때 input type = “text” onchange=func()

onblur 해당 태그에서 벗어났을 때

싸이월드, 회원가입FINAL 에 적용된 로직을 생각해보자

깃헙 다시 제대로 연동할 필요성이 있다

CSS Day 1

선택자, 선언 ?

태그, Id(#), class(.) 선택자

전체 선택자(*)

그룹 선택자? h2,p,div { }

가상 클래스 선택자

.some-box:hover{ background-color: red; }
.container-boxs:first-child{ margin-left: 0; }
  - 형제 요소 중 첫번째 요소 선택
.container-boxs:last-child{ margin-right: 0; }
.contentsBox:nth-child(n){ color: red; }
 - 모든 형제 요소 중 n번째 요소
	:first-of-type 형제 요소 중 자신의 유형과 일치하는 젤 첫요소
	:nth-of-type(n) 형제 요소 중 특정 형제의 n번째 요소 선택
	:active 활성화된 요소 선택
	:focus focus받고 있는 입력창들의 요소 선택(커서 활성화)
	:visited 방문한 적 있는 링크

선언 = 속성, 속성값?

부모 선택자, 자손 선택자의 사용?

.box #title ? 박스 클래스 안의 타이틀 아이디

다중 선택자? 여러개의 선택자를 공백 없이 연결 .box#title

(box이면서 동시에 아이디가 title인 요소)

font-size/weight/style(기울임여부)/decoration/color

박스모델(패딩,테두리,마진,내용)

box-sizing?

인라인, 블록 요소?

레이아웃 시스템의 변화 Float → Flex → Grid

flex-direction 이 row 일 때?

column 일 때?

position ? flex 에 종속되지 않고 박스를 개별적으로 위치

*** 기준이 되는 포지션이 있어야 함

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

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

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

나만의일기장에 적용된 로직을 생각해보자

CSS Day 2

가상 선택자,

가상 요소 선택자?

:before, :after html 요소 수정 X CSS만으로 가상 요소 추가

.box1:after{
    content:"나는 박스2입니다."; 인위적으로 내용 추가 필요
    display: block;
    background-color: blue;
}

형제 요소 선택자

A~B{} A와 같은 부모 가지고 있는 형제 요소들 중 B선택

flex-wrap ? no wrap(기본값) 가로 사이즈를 넘겼을 때?

이때, align-items? align-content?

flex-item의 속성

order

flex-basis? item의 기본 사이즈 지정

f-shrink? 설정된 값에 따라 컨테이너의 요소 내부 아이템 요소의 크기 축소

f-grow ? 아이템 요소가 컨테이너 요소 내부에서 할당 가능한 공간비율 선언

상속? 부모 요소에 지정한 속성값 - 자식에게도 상속해 적용

상속되는 속성? color, font-family, font-size …

font-family : “폰트이름”,”폰트이름2”,”폰트이름3

되지 않는 속성? padding, margin, border …

웹폰트 - @font-face or @import 이용

vertical-align? 인라인요소나 표 안에서 텍스트의 세로 정렬 방식 top/middle/bottom

text-indent? 들여쓰기 설정(%)

word-break 텍스트가 콘텐츠박스 밖으로 넘겼을 때, keep-all or break-all

overflow-wrap 단어가 넘쳤을 때 줄바꿈 여부 normal or break-word

text-overflow 줄바꿈 안할 때 요소 밖으로 넘치는 text 표기 clip, ellipsis

Cascading 우선 순위 규칙

절대 단위, 상대 단위?

절대 단위 px pt

상대 단위

%, em(폰트사이즈 비례) rem(최상위html요소의 폰트사이즈에 비례)

vw/vh

CSS Day 3

Cascading? 중요도 - 구체성 - 선언 순서(나중게 우선)

!important

중요도 : 인라인스타일 CSS - style요소 안의 CSS - link파일 - 사용자시트 - 브라우저

구체성 : 상속<전체선택자<태그선택자<클래스,가상선택자 <ID

요소의 배경 지정 속성

bg-color,image

이미지 중첩도 가능

background-image: url("이미지 경로") , url("이미지 경로2")

그라데이션 배경 -image : linear-gradient(방향,시작색,종료색)

bg-position 배경 이미지의 위치 지정

center top right left bottom center 등 조합, x축y축 수치 직접 입력

bg-repeat? 반복 여부와 반복 방향

bg-size? cover / auto / contain / 직접 픽셀 지정

bg-attachment ? 스크롤 여부 지정 fixed, scroll(기본값), local

/* background : color imageUrl repeat position/size attachment */
background : red url("이미지 경로") no-repeat center/cover fixed

object-fit? cover / fill(기) / contain / none

obj-position? 정렬 방식

색상표기 ? 헥스코드 ,알지비, 알지비에이

css에서의 함수 사용 ? Calc()

position? 배치 방식

• static, relative, absolute, fixed, sticky

static(기본값) 원래 있어야 하는 위치 top, left,bottom,right 사용 불가

relative 원래 있던 자리 기준으로 요소 위치 조정(탑레프트 사용가능)

absolutely 절대 좌표 기준(rel;없을시 바디)으로 조정 (탑레프트 사용가능)

fixed 뷰포트 기준 요소 위치 조정

sticky 부모 요소 좌표 기준 조정(스크롤 내려갈시)

여러 개 요소 겹칠 때? z-index (xy+z축)

transition: color 0.4s ease-in-out 1s

            속성 duration(트랜지션에 걸리는 시간) 패턴 딜레이(실행까지)

CSS Day 4

transform ? 이동, 회전 확대/축소 , 비틀기 (cf transition)

여러 변환 함수 = 속성값

translate(x,y) 좌표 움직이기

translateX

scale(x,y)

skew

rotate(350deg)

transform 중첩 적용 가능

• transition ⇒ 다채로운 애니메이션 효과 만들 수 있다.

@keyframes 애니메이션이름 {
	from {
		left : 0;
	}
	to{
		left : 200px;
	}
}
from to 대신 % 활용도 가능

animation-name/duration/direction(alternate/normal/reverse/alternate-reverse)/iteration-count/timing-function/delay

CSS Last Day

GRID 레이아웃 (2차원 구조) - row, column 동시

grid - container?

grid - item ?

grid - line ?

grid - number ? 몇번째 그리드라인인지 구분

grid - template ? grid의 행,열 개수 및 크기기 지정

ex. grid-template-rows : 1fr 2fr 200px

fr? 비율 단위

repeat() ? grid-template-columns: repeat(4, 1fr);

grid-column, -row ? 1/4 2/3 일 때? 얼마나 차지할지

flex&grid 비교 ?

반응형 웹?

미디어 쿼리?

@media screen and (max-width: 500px) {
	/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}

screen?

breakPoint(중단점) 분기?

0~767px 768~1023px 1024~1439px 1440px~

나만의쇼핑몰에 적용된 로직, 반응형 웹 만들기,

애니메이션 적용 코딩을 되짚어보자