TurtleHwan.log

4. javascript 심화

Tue, 03 Oct 2023 15:26:10 GMT

노마드코더 JS 기초 강의 들으며 TODO LIST 만들어 보기!
결과물

html에서 js를 불러오는 법

가 끝난 후에
이전에

template literals with use backtick(`) (ES6)

backtick(`) 문자를 사용해서 줄바꿈을 쉽게 할 수 있으며, 수식과 문자열을 한꺼번에 표현 가능(표현식 삽입)하다.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

//줄바꿈이 자동으로 되며, 수식의 결과를 $로 나타낼 수 있다.

JS DOM functions

JS에서도 CSS 처럼 HTML element를 선택하고, 변형할 수 있다.
JS에서 HTML element에 접근하는 방법은 document를 쓰는 것이다.
document.get... 으로 여러 element를 가져올 수 있다.
이 가져온 객체를 DOM (document object module) 이라 부른다.

JS는 모든 HTML element를 가져온 후, DOM객체로 바꿈.

const title = document.getElementById("title");
title.innerHTML = "hi!!"

//.innerHTML 사용으로 HTML 문서에서 작성했던 title을 바꿀 수 있다!!


## Modifying the DOM with JS
- `console.dir(document)` 로 무엇을 할 수 있는지 확인! (사용 가능한 JS 객체들 확인 가능하다)
- `document.querySelector("선택자")` CSS 선택자와 일치하는 노드의 첫 번째 자식 반환.
- `DOM 객체.style.colors = 'red'` 이 명령어로 색을 수정 가능!


## Events and event handlers
* JS는 이벤트와 반응하기 위해 만들어짐.

```jsx
function handleResize(event) {
    console.log(event);   //event 객체를 호출함! (timestamp, path 등 포함..)
    console.log("resized");
}
window.addEventListener("resize", handleResize);
//window.addEventListener("resize", handleResize());
//중요! 만약 이렇게 쓰면 함수가 즉시 호출이 되면서 resize 되지 않았는데도 handleResize를 호출함!!!

클릭 시 글자 색 바뀌는 js

DOM HTML class in JS

JS 파일에서 HTML class 수정하기
className : 새 class를 추가하면 기존 class가 삭제되고, 기존 class의 CSS가 적용되지 않는다. (빈 문자열을 할당하면 모든 class 삭제됨.)
- 원래 class 전부를 삭제한 후, 변경한다.
- 다른 class가 사용되지 않을 것이 확실할 때 써야 좋다.
classList : 다른 element에 영향을 주지 않고 class를 추가하거나 제거할 수 있다.
- 변경되는 부분을 제외한 class의 다른 부분에 영향을 주지 않는다.
- toggle, replace 함수를 편리하게 사용 가능.

querySelector & local storage

querySelector : 찾은 첫 번째 element 가져옴. 없으면 null
querySelectorAll : 선택자를 만족하는 모든 element 가져옴 (array 형태)
local storage로 유저의 브라우저에 정보를 저장할 수 있다!
- local storage에는 key : value 형태로 저장되고, key 값으로 조회 가능하다.
- 창을 새로고침 하거나 껏다 켜도 저장된 상태가 남아있다.
local storage에 자바스크립트의 data(object)를 저장하면 읽을 수 없고, 오직 string만 바로 읽기 가능하다.
```
localStorage.setItem("toDos", []);
// [object Object] 로 나온다.
```
javascript object notation 줄임말 JSON
- JSON.stringify : JS object를 string으로 바꿔줌.
- JSON.parse : string을 object로 바꿔줌.

event

event의 default 동작
- 보통 event가 발생하면 root, form에서 일어남.
- 다른 모든 것들이 event에 반응함.
- form submit (엔터로) → 이를 감지해서 event를 보내고 새로고침
- form에서 submit event 발생하면 이 event는 document까지 계속 올라간다.
event.preventDefault (event의 기본 동작을 막음 ⇒ input에 적은 text가 사라지지 않음)
- 이후 input.placeholder, input.value 로 값을 받아올 수 있음.
event.target (이벤트가 일어난 타겟의 html 반환)
- console.dir(event.target)으로 dom 반환해서 원하는 명령어 찾아볼 수 있다.
- → 부모를 찾는 것 .parentNode ⇒ event.target.parentNode 로 부모 반환

스크립트의 로딩

JS가 조작 대상인 HTML보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않는다.

body가 해석되기 전에 script가 로드 및 실행되면 동작하지 않는 문제의 해결 방법

"DOMContentLoaded" 이벤트는 브라우저가 완전히 로드 및 해석될 때 발생함.
```
 document.addEventListener("DOMContentLoaded", function() {
   ...
 });
```
async을 사용하면 비동기 방식으로

즉 script와 HTML이 동시 로드 및 작동함.
단, async 속성은 외부 스크립트인 경우만 동작함.

async & defer 차이
```
 
 
 
```

async은 나머지 페이지가 나타나는 동안 스크립트들이 비동기 방식으로 다운되며 중단되지 않는다는 것만 보장한다. 스크립트의 다운이 끝나자마자 이를 실행.
구체적인 실행 순서는 보장하지 않는다.
```
  
  
  
```
defer는 다운로드 한 후 모든 스크립트와 내용이 다운되었을 때 실행되며, 순서가 보장된다. (jquery → script2 → script3)

연산자, ==과 ===의 차이

Equality operator

추상(동등) 비교 ⇒ 비교 전에 두 피연산자를 동일한 자료형으로 바꿈. == !=

Identity operator

엄격(일치) 비교 ⇒ 두 피연산자가 다른 자료형이면 false 반환 === !==
==은 강제로 자료형을 변환시키기 때문에 의도치 않은 결과가 발생할 수 있어 조심해야 한다.

3. javascript 기초 학습

Mon, 25 Sep 2023 08:06:45 GMT

javascript 기초 학습

학습 목표

JS 이해 : JS에서 변수 선언법 및 조건문, 반복문을 이해하고 사용할 수 있다.
JS 이해 : JS에서 논리연산자를 이해하고 사용할 수 있다.
JS 이해 : JS에서 함수를 이해하고, 함수 표현식과 화살표 함수를 사용할 수 있다.
JS 이해 : 객체와 배열에 대해 이해하고 사용할 수 있다.
JS 이해 : 필수 문제들을 풀어보며 JS문법을 익힐 수 있다.
JS 심화 : 콜백 함수의 개념과 (addEventListener), map, filter, reduce 개념을 알 수 있다.
문제 선별 <37개> / 최소 12문제
- chap 1) 1, 2, 3, 4, 5, 6, 7, 9, <8개>
- chap 2) 11, 13, 14, 15, 16, 17, 18, 19, 20 <9개>
- chap 3) 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 <10개>
- chap 4) 32, 33, 36, 37, 38, 39, 40 <7개>
- chap 5) 44, 45, 49 <3개>
스터디 시 발표 부분
- 변수, 변수 선언 키워드 & 대화상자
- 변수 type - primitive
- 변수 type - reference
- 함수
- 제어문 (조건문, 반복문)
- (콜백함수, map, filter, reduce)

JS 변수, 문법 및 자료형

JS 변수

예전에는 var을 썼으나, 현재엔 let, const을 쓴다.
var : var로 선언한 변수는 블록 기준으로 스코프가 생기지 않아서, 블록 밖에서 접근 가능하다.
```
if (true) {
  var test = true;
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근)
```
```
for (var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, 반복문이 종료되었지만 'i'에 접근 가능.
```
- 코드 블록이 함수 블록 안에 있으면 var는 함수 레벨 변수가 된다.
```
function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined
```
- var는 if, for 등의 코드 블록을 관통하는데, 옛날 js에서 블록 수준 렉시컬 환경(Lexical Environment)이 없었기 때문이다.
- var는 동일 이름 변수 중복 선언이 된다.. 하지만 두 번째 선언문은 무시된다.
- var는 호이스팅(선언 전 사용 가능)이 된다.
  - var 선언은 위치에 관계없이 함수의 시작 시 처리되고, 만약 전역 변수라면 스크립트 시작 시 처리되어 실제 선언문 위치와 관계없이 사용 가능하다.
  - 단, 할당은 할당문에서 할당이 된다.
  - let, const도 호이스팅이 되지만 TDZ에 의해 오류 메세지가 나오게 된다.
let : 추후 변경 가능한 일반적인 변수 선언법이다.
- C, JAVA의 변수와 비슷.
const : 추후 변경 불가능한 상수 선언이다. 변경 시도 시 에러를 보여준다.

JS 문법 및 자료형

명령문이 한 줄을 다 차지할 경우는 세미콜론이 필요하지 않다. 한 줄에 두 개 이상 명령문을 쓴다면 세미콜론이 필요하다.
초기값 없이 선언만 된 변수는 undefined 값을 가진다.
- undefined는 boolen context에서 사용될 때 false로 동작한다.
- undefined는 number context에서 사용될 때 NaN으로 변환된다.
- null 값은 number context 에서 0으로, boolen context에서 false로 동작한다.
JS의 자료형은 8가지이다. 7가지 primitive 자료형 + Object

Boolean : true, false
null : null, null값 나타내는 키워드 (JS는 대소문자를 구분하므로, Null이나 NULL과는 다르다!)
undefined : 값이 정의되어 있지 않은 최상위 속성
Number : 정수 or 실수형 숫자
BigInt : 임의 정밀도의 정수
String : 문자열
Symbol : (ECMAScript 2015에 도입) 인스턴스가 고유하고 불변인 자료형

Object : object는 속성의 모음이다.
- JSON(JavaScript Object Notation)이라는 데이터 표현 방식이 있다. (중괄호와 key, value 값)

JS 대화상자

prompt
alert
confirm
모달 창 (Modal)

```

JS 함수

function abc(n) {
  실행 구문
}

abc (dd);

JS 제어문 (조건문, 반복문)

조건문 : if
반복문 : while, for

콜백함수

콜백 함수 : 매개변수로 함수 자체를 전달하는 것.

이벤트 리스너로 많이 사용된다.

let button = document.getElementById("button"); // 버튼 요소를 선택

// 버튼에 클릭 이벤트 리스너를 추가 button.addEventListener("click", function () { // 콜백 함수 console.log("Button clicked!"); });


## [map, filter, reduce](https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B0%B0%EC%97%B4-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98-%EC%B4%9D%EC%A0%95%EB%A6%AC-%F0%9F%92%AF-mapfilterfindreducesortsomeevery)
* 고차 함수 : 함수를 파라미터로 받거나 함수를 return 해주는 함수.
함수형 프로그래밍 방식

* JS에서는 특히 배열(object)를 잘 다룰 수 있는 편리한 고차 함수들을 제공한다.


* map() : 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환
```js
const numberArr = [1, 2, 3, 4, 5];
const numberMapArr = numberArr.map((item) => {
  if (item % 2 === 0)
    return 'even';
  else
    return 'odd';
    // 연산한 결과값을 넣어 배열 반환
});

console.log(numberMapArr); // ['odd', 'even', 'odd', 'even', 'odd']

filter() : 주어진 배열을 순회하면서 콜백 함수의 반환값이 true에 해당하는 요소로만 구성된 새로운 배열을 생성하여 반환. find() + map()
```
const numberArr = [1, 2, 3, 4, 5];
```

const numberFilterArr = numberArr.filter((item) => { return item % 2 === 0; // 해당조건에 부합으면 item을 넣어 배열 반환 });

console.log(numberFilterArr); // [2, 4]

```

reduce() : forEach, map, filter 가능 모두 구현 가능.

JS 문제풀이

2) typeof(2.22) float 형이기 때문에 출력이 number로 나온다.

 var a = 10;
 var b = 2;

 for(var i=1; i<5; i+=2){
     a += i;
 }

 console.log(a+b);

i가 1, 3 일때 더해지므로 a + b = 10 + 1 + 3 + 2 = 16 4)

2) null, undefined, 0, 빈 문자열, NaN, false 제외하고 모두 참인 값.

let s = 0;

for (let i = 1; i <= 100; i++) {
  s += i;
}

console.log(s);

키 주어졌을때, 150 넘으면 yes, 미만이면 no

const height = prompt("키를 입력하세요.");

if (height >= 150) {
 console.log("YES");
} 
else {
 console.log("NO");
}

나머지가 0인 것을 나타내야 하므로, 2)번이다.

function circle(n) {
  let space = n * n * 3.14;
  console.log(space);
}

let input = prompt("반지름 입력");
circle(input);

```
prompt()
```

참고 사이트

javascript info

2. CSS 기초학습

Mon, 18 Sep 2023 08:35:17 GMT

<학습 목표>
CSS 이해 : CSS 파일을 사용하는 이유와 HTML에서 CSS 파일을 불러오는 방법에 대해 설명할 수 있다.
CSS 이해 : CSS 파일내에서 원하는 HTML 태그를 선택하는 방법 (4번 영상)(id, class로 선택하는 방법 등)에 대해 설명할 수 있다.
CSS 이해 : CSS에서 원하는 태그를 선택한 후, 해당 태그에 원하는 속성을 부여할 수 있다.
CSS 이해 : margin, border, padding 의 차이에 대해 이해하고 설명할 수 있다.
CSS 이해 : flex 속성을 이해하고 여러 태그를 화면 상의 원하는 위치에 배치할 수 있다.
CSS 심화 : media query에 대해 이해하고, 특정 조건에 반응하는 속성을 줄 수 있다.
CSS 심화 : transition, animation 등 실시간 화면 움직임에 대한 속성을 이해하고, 설명할 수 있다.
추가 학습 : github profile md 꾸미기 / figma 알아보기

CSS 개념 및 사용법

CSS 개념

CSS : Cascading Style Sheet
HTML로 만든 기본 구조 위에 색, 배치 방법, 위치, 모양 등 다양한 디자인을 가능하게 한다.

bootstrap 처럼 잘 만들어진 CSS 테마를 여러 곳에 적용할 수 있다.
문서 내용과 관계없이 디자인 바꾸기 가능.
여러 상황에 맞는 디자인 가능 - 반응형 디자인

cascading은 폭포처럼 떨어져 내린다는 뜻인데, html 문서의 DDM(document object model) tree 구조에서, 디자인 속성을 한 요소(element)에 적용하면 그 하위 요소로 전달 및 적용되는 특성을 갖고 있다는 의미이다.

상위 요소에 적용된 디자인 속성은 하위 요소에서 상속받는다. (동일하게 적용된다.)
하위 요소에서 상속받은 속성을 변경 가능하다.
```
  Hello
```

사용법, CSS 적용 방법

내부 스타일시트
사이에 부분에 css를 바로 삽입 가능하다.
단, CSS의 재사용이 안되므로 외부 스타일시트에 작성하는 것이 좋다.
외부 스타일시트
별도의 .css 파일에 작성 후, 이를 html에서 불러오는 방식.
css는 외부 서버에서 불러오는 것도 가능.
인라인 스타일
html 태그 내에 필요한 속성을 바로 집어넣는 방식.
빠르게 개발하거나 그때 그때 필요할 때는 편하지만, 유지 보수나 큰 프로젝트의 경우 좋은 방법은 아니다.
```
This is a heading
```
동일한 속성값이 외부 스타일, 내부 스타일, 인라인 스타일로 적용되어 있는 경우, 우선순위는 가장 나중에 정의되는 스타일이 가져간다.
따라서 인라인 스타일의 우선순위가 가장 높고, 외부와 내부 스타일 시트는 문서 상 정의된 순서에 따라 우선순위가 결정된다.
웹 브라우저 자체에서도 html element에 대한 자체적 css 혹은 사용자 정의 css를 가질 수 있다.
일반적인 우선순위 : 브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일시트

CSS 기본 문법 : 선택자(selector)

선택자 : 스타일을 지정할 HTML 요소를 가리키는 것 선언부 : 특정 CSS 속성 이름과, 지정하고 싶은 값을 표현하는 곳

선택자 {선언부}

h1 {color: green; font-size: 10px}

CSS는 선택자(selector) + 선언부(declaration)
선택자로 원하는 HTML 요소만 잘 골라내야 하므로, 잘 정의해서 써야 한다.
주석은 /* */

셀렉터

선택자(selector)	예시	설명
.class	.intro	html 태그에서 class=”intro”로 된 모든 태그 영역 선택
#id	#banner	html 태그에서 id=”banner”로 된 태그 영역 선택
*	*	문서내 모든 요소를 선택
태그	p	문서내 모든 태그 영역 선택
태그, 태그	div, p	모든 와 태그 영역 선택
태그 태그	div p	태그 안에 있는 모든 태그 영역 선택

기본 셀렉터

태그 셀렉터 : 문서 내 모든 태그 선택, 다중 선택 가능
```
p {
text-align: center;
color: red;
}
```

h1,h2,h3,h4 { color: blue; }

특정 속성을 가진 태그만 선택 가능
```css
input[type=text] {
  background-color: blue;
  color: white;
}

id 셀렉터 : 해당 id 선택, id는 페이지 내 유일한 값이므로 고유 요소 선택에 활용
```
#id_name { color: blue; }
```

...

```

class 셀렉터 : 특정 class들을 전부 선택할 때 사용. 태그와 클래스 결합 가능
```
.class_name1 { color: blue; }
p.class_name2 { color: red; }
```

h1.header { color: blue;} h2.header { color: green;}

...

```

CSS 속성 부여

텍스트 속성

color: 글자색 지정
text-align: 주어진 영역에서 글자의 정렬 방식 지정(left/right/center)
text-align: justify 의 경우 양쪽 정렬

폰트 속성

폰트 설정의 경우 컴퓨터에 폰트가 설치되어 있어야 하며 설치된 폰트와 상관없이 폰트 적용을 위해서는 구글 등에서 제공하는 web font 라는 것을 사용해야 함.
font-family : 폰트 이름과 유형을 지정하는 속성. 영문을 기준으로 폰트의 유형은 세가지로 구분.
- Serif: 바탕체 계열의 폰트. Times New Roman, Georgia
- Sans-serif: 굴림 계열의 폰트. Arial, Verdana
- Monospace: 고정폭 폰트. Courier New, Lucida Console
```
h1 {
  font-family: "Times New Roman", verdana, arial;
}
```
- 폰트 이름이 두 단어 이상인 경우 반드시 " "로 감싸야 하며, 나열된 순서로 폰트가 적용됨.
- 마지막에는 fall back font라는 지정된 폰트가 없을 때 사용하는 기본 폰트를 지정해야 하는데, 이름 보다는 폰트 유형을 지정하는 것이 좋다.
font-style : 폰트의 스타일을 지정하는 속성. normal, italic, oblique가 있다. oblique 는 italic 과 유사하며 잘 사용되지 않는다.
```
.text1 { font-style: normal}
.text2 { font-style: italic}
```
font-size : 폰트 크기를 지정 속성. px, %, rem, em 등 여러 단위로 사용가능.
```
.text1 { font-size: 10px}
.text2 { font-size: 2em}
```
font-weight : 폰트의 두께 지정 속성. normal, bold, bolder 등 사용 가능.
```
.text1 { font-weight: normal}
.text2 { font-weight: bold}
```
font-variant : 폰트의 변형 지정 속성. normal, small-caps등 사용 가능. small-caps 는 소문자 크기를 유지하며 대문자로 변형해 주는 속성.

정렬 속성

text-align: 요소내 텍스트의 정렬
vertical-align: 인라인 혹은 테이블 셀에서 수직 정렬

링크 속성

에 적용되는 가상 셀렉터들

a:link - 방문한적 없는 기본 링크
a:visited - 방문한 링크
a:hover - 마우스가 링크위에 올라갔을 때

a:active - 링크를 클릭 했을 때

a:link {
color: red;
text-decoration: none;
}

a:visited { color: blue; text-decoration: none; }

a:hover { color: hotpink; text-decoration: underline; }

a:active { background-color: blue; text-decoration: underline; }


5. 컬러 속성
* CSS에서 Color속성은 색상이름, HEX(#)코드, rgb, hsl로 나타낼 수 있다.
* hsl 은 Hue(색조), Saturation(채도), Lightness(밝기) 의 조합이다.
* 색상에 투명도(alpha)를 적용시킬 때는 rgba, hsla를 사용하며, 0.0(완전투명)~1.0(완전불투명) 사이의 숫자로 나타낸다.
  ```css
  #text1 { color: red; }
  #text2 { color: #FF0000; }
  #text3 { color: rgb(255, 0, 0); }
  #text4 { color: rgba(255, 99, 71, 0.5) }
  #text5 { color: hsla(9,100%, 64%, 0.5) }

배경 속성

background-color: 글자색 지정
background-image: 배경이미지 지정, 상대경로, 절대경로, url 사용가능
background-repeat: 이미지 반복
background-position: 이미지의 위치를 지정
background-attachment: 이미지의 스크롤이나 고정을 지정함

CSS 단위

절대단위

단위	설명
cm	centimeter
mm	millimeter
in	inch (1in = 2.54cm)
px	픽셀, pixel
pt	포인트, point (1pt = 1/72 inch)

상대단위 (반응형 웹 구현 시 필수)

단위	설명
em	부모 요소의 글꼴에 비례. (2em은 현재 글꼴 크기의 2배를 의미.)
ex	현재 글꼴의 x 높이에 비례. (거의 사용되지 않음)
rem	루트 요소()의 글꼴 크기에 비례.
vw	뷰포트 너비의 1%에 비례.
vh	뷰포트 높이의 1%에 비례.
vmin	뷰포트의 너비와 높이 중 더 작은 치수 1%에 비례.
vmax	뷰포트의 너비와 높이 중 더 큰 치수 1%에 비례.
%	퍼센트, 100% 를 기준으로 하는 상대 크기

em : 부모요소의 기본 크기를 1em 으로 상대적인 크기를 지정.
rem : rem에서 r은 루트(root)를 뜻하며, 부모가 아닌 최상위 root를 기준으로 하기 때문에 중간에 기본값이 바뀌지 않음.
앞에 v가 붙은 단위는 뷰포트(viewport) 의미로, 웹페이지가 사용자에게 보여지는 영역을 뜻한다.

CSS 배치 방법 : margin, border, padding

Contents box - 콘텐츠 영역으로 텍스트 및 이미지의 실제 영역.
Padding box - 테두리와 콘텐츠 사이의 안쪽 여백.
Border box - 박스를 둘러싼 테두리(경계) 영역.
Margin box - 박스 외부 영역으로 박스가 가지는 여백 공간
박스요소에 크기를 지정하면 기본적으로 콘텐츠 영역에 적용된다.
전체 박스 크기는 border, margin, padding 에 콘텐츠 영역 크기를 더해야 한다.
box-sizing속성은 기본이 content-box지만, boder-box로 바꾸면 border 기준 크기 계산이 가능하다.

CSS 레이아웃 / flex

CSS 레이아웃

박스들의 배치 방법을 결정하는 position 속성.
나란한 박스 콘텐츠 지정을 위한 float, display 속성.

grid display : grid 속성을 주면, 그 안의 content 들을 행, 열로 나누어 표시할 수 있다.

container div를 중첩해서 직접 원하는 모습을 구현하는 방식
```
 
   
   
   
 
```

container class는 header, contents, footer 를 가지는 컨테이너
contents class는 box 클래스 요소를 가지는 컨테이너

position
1) static
- position 속성의 기본값. 요소를 나열한 순서대로 배치.
- 원하는 위치에 콘텐츠를 배치할 방법 없음.
- 콘텐츠를 왼쪽에서 오른쪽으로 추가하다가, 오른쪽에 공간이 없을 경우 다음 줄로 넘겨서 순서대로 배치한다.
  
  2) relative
- static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.
- 이때 좌표값은 static 기준으로 위치한 곳이 (0px, 0px)이 된다.
- 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다.
  
  3) absolute
- top, right, bottom, left 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다.
- 기준 위치는 position 속성이 relative인 요소 중 가장 가까운 상위 요소.
  
  4) fixed
- 전체 브라우저 창 기준으로 좌표를 고정해서 표시.
  
  5) sticky
- 현재 브라우저에 보여지는 화면 기준으로 좌표를 고정해서 표시.
- 스크롤 하더라도 같은 위치에 계속 고정되어 있는다.
  
  5) z-index
- 겹치는 박스들의 수직 위치를 조정하기 위한 속성.
- z-index 값이 높을수록 위, 작을수록 아래에 배치되며 -인 경우 기준 콘텐츠의 아래쪽을 의미.
- position 속성이 적용된 경우에만 의미가 있음.
float

float로 좌, 우측부터 정렬되도록 배열 가능하다.
clear로 float 속성 무효화 가능하다.

display 속성

none : 보이지 않음 , visibility:hidden 속성과 유사하나 영역 자체가 없어짐.
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태

block은 width=100%로 한 줄을 차지하므로 다른 콘텐츠와 나란히 배치 불가능한 반면, inline은 나란히 배치 가능하다.

이미지 가운데 정렬

방법1: 부모 요소의 속성에 text-align:center 를 사용.
방법2: img 태그만 사용한다면 블럭 속성으로 변경한 다음 margin:auto 적용
```
// 방법1
div {
text-align:center;
}
```

// 방법2 img { display: block; margin: auto; }

...

```

flex

.container {
    display: flex;
    /* display: inline-flex; */
}

flex 컨테이너 내부 item들은 기본이 가로 방향으로 배치되고, 각자 자신의 width만큼 차지한다.
height는 컨테이너 높이만큼으로 맞춰진다.
- flex-direction : 가로, 세로 방향 배치를 결정할 수 있다.
- flex-wrap : 넘치는 컨텐츠를 줄바꿈 해줄 수 있다.
- justify-content : 좌우 정렬 축을 지정할 수 있다.
- align-items : 한 행의 상하 정렬 축을 지정할 수 있다.
- align-content : 여러 행일 때 상하 정렬 축을 지정할 수 있다.
flex : flex-grow, flex-shrink, flex-basis 한 번에 사용 가능하다.
- flex-grow : 0이 기본값이고, 각 item에 세팅된 flex-grow 값 비율에 맞게 container 공간을 나누어 꽉 채운다. container에서 각 item의 flex-basis을 제외한 공간을 나누어 체운다.
- flex-shrink : 1이 기본값이고, 0보다 큰 값이 들어가면 flex-basis보다 작아질 수 있다. 0이 들어가면 flex-basis보다 절대 작아지지 않는다.
- flex-basis : item의 길이 기준점
```
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
```

media query

if문 처럼 특정 조건일 때만 원하는 스타일을 적용하는 데에 쓴다.
주로 veiwport의 크기가 달라지는 반응형 웹 페이지 디자인 시에 자주 쓴다.
```
@media (조건) {
스타일
}
```

/800px 이하 화면에서 배경을 초록색으로 바꾸는 코드/ @media (max-width: 800px) {

{ background-color: green; } }

media type: all, screen, print, speach.
min(max)-width: 쿼리에 정의된 값보다 큰(작은) 브라우저 너비에 적용되는 규칙.
min(max)-height: 쿼리에 정의된 값보다 큰(작은) 브라우저 높이에 적용되는 규칙.
orientation=portrait(landscape): 높이가 너비(혹은 반대)보다 크거나 같은 브라우저에 적용되는 규칙

transition, animation

transition : CSS 속성(property) 값이 변화할 때, 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것.

transition은 자동으로 실행되지 않으며, :hover 등의 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 역할이 필요하다.
자동 실행되는 트랜지션(self-invoking transition)을 원한다면 CSS 애니메이션을 사용하면 된다.

animation : CSS를 다른 CSS로 부드럽게 변화시키는 것

애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes)으로 이루어져 있다.
animation은 transition에 비해 더 많은 동작이 가능하다.
animation 속성은 하나의 줄거리를 구성하여 세부 움직임을 시간 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어 가능하다.

참고 자료

CSS 개념 모음
W3Schools.com CSS
Mozilla CSS
CSS transition CSS animation

1. 깃&깃허브 학습, HTML 기초 태그 학습

Sun, 10 Sep 2023 15:50:15 GMT

1) git & github 학습

형상 관리 : 소프트웨어의 변경 사항을 체계적으로 추적하고 통제하는 것

변경 관리 $⊂$ 버전 관리 $⊂$ 형상 관리
형상 관리 도구들 : CVS, SVN, Git, Perforce 등
Git은 분산형 버전 관리 시스템 이다.

Git은 여러 군데에 흩어져서 개발되던 소프트웨어의 코드를 한 데 모으고, 코드의 세부 변경 사항들을 추적하는 것을 돕기 위해 만들어졌다.

Git과 Github은 다르다!

Git은 특정 로컬 폴더(directory)를 버전, 변경 사항 추적이 가능한 git 폴더로 만들어 준다.
Github, GitLab는 이렇게 만들어진 로컬 저장소(내 컴퓨터)의 폴더를 어디서나 접근할 수 있게 상태를 복사해서 올려둘 수 있는 원격 저장소(remote, Cloud 저장소)의 개념이다.
로컬 저장소의 git history를 remote 저장소로 올릴 때 git push를 사용하고, remote 저장소의 git history를 로컬 저장소와 동기화 시킬 때 git pull을 사용한다.
Github 뿐 아니라 사설 git 서버도 제작할 수 있다.
Github에서는 Git 기본 기능들 외에도 issue, milestone, pull request, github action 등 형상 관리에 도움되는 다양한 추가 기능을 제공한다.

Git 다운받기

git bash : git 명령어를 사용가능한 shell 창 (기본 옵션은 vim 기반)

git 명령어 (git 저장소 생성, git 사용자 초기 설정)

git 저장소 생성 방법

원격 저장소에 있는 것을 로컬 저장소에 clone한다.

git clone [원격 저장소 주소]
git clone https://github.com/Turtle-Hwan/Turtle-Hwan.github.io.git

로컬 저장소에 새로 저장소를 만드는, init 한다.

#저장소로 만들고 싶은 위치로 이동 후, init 한다.
git init

현재 디렉토리가 git 저장소라면, .git 디렉토리가 생긴다. $⇒$ .git 디렉토리만 지우면 git history가 모두 삭제된다.

git 사용자 초기 설정

컴퓨터에 git을 처음 깔면, 현재 git 사용자의 이름과 이메일 초기 설정이 필요하다.

git config user.name "이름"
git config user.email "이메일"

# 항상 적용되는 global 설정 확인
git config --global

이 저장소에만 적용되는 설정 확인

git config -l git config --list


## git commit : git 에서 특정 버전을 저장하는 것 (스냅샷을 남긴다)
### commit 절차
1. 파일 생성 및 수정, & 저장
2. `git add [파일 이름들]`  / `git add .` : 모든 파일 add
3. `git commit -m "커밋 메세지"`
* 커밋 메세지는 issue 기반을 명확하게 써 주는 것이 좋다. **commit convention** 참고하여, 무슨 기능을 추가했는지, 무슨 오류를 해결했는지 등. 

## git의 세 영역
### Working Directory : 현재 작업 중인 디렉토리 (.git이 있는 곳)
* git commit을 할 때, 개인정보(개인키, 비밀번호, 환경변수 등)은 버전관리에 포함시키면 안되고 .env 파일 등으로 따로 관리하는 것이 좋다. 공개 repository에 올라갈 경우, 악용될 가능성이 있기 때문!!
* `.gitignore` 파일을 만들고, 여기에 파일/폴더 명을 써주면 Staging Area로 넘어가지 않는다. (.gitignore 파일 자체도 넘기지 않을 수 있다.)

### Staging Area : 특정 버전(commit)으로 관리하고 싶은 파일들
* `git add` : Working Directory에서 원하는 파일들을 Staging Area로 넘기는 명령어
* `git status` : 현재 Staging Area에 담긴 파일들을 보는 명령

### Repository : commit 들이 저장되는 영역
* `git commit` : Staging Area에 있는 모든 파일들의 버전 기록을 Repository에 남기는 명령어
* `git commit --amend -m "수정할 메세지` : commit 수정
* `git log` : Repository의 commit 기록을 보는 명령어
![출처 : 한이음 프로젝트 git 강의](https://velog.velcdn.com/images/turtle-hwan/post/5934d9cb-328e-4e48-9773-63e11df5dc15/image.png)


## git history
* git은 history를 쌓아가는 방식으로 작동한다.
* 즉, 파일을 삭제하면 삭제한 기록이 남으며, commit을 삭제하더라도 삭제했다는 기록이 남아서 `git reflog` 명령으로 찾아내서 복구 가능하다.

## commit 비교 / commit 이동 / commit 삭제
### commit 비교
```bash
git diff {commit_id1} {commit_id2}

두 commit 사이의 차이점을 보여준다. (linux의 diff와 같은 동작)
commit ID는 첫 4자리만 적어도 된다.
추가된 줄을 +로, 제거된 줄을 -로 나타내준다.
git log -p 도 비슷한 동작이다. (git log -p -2 : 최근 2개의 diff 옵션)

commit 간 이동, commit 삭제

commit을 계속 해야 하는 이유는 나중에 그 시점(버전)으로 이동할 수 있기 때문이다.
(HEAD) 포인터가 가리키는 곳이 현재 우리 눈에 소스 코드가 보이는 버전(commit)이다.
```
git reset --hard {commit_id1} #commit_id1로 이동
```
reset을 통해 원하는 이전 버전으로 이동한 후, 새로운 commit을 쌓아나가면 원래 있던 commit을 삭제한 효과를 낼 수 있다. (git reflog로 삭제된 commit id도 찾을 수 있다.)

2) HTML 기초 태그 학습

HTML : HyperText Markup Language
XML처럼 태그로 감싸서 특정 문구를 표현한다.
DOM : Document Object Model
- HTML을 크게 보면 TREE 구조이다.
- DOM 구조를 이용해 Javascript로 HTML 문서에 접근해서 각 element를 가져오고, 추가, 수정, 삭제가 가능하다.

HTML 기본 구조



  
    
    탭 제목
  
  
    문서 내용 - 제목 1
    문서 내용 p
    문서 내용 div

: html 5 표준을 따른다는 것을 나타냄.
: HTML 문서의 메타데이터 정의.
- : 해당 문서가 어떤 문자로 인식되느냐를 나타냄. (한글이 깨질 때, 이 태그가 없을 가능성이 크다.)
: 브라우저를 통해 html을 열었을 때 보이는 내용 부분.

HTML element의 속성(attribute)

내용 : 이때의 class="classname" 부분이 속성 부분이다.

HTML 대표 태그

 : 제목 기능. 글씨를 크고 굵게 표시한다.
 : 특정한 기능이 없지만 단순히 레이아웃을 나눠서 CSS를 적용시킬 때 많이 쓴다.
 : img 삽입 태그
 : 다른 곳으로 링크를 걸 수 있는 태그
 : 버튼을 만들어 주는 태그
 : 입력을 받을 수 있는 태그
 : ID, PW 등의 입력을 받을 때 쓰인다.

formatting tag

  : 강조 기능. strong은 강조 + 중요.
  : 이텔릭체 기능. em은 이텔릭 + 중요.
 : 형광펜 효과.
 : 취소선.
  : 밑줄.

HTML entity : HTML의 문법으로 사용하는 <>, & 등을 내용으로 삽입하도록 변환 가능한 것, 특수문자

inline style (+ css)

<태그 style="속성이름:속성값"> : 이런 형태로 css 속서을 html 요소에 직접 줄 수 있다.

a 태그 / 링크

HTML 링크 : 원하는 다른 페이지로 이동 가능한 하이퍼링크를 생성한다.
- target 속성으로 링크된 문서를 어디서 열 지 결졍 가능.
  - target="_blank" : 새 창이나 새 탭에서 오픈
  - target="_parent" : 부모 프레임에서 오픈
- 링크의 상태(state)에 따라 각각 다른 css 속성을 부여 가능하다. (link, visited, hover, active)

img 태그 / 이미지

를 로 감싸서 이미지 링크 생성 가능.
태그로 이미지를 부분 부분 나누어 링크 걸기 가능

리스트

: unordered list
: ordered list
: description list

테이블


  테이블 제목/설명
  
    table 제목1
    제목2      
  
  
    내용 1
    내용 2
  
  
    내용 3
    내용 4

테이블 제목/설명
table 제목1	제목2
내용 1	내용 2
내용 3	내용 4

iframe

: 페이지 안의 페이지

의미 요소 (semantic element)

웹 페이지 레이아웃 구성을 위한 별도의 element
: HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
: HTML 문서의 탐색 링크를 정의함.
: HTML 문서에서 섹션(section) 부분을 정의함.
: HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
: HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
: HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

form 속성 태그

submit 속성을 가진 버튼 / input을 누르면 form의 action에 해당하는 서버 파일로 input 값들이 전달된다.
get 방식 : 주소창에 data query 추가해서 전달하는 것
post 방식 : request query에 따로 data를 추가해서 전달하는 것
input 요소의 type
1. 텍스트 입력(text)
2. 비밀번호 입력(password)
3. 라디오 버튼(radio)
4. 체크박스(checkbox)
5. 파일 선택(file)
6. 선택 입력(select)
7. 문장 입력(textarea)
8. 버튼 입력(button)
9. 전송 버튼(submit)
10. 필드셋(fieldset)

XHTML

eXtensible HTML을 의미하고, 문법 적용이 더 엄격하다.
React에서는 JS 속에 XHTML을 적용한 JSX 문법을 사용한다.

참고 사이트

HTML 기초 - http://www.tcpschool.com/html/html_intro_basic

TurtleHwan.log

4. javascript 심화

html에서 js를 불러오는 법

template literals with use backtick(`) (ES6)

JS DOM functions

DOM HTML class in JS

querySelector & local storage

event

스크립트의 로딩

body가 해석되기 전에 script가 로드 및 실행되면 동작하지 않는 문제의 해결 방법

연산자, ==과 ===의 차이

Equality operator

Identity operator

3. javascript 기초 학습

javascript 기초 학습

학습 목표

JS 변수, 문법 및 자료형

JS 변수

JS 문법 및 자료형

JS 대화상자

JS 함수

JS 제어문 (조건문, 반복문)

콜백함수

JS 문제풀이

참고 사이트

2. CSS 기초학습

CSS 개념 및 사용법

CSS 개념

Hello

사용법, CSS 적용 방법

This is a heading

CSS 기본 문법 : 선택자(selector)

셀렉터

기본 셀렉터

CSS 속성 부여

CSS 단위

절대단위

상대단위 (반응형 웹 구현 시 필수)

CSS 배치 방법 : margin, border, padding

CSS 레이아웃 / flex

CSS 레이아웃

이미지 가운데 정렬

flex

media query

transition, animation

transition : CSS 속성(property) 값이 변화할 때, 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것.

animation : CSS를 다른 CSS로 부드럽게 변화시키는 것

참고 자료

1. 깃&깃허브 학습, HTML 기초 태그 학습

1) git & github 학습

형상 관리 : 소프트웨어의 변경 사항을 체계적으로 추적하고 통제하는 것

Git과 Github은 다르다!

Git 다운받기

git 명령어 (git 저장소 생성, git 사용자 초기 설정)

git 저장소 생성 방법

git 사용자 초기 설정

이 저장소에만 적용되는 설정 확인

commit 간 이동, commit 삭제

2) HTML 기초 태그 학습

HTML 기본 구조

문서 내용 - 제목 1

HTML element의 속성(attribute)

HTML 대표 태그

inline style (+ css)

a 태그 / 링크

img 태그 / 이미지

리스트

테이블

iframe

의미 요소 (semantic element)

form 속성 태그

XHTML

참고 사이트