본문 바로가기

FRONT-END11

[JS] 1001 - 1013 - map : 기존 배열을 기반으로, 각 요소에 어떤 작업을 수행해서 새로운 배열을 만들어 내는 함수 map()은 원본 배열은 건드리지 않고,**각 요소를 변환(transform)**해서같은 길이의 새로운 배열을 리턴합니다.const numbers = [1, 2, 3, 4];const doubled = numbers.map((n) => n * 2);console.log(doubled); // [2, 4, 6, 8]console.log(numbers); // [1, 2, 3, 4] ← 원본 배열은 그대로 익명함수이름이 없는 함수로, 단독 사용이 불가하며 주로 생성 후 변수나 상수에 할당하거나, 다른 함수의 호출시 인자로 활용한다.function ([매개변수 ,...]) }[구현부]} 화살표 함수.. 2025. 10. 1.
[JS] 0930 연산자 할당 연산자 일반 할당 ( = ) : X = Y 꼴에서 Y를 X에 할당한다.더하기 복합 대입 연산 ( +=) : x += y꼴에서 x와 y를 더한 값을 x에 재할당한다.let a = 3;a = a + 6; a 를 두번쓰기 귀찮아서 복합 대입 연산이 나옴a +=6 랑 같음빼기 복합 대입 연산 ( -=) : x -= y꼴에서 x와 y를 뺀 값을 x에 재할당한다.곱하기 복합 대입 연산(*=) : x *= y꼴에서 x와 y를 곱한 값을 x에 재할당한다.나누기 복합 대입 연산(/=) : x /= y꼴에서 x와 y를 나눈 값을 x에 재할당한다.나머지 복합 대입 연산(%=) : x %= y꼴에서 x와 y를 나눈 나머지를 x에 재할당한다.거듭 제곱 복합 대인 연산(**=) : x *.. 2025. 9. 30.
[JS] 0929 수업 13일차 JS(JavaScript)는 html 언어로 작성된 페이지에 이벤트 등 동작과 연산을 적용하기 위해 사용한다. 적용 방법 JS를 적용하는 방법은 몇 가지가 있는데 다음과 같다.스크립트 태그를 활용한 인라인 코드 작성( HTML 문서 내에 직접 JavaScript 코드를 삽입하는 방식 )HTML문서에 있는 head 혹은 body 태그의 자식이 될 수 있도록 script 태그를 만들어 해당 태그의 내부 내용에 js 문법을 작성하는 방법을 의미한다.HTML 문서 내에 HTML 문법과 JS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들어지고 유지보수가 까다로워진다. 인라인 스크립트 예제 클릭하세요 2.이벤트 기반 속성 활용 코드를 적용하고자 하는 태그에 onclick, onmouseov.. 2025. 9. 29.
[CSS] CSS 0918 6일 (filter, transform, border,flex) filter : filter 속성은 흐림이나 색상 변형 등 그레픽 효과를 적용하기 위해 사용한다.속성 값은 함수로 이루어져있고 공백으로 구분해 여러가지 사용할 수 있다.함수blur(x) : 크기 값인 x 만큼을 반경으로 하여 요소를 흐린다. (크기가 작을수록 덜흐리고 클수록 안보일만큼 흐림)brightness(x) :배율 값은 x 만큼 명도를 지정한다. 100%(1.0)이 본래 명도이고, 0%(혹은 0.0)으로 지정할 경우 완전히 어두워진다. 블러 브라이트니스 같이쓸때는 filter: blur () brightness(25%)contrast(x):비율 값인 x 만큼 대비를 지정한다. 100%(혹은 1.0)이 본래 대비이고,0%(0.0)으로 지정할 경우 완전히 회색이 된다.grayscale(x) :비율.. 2025. 9. 18.
깨알 : box-sizing에 대해서 css에 대해 공부하던 중 box-sizing에 대한 개념을 잘 모르겠어서 한 번 써보는 글 box-sizing이란? 개념 정리CSS를 공부하던 중 box-sizing 개념이 헷갈려서 직접 정리해 봅니다.HTML 요소는 기본적으로 내용(content) → 패딩(padding) → 테두리(border) → 마진(margin) 순으로 구성된 박스 모델(Box Model) 구조를 가지고 있어요. CSS로 스타일을 추가하면서 padding이나 border 등을 적용하면, 원래 설정해 둔 width/height보다 박스 전체 크기가 커져서 레이아웃이 무너질 수 있어요. 그래서 이 문제를 방지하기 위해 box-sizing: border-box를 사용하는 것이 좋습니다. box-sizing 종류 : content.. 2025. 9. 17.
[CSS] 0916 4일차(의사요소 ::,background,font,width,height,position,padding,margin) 의사요소의사요소(Pseudo Element)는 요소의 앞이나 뒤에 가상의 요소를 만들거나, 내용에 간단한 번화를 주기 위해 사용한다.(예를들어 요소의 일부분(예: 첫 줄, 첫 글자)이나 요소의 앞/뒤(content inserted) 같은 것을 스타일링할 때 사용)의사요소는 어떠한 선택자 뒤에 콜론 두 개 ( :: ) 와 의사 요소 이름을 붙여 사용한다.의사요소의 종류는 다음과 같다.::after : 선택한 요소의 맨 마지막 자식으로 의사 요소를 생성한다. 이때 content 속성이 표시할 내용으로 존재해야 한다.:: before : 선택한 요소의 첫번째 자식이로 의사요소를 생성한다. 이때 content속성이 표시할 내용으로 존재해야 한다. 31#는 id 생성자 요소의 첫 글자를 빨간색, 글씨 크기 .. 2025. 9. 16.