학습 언어

학습 내용

DOM

브라우저는 HTML 문서를 파싱하는 과정에서 DOM이라는 트리구조 형태의 객체를 생성하게 됩니다.
트리 구조란, 자료구조의 일종으로 여러개의 노드로 구성되어 있으며 하나의 부모가 여러개의 자식 노드를 가지게 되는 형태를 이야기합니다.

DOM Method

• document.getElementById()
  ⇒ Element Node의 id 속성을 체크해서 해당하는 Element를 참조해온다.
• document.getElementByClass()
  ⇒ Element Node의 class 속성을 체크해서 해당하는 Element를 참조해온다.
• document.querySelector()
  ⇒ 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다. id(”#”)를 입력하는 경우 id를 기반으로, class(”.”)를 입력하는 경우 class를 기반으로 참조
• document.querySelectorAll()
  ⇒ 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다. querySelector와 다르게 배열 형태로 모든 요소를 참조해온다.
• document.createElement()
  ⇒ 새로운 Node를 생성합니다. Node의 형태는 생성되지만 DOM에 직접 추가해주는 과정을 거치치 않으면 DOM에 속하지 않습니다.
• document.appendChild()
  ⇒ Element Node를 현재 DOM에 추가합니다. 이때의 document는 다른 Element가 될 수도 있습니다.

appendChild

addEventListener

스코프

전역 스코프, 지역 스코프

파란색 박스 : 전역 스코프

노란색 박스 : 지역 스코프

전역스코프 > 지역스코프

함수 스코프

함수 레벨 스코프란, 함수를 실행할 때 생겨나는 지역 스코프입니다.

위의 예시가 바로 함수 스코프에 의해 생성된 지역 스코프입니다.

함수 레벨 스코프는 함수를 실행할 때 생성되는, 함수를 기준으로 하는 스코프

블록 스코프

블록 레벨 스코프는 코드 블록에 의해서 생성되는 스코프입니다.
if문, for문, while문 등 중괄호를 사용해서 코드 블록을 작성하는 환경에서 생성이 되죠.

자바스크립트는 변수를 참조하는 코드를 만나게 됐을 때, 먼저 해당하는 블록 스코프 내에서 변수를 참조하고자 시도합니다.
이때 탐색한 블록 스코프 내에 해당 변수가 존재하지 않는 경우, 상위 스코프로 올라가 다시 탐색을 진행하게 되는데요.
이러한 과정을 스코프 체이닝이라 부릅니다.
그래서 if문에 의해서 생성된 블록 스코프 내에 a라는 변수가 없었음에도 불구하고 에러가 발생하지 않았던거죠.

호이스팅

호이스팅이란, 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 이야기합니다.

학습 언어

자바스크립트

학습 내용

반복문 

for문의 생김새

for(최초식; 조건식; 증감문){
	// 반복을 수행할 코드
}

• 최초식 : let i = 0
• 조건식 : i < 10
• 증감문 : i = i+1 는 i++ 로 대체 할 수 있습니다.

while문의 생김새

최초식
while( 조건식 ){
	// 반복을 수행할 코드
	증감식
}

• 최초식 : let i = 0
• 조건식 : i < 10
• 증감식 : i = i + 1
  
  

❗️while문 주의사항 ❗️
종료조건을 제대로 설정하지 않으면 무한반복됩니다.

for-of

for-of문은 배열에 주로 사용을 하게 됩니다.
반복문을 통해 배열의 요소에 접근하려면 그 인덱스 값으로 접근

const arr = [1, 2, 3, 4, 5]

for(let el of arr) {
    console.log(el)
}

for-of문은 위와 같이 작성합니다.

for-in

for-in문은 객체에서 사용하게 됩니다.

const obj = {
    name : "otter",
    gender : "male"
}

for(let key in obj) {
    console.log(key)
}

for-of와 마찬가지로 위 코드를 실행해보면
이번에는 obj 객체 프로퍼티들의 key가 담겨져 오는 것을 확인할 수 있습니다.

setInterval

setInterval() 함수는 반복 함수입니다.
소괄호 안에 넣어준 함수를 지정한 시간마다 반복해서 실행해 줍니다.

전달인자, 매개변수

변수의 참조 영역

자바스크립트의 함수, 변수 는 정의되어 있는 영역 안에서만 존재하게 됩니다.
그렇기 때문에 함수 안에서 선언된 변수는 그 밖에서 참조될 수가 없습니다.

위 사진의 confined 변수는 박스로 감싸진 해당 영역 내부에 속해 있기 때문에
박스 바깥에서 confined 변수를 참조하고 있는 console.log() 명령어는 해당 변수에 접근이 불가능합니다.

그래서 코드를 실행시키면 위와 같은 에러를 만나게 되죠.
에러 내용을 살펴보면 confined라는 변수가 정의되지 않았다 고 이야기합니다.
confined 변수는 함수의 영역 안에서만 존재하기 때문에 밖에서는 해당 변수가 존재조차 하지 않는 것이죠.
그래서 우리는 함수 내부에 존재하는 데이터를 return을 통해서 그 밖으로 건네줄 수가 있었습니다.

매개변수

함수는 데이터를 밖으로 건네주는 것 뿐만 아니라, 외부의 데이터를 받아온 후 가공, 혹은 로직을 수행하는 것도 가능합니다.
이때, 사용하게 되는 개념이 바로 매개변수입니다.
우리가 함수를 정의할 때는 매개변수라고 하는 함수 내부에서 사용할 변수를 선언해 줄 수 있습니다.

one, two는 우리가 paramDefine이라는 함수를 정의할 때, 함께 정의되는 매개변수 입니다.
우리가 함수 내부에서 변수를 선언했을 때처럼 매개변수는 해당 함수 내부에서만 존재 하게 됩니다.
그리고 매개변수 또한 하나의 변수이기 때문에 그 안에 담긴 데이터를 참조할 수도 있습니다.
위의 코드를 실행시키면 console.log() 명령어는 두개의 undefined를 출력하게 될겁니다.

전달인자

함수를 정의할 때, 매개변수를 함께 정의해줬다면 함수를 호출하는 과정에서 전달인자 를 건네줄 수 있습니다.

브라우저의 Web Storage

웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할 공간이 필요합니다.
웹 브라우저는 Web Storage라고 하는 저장소를 제공 하는데, seesionStorage 와 localStorage 를 활용할 수 있습니다.
두개의 storage는 공통점을 가지게 됩니다.
먼저 두 storage 모두 local 환경에 데이터를 저장 한다는 특징을 공통점으로 가집니다.
또 다른 공통점으로는 데이터가 key-value 형태로 저장 이 됩니다. 마치 객체와 같죠.
이때, key와 value는 모두 문자열 형태로 변환되어 저장이 되어야 합니다.
공통점이 있다면 차이점도 존재를 하겠죠.

sessionStorage

sesstionStorage는 데이터를 세션 단위로 저장합니다.
여기서 이야기하는 세션은 사용자가 페이지에 접속하는 순간부터 접속이 끊어지는 순간까지 를 이야기합니다.
즉, sessionStorage는 해당 페이지와 접속이 끊어지거나 브라우저를 종료하게 되면 해당하는 세션 저장소의 데이터를 영구히 삭제 해 버립니다. 휘발성 메모리인 것이죠.

localStorage

localStorage는 데이터를 도메인 단위로 저장이 되며, localStorage에 저장된 데이터는 도메인이 같다면 path가 다르더라도 서로 데이터를 공유 하게 됩니다.
또한, locaStorage는 비휘발성 메모리이기 때문에 저장된 데이터가 브라우저, pc를 종료하더라도 그대로 남아있게 되죠.
반영구적인 데이터여서 직접 Storage 데이터를 삭제할 때까지 존재합니다.
이러한 특징 때문에 페이지를 재방문 했을 때도 남아있어야 하는 사용자 개별 설정 등의 데이터를 저장하게 됩니다.

local storage 접근 방법

웹 브라우저는 sessionStorage와 localStorage를 가집니다.
Web Storage는 데이터를 저장하는 공간이죠.
그렇다면 데이터를 저장하는 방법과 해당 데이터를 참조하는 방법이 존재할 것입니다.
우리는 JavaScript를 명령어를 사용해서 localStorage에 데이터를 저장하고 참조하는 방법에 대해 알아볼겁니다.

localStorage.setItem()

localStorage는 window.localStorage로 접근할 수 있습니다.
그리고 localStorage의 앞에 적혀지는 window는 생략이 가능합니다.
localStorage에 접근했다면, 이제 데이터를 저장해야겠죠.
데이터를 저장할 때는 localStorage에 내장되어 있는 setItem이라는 메서드 를 사용하면 됩니다.

localStorage.setItem()

setItem 뒤에 있는 소괄호 안에 저장할 데이터를 넣어주면 됩니다.
Web Storage의 데이터는 key-value 형태 로 저장이 된다고 했었죠?
소괄호 안에 두개의 인자를 넣어주면 되는데, 첫번째 인자로 key 를, 두번째 인자로 value, 저장할 데이터를 담아주면 됩니다.

localStorage.setItem('data-key', 'data-value')

그렇게 하면 형식에 맞춰 key-value 형태로 데이터가 저장되죠.

데이터를 저장했다면, 그 데이터를 활용하기 위해 저장된 데이터를 확인하고 참조해올 수 있어야 겠죠.
먼저 저장된 localStorage 데이터는 개발자 도구 내에서 직접 확인할 수 있습니다.

❗️ localStorage 확인 경로

개발자 도구 ⇒ Application 탭 ⇒ >Local Storage 토글

해당 위치로 이동해, 토글을 열어 보면 우리가 저장한 데이터를 확인할 수 있는데요.
localStorage는 도메인 단위로 데이터가 저장되고 관리되기 때문에 현재 접속해 있는 도메인의 url을 클릭 해서 우리가 저장한 데이터를 확인할 수 있습니다.

localStorage.getItem()

localStorage에 저장된 데이터를 JavaScript에서 활용하기 위해서는 데이터를 꺼내와야겠죠.
아래의 명령어로 localStorage에 존재하는 데이터를 꺼내올 수 있습니다.

localStorage.getItem()

이때, 위의 소괄호 안에는 꺼내오고자 하는 데이터의 key를 적어주시면 됩니다.

localStorage.getItem(’data-key’)

데이터의 올바른 key를 적었다면, 그와 연결된 값을 가져오게 됩니다.

조건문과 Storage 데이터의 조합

localStorage에 저장되어 있는 데이터를 조건문과 결합하면, 사용자가 이전에 어떠한 동작을 수행했는지에 따라 다른 분기점을 만들어줄 수 있습니다.
예를 들어 웹 페이지의 타이머를 시작하는 순간 그 내용이 localStorage에 저장되도록 해주는겁니다.
그리고 페이지가 새로 로드될 때, 해당 내용과 관련된 데이터가 lcoalStorage에 저장되어 있는지를 체크해주면 사용자가 이전에 타이머를 시작했었는지 바로 확인이 가능

학습 언어 

학습 내용

함수(function)

함수 란 어떤 기능을 수행 하거나 계산을 수행할 수 있도록 하는 도구 

함수를 통해 우리가 원하는 기능을 만들어 필요한 곳에서 사용할 수 있습니다.

함수를 만들려면?

1. 아래의 그림에서 네모박스 가 함수(기능) 입니다
2. 상자로 들어가는 데이터 3, 5 는 입력데이터(매개변수= parameter) 라고 합니다.
3. 상자에서 반환되어 나오는 8 은 결과데이터(반환데이터= return 값) 라고 합니다.

함수의 호출

함수를 사용하기 위해서는 함수를 호출해주셔야 합니다.

function SayHi(){
    console.log("안녕하세요 여러분")
}

// 함수를 사용하기위한 호출
SayHi()

onclick

onclick 속성은 해당 속성을 부여받은 태그가 사용자에 의해 클릭 되었을 때, 할당되어 있는 수식, 혹은 코드를 실행합니다.

<head>
    <script>
        const btnFunc = function() {
            console.log("버튼이 눌렸어요!")
        }
    </script>
</head>
<body>
    <button onclick="btnFunc()">버튼</button>
</body>

querySelector (document.querySelector('id명'))

<script>

  const date = function () {

  const inputYear = console.log(document.querySelector('#a').value;

  const inputMonth = console.log(document.querySelector('#b').value;

  const inputDate = console.log(document.querySelector('#c').value)

};

console.log(inputYear, inputMonth, inputDate);

</script>

<input id="a">  // input : 1997

<input id="b"> // input : 08

<input id="c"> // input : 14

<button onclik="date()">버튼</button>

버튼 클릭스 input에 입력한 값이 콘솔에 출력됩니다.

// output : 2022 08 14

new Date

new Date()

new Date("2022-09-09")

(남은 시간) / 24                                 //output :남은 날짜

((전체 남은 초(sec) / 3600)) % 24    // output : 남은 시간

(남은 초(sec) / 60) % 60                 //output: 남은 분

함수의 표현식

const 함수이름 = function(param1, param2, ...){
	// ...code here
	return 결과값
}

 함수 표현식의 익명함수는 호이스팅의 영향을 받지 않습니다.

선언식보다는 표현식 사용을 권장 드립니다.

함수의 선언문

function 함수이름(param1, param2, ...){
    // ...code here
    return 결과값
}

화살표 함수

const 함수이름 = ( param1, param2, ... )=>{
    // ...code here
    return 결과값
}

❗️ 매개변수(parameter)와 return 값은 필수가 아닙니다.
→ 매개변수와 리턴값은 있어도 되고 없어도 되는 값이기 때문에 반드시 적어주실 필요는 없습니다.
상황에 따라 필요하실 때 적절히 적어주시면 됩니다.

원시타입과 참조 타입

사실 자바스크립트의 데이터타입은 크게 두가지 타입으로 나뉘게 됩니다.

바로 원시타입( Primitive type ) 과 참조타입( Refrence type ) 입니다.

원시타입의 종류

자바스크립트에서의 원시타입은 아래 7개 입니다.

• String
• Number
• Boolean
• Bigint
• undefined
• Symbol
• null
  
  

참조타입의 종류

참조타입의 종류는 위의 7종류를 제외한 나머지 모든 것이 참조 타입이며, 간단히 설명 드리면 참조타입은 객체타입 이다 라고 봐도 무방합니다.

원시타입의 특징

원시타입은 불변성 이라는 특징을 가집니다.

불변성이란 변하지 않는 속성인데, 말 그대로 데이터가 변하지 않는 속성입니다.

아래 예시에서 자세히 알아보도록 하겠습니다.

우리가 box라는 변수에 ‘abc’라는 문자열을 할당하면 이 문자열은 101이라는 주소를 가진 메모리에 저장이 됩니다.

이후, 제가 아래와 같이 box에 ‘def’를 재할당 했습니다.

그럼 ‘def’ 는 아까 101주소의 메모리에 저장되어 있는 ‘abc’를 바꾸는 것이 아닌 102주소를 가진 메모리에 ‘def’를 저장 한 후 box에 102번 주소를 가진 메모리를 다시 할당합니다.

이를 우리는 원시타입의 불변성이라고 부릅니다.

참조타입의 특징

참조타입의 특징은 눈치채신분도 계시겠지만 원시타입과 반대로 가변성 을 가지고 있습니다.

가변성은 불변성과 반대되는 속성을 가지고 있습니다.

즉, 101번 주소를 가지고 있던 메모리 값을 수정 할 수 있다는 뜻 입니다.

단, 참조타입에서 주의해야 할 점 이 있습니다. 아래에서 자세히 알아보도록 하겠습니다.

414 주소를 가진 메모리 에 객체의 정보가 저장되어있습니다.

이 메모리의 값은 참조타입의 특징 가변성 을 가지고 있습니다. 즉, 이 메모리의 주소는 참조만 해올 뿐 주소가 할당 되는 것이 아닙니다.

따라서 변화가 가능한 것 입니다.

하지만, 414번 주소를 할당한 201번 주소를 가진 메모리는 불변성을 지니고 있습니다.

201번 주소를 가진 메모리는 원시타입의 메모리 주소와 같은 원리를 가집니다.

쉽게 생각해서
객체의 껍데기 를 주머니,
객체의 안에 있는 데이터(property)들 을 공 이라고 하면

주머니는 바꿀 수 없지만 , 주머니 안의 공은 바꿀 수 있으며 심지어 삭제와 추가도 가능합니다.

소감

HTML, CSS, 자바스크립트 중 자바스크립트가 가장 생소하고 이해하기 어려운 것 같습니다.

수강하면서 함수를 이용할때 어떻게 사용하고 만들어야 하는지 정확히 이해해야 할 것 같습니다.

자바스크립트를 내용으로 스프린트를 진행하니 모든사람들의 코드가 다를 수 있다는 것을 한번더 느끼게 되는 것 같습니다. 

학습 언어

JavaScript

학습 내용

자바스크립트란? / 변수와 상수 / 데이터타입의 종류 / 산술연산자 / 배열, 객체의 method

자바스크립트(JavaScropt)란?

자바스크립트란, 몇줄의 코드만으로 웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어입니다.

변수와 상수란 무엇일까?

변수는 프로그래밍 세계에서 특정 데이터를 변수에 저장하고 호출하며 호출된 데이터를 정제할 수 있는 뜻입니다.

변수와 상수는 데이터를 담고, 꺼내 쓰는 '상자'라고 생각할 수 있습니다.

변수와 상수 자세히 알아보기 (키워드)

• 변수 (값이 변할 수 있음) : var , let
• 상수 (값이 변할 수 없음) : const

var : 재선언 O 재할당 O

let : 재선언X 재할당O

const : 재선언 X 재할당 X

1. 선언(declaration)

선언 은 변수의 이름을 알려주는 행위 라고 이해하시면 되며,

2. 할당(definition)

할당 이란 변수에 데이터를 담아주는 행위 입니다.

선언과 할당을 한번에!
선언과 할당을 한번에 할 수 있는 아주 편리한 방법이 있습니다.

       선언 + 할당
let result = 10+20
   선언부      할당부

‼️  자바스크립트의 등호(=)는 같다의 의미가 아닌 할당의 의미 입니다. ‼️

주의사항 :

1 ) 변수명은 동사가 아닌 명사, 첫글자는 숫자 사용 불가능

2 ) 자바스크립트의 예약어를 변수명으로 선언시 에러가 발생할 수 있습니다. (mdn 참고)

데이터 타입의 종류

String(문자열)

“” , ‘’ 안에 입력된 데이터는 문자열 데이터로 표시 됩니다.

Number(숫자)

1,2,10 과 같은 흔한 숫자 데이터 입니다.

산술연산자

1. 덧셈 : 1 + 2
2. 뺄셈 : 2 - 1
3. 곱셈 : 2 * 1
4. 나눗셈 : 2 / 1
5. 나머지 : 2 % 1

+ 를 제외한 나머지 산술연산자를 문자열과 사용했을때는 NaN으로 반환됩니다.

+ 를 문자열과 숫자타입으로 사용할 경우 혼용되어 반환됩니다. ex) console.log("100" + 100) = 100100

이외의 데이터 타입

• Boolean
• undefined
• null
• symbol
• Bigint
• Object

배열(Array) 

여러개의 데이터를 순서와 함께 저장하고 싶을때 사용 하는 기다란 저장 창고입니다.

let arr = ["여기는","우주","최강","코드","캠프"]
// index     0      1     2     3     4
// length    1      2     3     4     5   ->  따라서 arr.length = 5

// 인덱스 번호로 요소에 접근하기
makeArr[2] = "요소라고"
makeArr[3] = "합니다"

배열의 Method(메서드)

메서드는 어떠한 기능을 가지고 있는 명령어 이며, 배열에 내장되어 있는 기능이라고 보시면 됩니다.

array.push() : 배열의 가장 뒤의 데이터를 추가

let ranking = ["정훈","주은","시윤"]
ranking.push("원두")

// 결과
ranking = ["정훈","주은","시윤","원두"]

array.pop() : 배열의 가장 뒤의 데이터를 삭제

let ranking = ["정훈","주은","시윤"]
ranking.pop()

// 결과
ranking = ["정훈","주은"]

array.includes() : 특정 배열에 주어진 데이터가 포함되어있는지 확인

let ranking = ["정훈","주은","시윤"]
ranking.includes("정훈")

// 결과
true

array.indexOf() : 특정 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환 

*만일 찾을 수 없으면 -1을 반환 합니다.

let ranking = ["정훈","주은","시윤"]
ranking.indexOf("정훈")

// 결과
0

객체(object)

키(key)값을 통해 해당 데이터가 무엇에 대한 데이터인지 명시해줄 수 있습니다.

객체를 만들때는 중괄호: {} 를 이용해주시면 됩니다.

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

객체 프로퍼티(property)에 접근하기

Dot notation(점 표기법)

이 방법은 key값에 접근시, 점을 이용해서 접근 하는 방법입니다.

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

//Dot notation(점 표기법) 접근
userData.name = "이정훈"
userData.age = 85

Bracket notation(괄호 표기법)

이 방법은 key값에 접근시, 괄호[]를 이용해서 접근 하는 방법입니다.

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

//Bracket notation(괄호 표기법) 접근
userData["name"] = "이정훈"
userData["age"] = 85

❗️주의❗️
Bracket notation을 사용하실 때 “”를 붙여주시지 않으시면, 안의 key값이 아닌 변수로 인식됩니다.
key 값에 접근을 원하신다면 반드시 “”를 붙여주세요

객체(object) Method

Object.keys()

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

Object.keys(userData)
// 결과 
[ "name", "age", "hight", "company"]

Object.values()

let userData = {
	name:"이정훈",
	age:85,
	height:180,
	company:"코드공장"
}

Object.values(userData)
// 결과 
[ "이정훈", 85, 180, "코드공장"]

소감

베이스캠프 3주차가 시작되어 자바스크립트를 학습하였습니다.

아직 HTML CSS와는 다르게 홈페이지를 직접 디자인 하지는 않았지만, 선언, 할당 등 자바스크립트언어를 이용하여 컴퓨터에게 명령 하는 방법을 알게 되었습니다. 차후 심화된 부분도 활용하고 이해할 수 있게 기초를 잘 만들겠습니다.

학습언어

CSS

학습내용

flex와 grid의 차이점

flex

• 비교적 작은 단위의 레이아웃 구성에 적합
• 작엽 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합
• flex는 1차원적인 구조 를 가지고 있습니다.

grid

• 큰 규모의 레이아웃 구성에 적합
• 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있음
• 최신 기술이기때문에 모든 부라우저에서 지원하지 않는다는 단점이 있음

grid의 속성값

• display: grid를 이용해 grid가 적용된 요소는 다음과 같은 구조로 변경됩니다.
• grid-container : grid가 적용된 요소
  grid-item : grid가 적용된 요소의 자식 요소들
  **grid-line** : grid-item 사이의 경계를 의미합니다.
  grid-number : 해당 grid-line이 몇번째 line인지를 의미합니다.

• grid-template : grid의 행&열의 개수 및 크기를 지정할 수 있습니다.
•  

grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px

repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미가 됩니다.

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

위와 같은 형태로 사용이 가능하며, row는 행의 템플릿을, columns는 열의 템플릿을 지정합니다.

• grid-column & grid-row : grid-column 과 grid-row 는 grid-item에 줄 수 있는 속성입니다.

grid-column: 1 / 4;
grid-row: 2 / 3;

반응형 웹이란?

반응형 웹이란, 다양한 디바이스에서 접속했을 때
기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다.

미디어 쿼리 (@media screen and() {})

미디어 쿼리란 Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능입니다.
이 때, 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있습니다.

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

• @media : 미디어 쿼리를 사용한다는 의미입니다.
• screen : 미디어 타입입니다. 이 페이지가 디지털 화면, 즉 screen에 노출되었을 때 중괄호 안에 입력한 스타일 시트를 적용한다는 의미입니다.
• max-width: 500px : viewport 너비가 500px 이하일 경우 해당 스타일 시트를 적용한다는 의미입니다.
• and : screen, max-width 등 여러가지 미디어 쿼리 조건을 연결시켜 줄 수 있습니다. and로 연결한 모든 조건을 만족하는 경우에 해당 스타일 시트를 적용합니다.

breakPoint란?

breakPoint란 반응형 웹페이지의 작업 기준이 되는 중단점을 의미합니다.
간단하게 말해서, PC / Tablet / Mobile의 기준이 되는 규격 분기입니다.

가장 일반적으로 사용되는 breakPoint 분기

Mobile0 ~ 767px

상황에 따라 더 자세하게 나눌 수 있으며, 많이 나눌수록 더 좋은 서비스를 만들 수 있습니다.
그러나 개발 시간과 인건비가 증가하게 되므로 기획 단계에서 예산과 기간을 고려할 수 있습니다.

@media screen and (max-width: 767px) {
 /* mobile */
}

@media screen and (min-width: 768px) and (max-width:1023px) {
 /* tablet */
}

@media screen and (min-width: 1024px) and (max-width:1439px) {
/* PC */
}

반응형 웹에 자주 쓰이는 속성

max-width / max-height

요소의 최대 크기를 지정하는 속성입니다.
max-width을 사용하면 가로 규격을, max-height를 사용하면 세로 규격을 한정할 수 있습니다.

max-width : 1240px;
max-height : 100vh;

min-width / min-height

요소의 최소 크기를 지정하는 속성입니다.
min-width을 사용하면 가로 규격을, min-height를 사용하면 세로 규격을 한정할 수 있습니다.

min-width : 720px;
min-height : 30%;

max()

소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수입니다.
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있습니다.

height : max(320px, 20%)

min()

소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수입니다.
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있습니다.

width : min(1240px, 100%)

소감

오늘 CSS까지 베이스캠프 2주차가 마무리 되었습니다.
아직 스스로 많은 페이지를 만들어 보지 못하였지만, 페이지를 구상할때 무엇을 우선적으로 생각해야 하는지 생각하게 되는 것 같습니다. 아직은 생각한 그대로 구현이 되지 않지만...포기하지 않고 조금씩 성장할 수 있게 노력하겠습니다.

학습 언어

CSS

학습 내용

1. transform

transform 이란? :

대상이 되는 요소에 이동, 회전 확대/축소, 비틀기 등의 변형 효과를 줄 수 있다.

transform의 속성값

• translate(x, y) : 요소의 좌표를 움직일 수 있습니다. (단위 :px)
• scale(x, y) :각 축 방향으로 x, y 만큼 요소를 축소 혹은 확대 합니다. (단위 : 배율)
• skew(x, y) :요소를 기울여 마름모꼴처럼 만들어 줄 수 있습니다. (단위 : deg)
• rotate(n) : 요소를 n 만큼 회전시킵니다. (단위:deg)
• 중첩 적용 가능 ) transform: rotate(75deg) translateY(120px)

!! transition과 transfrom의 중첩 !!

예시 코드입니다.
.box #text1 {
transition: transform 0.4s ease-in-out 0.5s
}
.box:hover span {
transform:translateY(-20px);
}

2. animation 관련 속성들

• animation-name : 어떠한 keyframes를 요소에 적용할 것인지 지정합니다.
• animation-duration : 애니메이션을 한 번 재생하는데 걸리는 시간을 설정합니다.
• animation-direction :애니메이션 재생 방향을 정의합니다.
  normal : 정방향으로 재생합니다.
  reverse : 역방향으로 재생합니다.
  alternate : 정방향으로 재생합니다. (단, 정방향/역방향을 번갈아 재생합니다.)
  alternate-reverse : 역방향으로 재생합니다. (단, 역방향/정방향을 번갈아 재생합니다.)
• ainmation-iteration-count : 애니메이션 재생 횟수를 정의합니다.
  animation-iteration-count : infinite | 3
• animation-timing-function : 애니메이션 재생 패턴을 정의하며, transition-timing-function과 유사합니다.
  linear : 일정한 속도로 변화한다.
  ease : 시작할 때에는 빨라지다 느려진다.
  ease-in : 천천히 시작했다가, 속도를 높여 끝난다.
  ease-out : 빠른 속도로 시작했다가, 천천히 끝난다.
  * ease-in-out : 천천히 시작했다가, 정상속도가 됐다가, 빠르게 끝난다.
• animation-delay : 애니메이션시작을 얼마나 지연할 지 설정합니다.

3. animation 단축속성

애니메이션 카테고리에 속한 속성들도 단축 속성으로 모아서 지정 해줄 수 있습니다.
만일 순서가 바뀔 경우 , 오류가 발생 하거나 의도와 다른 결과가 도출 될 수 있으니 단축 속성을 사용하실 때는 순서에 유의하시길 바랍니다.

4. 소감

오늘은 transition / transform / animation 을 활용하여 실습을 진행하였습니다.
기존에 표현하지 못했던 생동감있는 효과들을 줄 수 있어 재미있었습니다. 실습 내용을 혼자 진행하면서 생각하는 효과를 적용 할 수 있게 훈련하겠습니다.

학습 언어

CSS

학습 내용

1. Cascading 원칙

2. 배경

3. 색상

4. 단위

5. 단위 심화

6. position

7. transition

1. CSS (Cascading Style Sheet)

1) 중요도 순서

'인라인 스타일 CSS' > 'style 요소 안에 있는 CSS' > 'link 로 연결한 CSS 파일' > '사용자 스타일 시트' > '브라우저 스타일 시트'

2) 구체성 (명시도)

전체 선택자 < 태그 선택자 < 클래스 선택자 < id 선택자
(가장 중요한 태그를 { color: red; !important } 를 사용해서 1순위로 선언 할 수 있음

3) 선언 순서

Cascading 모양처럼 가장 아래에(나중에) 선언된 것이 우선순위로 선택됩니다.

2.배경

1) background-color
2) background-image : url(“이미지경로”)
- 요소의 배경 이미지를 한 개, 혹은 여러 개 지정하며, 그라데이션도 지정이 가능합니다.
- background-image : linear-gradient(방향(to left), 시작 색상, 종료 색상)

- 이미지와 그라데이션 모두 “ , “를 사용하여 중복 적용 가능합니다.

3) background-position : top right / 50px 150px / center
- 요소의 배경 이미지의 위치를 지정한다.

4) background-repeat : repeat / no-repeat
- 요소의 배경 이미지의 반복 여부, 반복 방향을 지정합니다.

5) background-size : auto (기본값) / cover / contain / 200px 160px
- 요소의 배경 이미지의 크기를 지정합니다.

6) background-attachment : scroll(기본값) / fixed / local
-배경 이미지의 스크롤 여부를 지정합니다.

7) background 단축 속성

8. object-fit :fill (기본값) / cover / contain / none
-<img>나 <video> 등 대체 요소의 내용이 지정된 너비와 높이에 맞춰지는 방식을 지정합니다.

9. object-position : center top; / 100px 50px; /
-<img>나 <video> 등 대체 요소의 콘텐츠 정렬 방식을 지정합니다.

3.색상

CSS 색상 표기 방법 3가지
1. color : red;
2. color :#FFFFFF;
3. rgb(0,0,0) / rgba(0,0,0,0)
rgb / rgba
a -> 투명도 (0~1 소수점)

• 투명도 지정
  opacity : 0~1 (요소의 불투명도 지정)

4.단위

vw / vh
요소의 규격을 뷰포트 (viewPort)의 너비값과 높이값에 비례하여 결정합니다.

5.단위 심화

calc()
괄호 안의 사칙 연산을 수행한 결과를 속성 값으로 사용한다.
Width : calc(2*100px);
덧셈과 뺼셈을 할때에는 반드시 앞,뒤에 공백이 필요합니다. (공백이 없으면 에러 발생)

6. position:static / relative / absolute / fixed / sticky

position 이란? :

HTML 요소가 배치되는 방식을 결정하는 속성
top / left / bottom / right 방향 기준으로 요소의 좌표값을 변경한다.

position의 속성값

포지션이라는 속성에는 총 다섯가지 속성값을 줄 수 있습니다.

• static(기본값) : 요소를 문서상 원래 있어야 하는 위치에 배치한다. (top /left /bottom / right 적용 불가)
• relative :원래 있던 자리를 기준으로 요소의 위치를 조정 할 수 있다.
• absolute : 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
  (절대 좌표는 relative가 적용된 부모 요소이며, relative 적용된 부모가 없을 경우 body 전체를 기준으로 합니다.)
  
• fixed :스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 설정할 수 있습니다.
• sticky : 요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정됩니다. (기준 : 부모요소의 좌표)
• z-index : 여러개의 요소가 겹쳐져 있을 때, 무엇이 앞으로 나올지 결정하는 속성 (1~9990)

7. transition

CSS 속성 변화의 사이를 부드럽게 바꿔주는 역할을 합니다.

• transition-property : 어떠한 속성에 transition을 적용할 것인지 지정한다.
• transition-duration: transition에 걸리는 시간을 지정한다.
• transition-timing-function :
  linear : 일정한 속도로 변화한다.
  ease : 시작할 때에는 빨라지다 느려진다.
  ease-in : 천천히 시작했다가, 속도를 높여 끝난다.
  ease-out : 빠른 속도로 시작했다가, 천천히 끝난다.
  * ease-in-out : 천천히 시작했다가, 정상속도가 됐다가, 빠르게 끝난다.
• transition-delay : transition 요청을 받은 후, 실제로 실행되기까지 기다려야하는 시간의 양을 지정한다.
• transition 단축 속성: color 0.4s ease-in-out 1s ( 단축 속성 순서 주의★ )

★주의점★ :
-transition 자체는 :hover가 아닌 변화가 필요한 태그 자체에 넣어 사용해야 합니다.
-변화의 순서를 정하고 싶다면 " , " 를 사용하여 두가지 속성을 주고 delay 차이를 주어 순서를 정할 수 있습니다.

ex) delay 속성을 이용하여 색상 변화 후 width 증가
.class {
transition : background-color 0.3s ease-in-out, width 0.3s ease-in-out 0.5s
}
.class:hover {
background-color : red;
width : 250px
}

소감

position를 이용해 태그의 위치를 배치할 수 있었습니다. 또한 transition을 활용한 애니메이션 효과도 학습하였습니다.
속성값들이 많지만 하나씩 사용해보니 금방 익숙해지는 것 같습니다. 까먹더라도 내가 무엇을 까먹었는지 알고 찾아 볼 수 있을 것 같습니다.

학습 언어

CSS

학습 내용

1. 선택자

2. flex 레이아웃

3. 웹 폰트 사용 방법

4. 폰트

5. 단위

1. 선택자 

가상 클래스 선택자 / 가상 요소 선택자 / 형제 요소 선택자

1) 가상 클래스 선택자

1.first-child / first-of-type

first-child 와 first-of-type

first-child의 경우 부모의 첫번째 자식 요소와 CSS 선택자가 동일해야 적용됩니다.

부모의 첫번째 자식이 아닌 첫번째 태그에 CSS에 적용하기 위해서는 first-of-type를 사용해야합니다. 

last-child 와 last-of-type / nth-child() 와 nth-of-type() 도 동일합니다.

* nth-child(n+숫자) 를 입력할 경우 n번째부터 '숫자'번째 까지 효과 적용합니다.

.container p:**nth-of-tpye(3)**{
	color : red;
}

2. :active

**활성화된 요소를 선택**하는 가상 클래스 선택자입니다.

❗️ 활성화 된 요소란 버튼등을 클릭해서 요소의 동작이 활성화 되어있는 상태를 뜻합니다.

3. :focus

**focus를 받고있는 입력창들의 요소를 선택**하는 가상 클래스 선택자입니다.

❗️focus를 받고 있는 요소란 입력창의 커서가 활성화 되어있는 요소를 뜻합니다.

4. :visited

**사용자가 방문한 적 있는 링크를 선택**하는가상 클래스 선택자입니다.

❗️ 방문한 적 있는 링크는 말 그대로 링크를 눌러 해당 경로를 방문한 기록이 브라우저 상에 남아 있는 링크를 말합니다. 방문한 적이 있을 경우에는 기본적으로 보라색으로 표시합니다.

2) 가상 요소 선택자

:before , :after

<!-- 가상요소 선택자 사용시 html-->

<div class="box1">
 나는 박스1입니다.
</div>

.box1{
    width : 200px;
    height: 300px;
    background-color: yellow;
}
.box1:after{
    content:"나는 박스2입니다.";
    display: block;
    background-color: blue;
}

3) 형제 요소 선택자

A ~ B {
	property : value
}                                                 A와 같은 부모를 가지고 있는 형제 요소들 중 B만을 선택할 수 있습니다.

.text ~ span {
	background : red
}

2. flex 레이아웃 

1) flex-direction

2) justify-content

3) align-items

4) flex-wrap : flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것 인지 결정 (기본값 : nowrap)

5) align-content 

6) flex-flow (flex-direction과 flex-wrap의 단축 속성)

7) flex-item ; flex가 적용된 item들의 순서나 사이즈를 조절 할 수 있습니다.

flex-item 속성order : item의 순서를 지정합니다.flex-basis : item의 기본사이즈를 지정합니다.flex-shrink : 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소됩니다.flex-grow : flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.위의 속성 이외에도 flex-item에는 여러가지의 속성이 있습니다.

3. 웹 폰트 사용 방법

4. 폰트 관련 속성 _ 20강

1. font-size

2. font-weight

3. text-decoration

4. color

5. line-height : 텍스트의 행간을 설정

6. letter-spacing : 텍스트의 자간을 설정합니다.

7. word-spacing : 텍스트의 단어 간 간격을 지정합니다.

8. text-align : 블록요소나 표안에서 텍스트의 가로 정렬방식을 지정합니다.

9. vertical-align : 인라인 요소나 표안에서 텍스트의 세로 정렬 방식을 지정합니다.

10. text-indent : 텍스트의 들여쓰기를 설정합니다.

11. text-transform: 영문 텍스트의 대소문자를 바꿀 수 있습니다.

12. word-break : 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정합니다.

13. overflow-wrap : 단어가 콘텐츠 박스 영역 밖으로 넘쳤을때, 줄바꿈 여부를 설정합니다.

14. overflow : 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때 어떤 방식으로 보여줄 지 설정합니다.

15. text-overflow : 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기 할 것인지 설정합니다.

5. 단위

1.절대 단위

외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위 (px, pt, cm, m, ms 등)

px = 화소 ( 디지털 화면은 수많은 작은 네모들로 구성이 되어있으며, 이 네모 한 칸이 1px입니다. )

2. 상대 단위

외부 요인의 영향을 받아 유동적인 값을 지니는 단위 (%, rem, em 등)

1) %

• 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용합니다.

2) em

• 스타일 지정 요소의 font-size 속성값에 비례하여 값을 결정합니다. (부모가 아닌 본인 font-size 속성값에 비례)
• /* font-size : 16px 인 경우 */ 1em => 16 * 1 = 16px 0.8em => 16 * 0.8 = 12.8px 3em => 16 * 3 = 48px

3) rem

• 최상위 html 요소의 font-size속성 값에 비례하여 값을 결정합니다.
• /* font-size : 16px 인 경우 */ 1rem => 16 * 1 = 16px 0.8rem => 16 * 0.8 = 12.8px 3rem => 16 * 3 = 48px

폰트 관련 속성 디테일

1. font-size

2. font-weight

3. text-decoration : 텍스트에 장식용 선을 추가합니다.

text-decoration: underline | overline | line-through | none

4. color

/* rgb색상 이용시 */
color : rgb(0,0,0)

5. line-height : 텍스트의 행간을 설정

6. letter-spacing : 텍스트의 자간을 설정합니다.

7. word-spacing : 텍스트의 단어 간 간격을 지정합니다.

8. text-align : 블록요소나 표안에서 텍스트의 가로 정렬방식을 지정합니다.

*justify를 이용해서 띄어쓰기 구격을 변경하여 끝을 맞춰 줄 수 있습니다.

9. vertical-align : 인라인 요소나 표안에서 텍스트의 세로 정렬 방식을 지정합니다.

10. text-indent : 텍스트의 들여쓰기를 설정합니다. (단위 :px, %)

11. text-transform: 영문 텍스트의 대소문자를 바꿀 수 있습니다.

12. word-break : 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정합니다.

13. overflow-wrap : 단어가 콘텐츠 박스 영역 밖으로 넘쳤을때, 줄바꿈 여부를 설정합니다.

14. overflow : 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때 어떤 방식으로 보여줄 지 설정합니다.

15. text-overflow : 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기 할 것인지 설정합니다.

text-overflow: clip | ellipsis

❗️ text-overflow를 적용하기 전 선행 조건

1. white-space : nowrap;
2. overflow : hidden;

overflow-wrap vs word-break

-> 언뜻 보기에 두 속성은 비슷한 역할을 하는 것 같습니다. 어떤 차이점이 있을 까요?

break-all을 사용하는 word-break의 경에는 모든 단어를 음절 단위로 쪼개게 됩니다. 따라서 예시와 같은 문장의 경우엔 오히려 문단을 읽기가 불편해집니다.

반면에 break-word를 사용하는 overflow-wrap같은 경우에는 사용자가 문장을 읽기 편하도록 띄어쓰기 기준으로 줄바꿈을 합니다. 단어가 길어서 content 영역 밖으로 넘칠때에만 단어 중간에 줄바꿈을 하게 됩니다. 따라서 가독성이 좋겠죠?

소감

학습언어

CSS

학습 내용

CSS

선택자

(태그 선택자 / id 선택자 / class 선택자 / 자손 선택자 / 다중 선택자 / 전체 선택자 / 그룹 선택자 / 가상 선택자)

1. 태그 선택자

/* 태그 선택자 사용방법 */
태그 {
    property : property value;
}

2. id 선택자

#id {
    property : property value;
}

3. class 선택자

.class {
    property : property value;
}

4. 자손 선택자 (공백으로 연결)

/* 자손 선택자 사용예시 - .box 안에 있는 #title을 선택한다. */
.box #title {
    color : red
}

5. 다중 선택자 (공백이 없으며 중첩된 선택자들을 모두 만족하는 요소를 선택합니다)

/* 다중 선택자 사용방법 */
선택자1선택자2 {
    속성 : 속성값
}

6. 전체 선택자

*{
   property : property value
}

7. 그룹 선택자

/* 그룹 선택자를 이용해서 한번에 처리 */
h2, p, div {
	color : blue
}

8. 가상 선택자
가상 클래스는 선택자 뒤에 콜론을 찍은 후 적어주면 됩니다.
선택자:가상클래스{ 속성 : 속성값 } 이런식으로 적어주시면 되며, 아래 예시를 통해 조금 더 자세히 알아보도록 하겠습니다.

.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; }

font 기본속성

font-size : 글자 사이즈
font-weight : 글자 두께
font-style : 글자 기울임
text-decoration : 글자 꾸밈(밑줄, 취소선 등)
color (글자 색)

css 레이아웃의 흐름

float -> flex -> grid

* Float는 *반응형 웹에 적합하지 않기 때문에 거의 사용하지 않음
❗️ 반응형 웹이란?
모바일, 태블릿, 데스크탑 PC 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지
flex와 grid를 상황에 따라 혼용하여 사용

float 란 ?

HTML 요소를 일반적인 흐름(normal flow)으로부터 벗어나서 특정한 컨테이너의 좌측 혹은 우측을 감싸는 형태로 강제 배치할 수 있도록 도와주는 속성입니다.

• float: none (기본값)
• float: left
• float: right

clear

float가 적용된 요소에 추가로 줄 수 있는 속성으로, float의 영향력을 해당 요소에 한해 해제합니다.

• clear: none (기본값)
• clear: left
• clear: right
• clear: both

clearfix

<div class=clearfix></div> 로 float 속성 정리를 위한 태그
(정리를 원하는 태그의 형제 태그로 넣어줘야합니다.)

소감

CSS를 본격적으로 시작하였습니다.
선택자를 활용하여 모든 태그에 class를 지정하지 않아도 원하는 태그에 CSS를 적용 할 수 있었습니다.
또한 float에 대한 이해와 flex와 차이점에 대해서 학습하였습니다. 강의에서 말씀하신 것처럼 flex가 확실히 사용하기 간편한 것 같습니다.

학습언어

HTML / CSS / JavaScript

학습 내용

HTML / CSS

싸이월드 만들기 5탄

Final 과제

JavaScript

함수 : 원하는 코드를 하나의 기능으로 구현
(선언식, 표현식, *화살표 함수)
내장 함수 : 자바스크립트에서 기본적으로 제공하는 함수
( 시간 지연 함수 / 시간 반복 함수 ) - 사용 빈도가 높음
이벤트 감지 학습 내용
-일정 단어 숫자 이상이되면 다음으로 포커스
-일정 input text가 모두 입력된 후 버튼 활성화

git / github

git : 버전관리 시스템
1. 누가, 언제, 어떤 파일을 저장하였는가??
2. 특정 시점으로 소스코드 복원이 가능한가??
* 여러 사람이 데이터를 관리할때 생성 및 수정, 저장을 확인 할 수 있게 하는 분산 버전관리 시스템
github : git을 온라인으로 관리할 수 있는 클라우드

소감

한 주를 마무리하며 Final 과제를 진행했지만 아직 부족한 점이 있는 것 같습니다.
남은 2주 동안 HTML / CSS / JavaScript의 기초를 탄탄하게 채울 수 있게 더욱 열심히 공부하겠습니다.