프론트엔드 지망생

- 프론트엔드 공부 21일차 -데이터 타입Array Object 배열 (Array)순서가 있는 데이터 컬렉션을 저장할 때 사용데이터 컬렉션이 논리적으로 정의된 규칙에 의해 나열된 것ex)let ranking = [“Jason”, “Alice”, “Jane”, “Tom”]index  (요소)      0           1          2           3 Index를 통해 각 요소에 접근 가능ranking[1] = “Alice” let ranking = ["Jason","Alice", "Mike"]/* undefined */console.log(ranking)/* VM760:1 (3) ['Jason', 'Alice', 'Mike']undefined */console.log(ranking[1])/..

- 20일차 프론트엔드 공부 - JavaScript JavaScript란?웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어 변수와 상수데이터를 담고 꺼내쓰는 상자 변수 선언 키워드 var / let / const 선언변수의 이름을 알려주는 것변수명은 누구나 무엇에 관련된 변수인지 알 수 있도록 명시적으로 선언해야 한다ex) let box; 할당변수에 데이터를 담아주는 것ex) let box = 123; 재할당이미 데이터가 할당되어 있는 변수에 다시 변수를 할당하는 것 재선언이미 선언되어 있는 변수명으로 다시 선언하는 것const는 반드시 선언과 할당이 동시에 이루어져야 한다ex) const num = 123; 만 가능cont num ; num = 123; 은 안된다.  varletcons..

- 3일차 쇼핑몰 실습- 쇼핑몰 페이지 반응형  만들기 실습        프망생 쇼핑몰 새 상품 인기 상품 전체 상품 중고 상품 상품 등록 > ..

- 19일차 프론트엔드 공부 - 반응형 웹다양한 디바이스에서 접속했을 때 기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다. 미디어 쿼리뷰포트의 너비에 따라 웹 사이트의 스타일 시트를 수정할 수 있다.뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다.@media 미디어 쿼리 @media  screen and (max-width: 500px) { // 스크린의 viewport의 너비가 500px 이하인 경우 // 적용시킬 스타일 시트}  박스입니다. 박스1 박스2 * { box-sizing: border..

- 18일차 프론트엔드 공부 - grid 레이아웃 flex 1차원적 구조row 혹은 column 구조 택1 grid 2차원적 구조row와 column 레이아웃 동시 설정 가능 grid 속성 1. 요소의 속성을 grid로 변경display: grid grid-container : grid가 적용된 요소grid-item : grid가 적용된 요소의 자식 요소들grid-line : grid-item 사이의 경계를 의미grid-number : 해당 grid-line이 몇번째 line인지를 의미     2. grid-template-rowsgrid의 행의 개수 및 크기를 지정할 수 있다grid-template-rows: 1fr 2fr 200px 2. grid-template-columnsgrid의 열의 개수 및 ..

- 2일차 쇼핑몰 실습-쇼핑몰 페이지 배너 만들기 실습위 디자인의 배너에 홈페이지를 처음 접속했을때 글씨가 아래에서 위로 나오는 형식으로 구현해볼 예정이다.  프망생 쇼핑몰  * { box-sizing: border-box;}html, body { margin: 0; padding: 0;}.mainBanner { width: 100%; height: 200px; background-image: url("./img/banner.jpg"); background-size: cover; display: flex; flex-direction: row; justify-content: center; ..

- 17일차 프론트엔드 공부 - animation여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS을 이용해서 애니메이션을 만드는 방법1. transition 속성 활용2. animation 속성과 keyframe 활용transition / animation 차이 transition 특정한 이벤트를 기점으로 작동한다. (hover 등) animation시작하기 위한 이벤트가 없다.시작, 정지, 반복까지 제어할 수 있다.animation@keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어 해주어야 한다.즉 하나의 동작을 만들기 위해서 1개의 keyframe 1개, 애니메이션 속성 1개가 만들어야 한다. transition이 사용하기 더 간편하기 때문에 애니..

- 1일차 쇼핑몰 실습-   상품 이미지에 마우스를 대면 상품명과 가격이 나오도록 사이트를 만들예정이다.  탁상용 조명 80,000원 탁상 220,000원 ..

- 16일차 프론트엔드 공부 -transform1. 변형 시킨다는 의미2. 요소에 이동, 회전, 확대축소, 비틀기 등의 변형 효과를 줄 수 있다. transform의 속성값translate(x, y)scale(x, y)skew(x-angle, y-angle)rotate(angle) translate(x, y)요소의 좌표를 움직일 수 있다.x축으로 x만큼, y축으로 y만큼 이동시킨다.transform: translate(20px, 20%) translateX(n)요소의 X축 좌표를 n만큼 움직일 수 있다.transform: translateX(20px) translateY(n)요소의 Y축 좌표를 n만큼 움직일 수 있다.transform: translateY(20px) scale(x, y)X축으로 x만큼, ..

- 15일차 프론트엔드 공부 - 함수calc()괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다.ex).item { width : clac(100/4px);} .item2 { width : clac(10px + 20px)} +, - 앞과 뒤는 띄어쓰기가 필수다.*, / 는 띄어쓰기가 필요 없다. 함수 실습1 20px + 50% 100% - 70px 3 * 20px 100% / 4  * { bo..