개인 공부용 블로그

변수를 데이터 바인딩하는 방법 1. 변수 선언 해 데이터 바인딩으로 꽃아 넣는 방법 변수를 데이터 바인딩하는 방법 2. state를 이용해 데이터 저장 공간을 만든다. 상단에 정의한 import React는 node_modules 파일 안에 react라는 폴더가 있다. 기능을 사용할때는 import를 사용해서 연동해줘야 한다. 변수 대신에 사용할 수 있는 데이터 저장 공간이다. useState(' ')

컴포넌트를 사용하기 위해서는 별도의 html파일이 필요하다. #1. 파일 생성 하기 원하는 위치에 파일 생성 필수 공통사항 1. 파일명.vue 2. 생성된 파일명 안의 형식은 아래와 같이 맞춘다. < (꺽쇠) + Enter 키를 누르면 자동완성이 되니 참고! script안의 name은 꼭 넣어주어야 한다. #2. App.vue로 돌아와서 컴포넌트로 축약한 파일 껴넣기 파일로 축약을 했다면 한줄로 입력이 가능하다. 그런데 컴포넌트가 안되는 이유는 수순을 따르지 않았기 때문. 아래의 순서처럼 등록해줘야 한다. import Discount from "./discount"; #3. 컴포넌트 사용시 주의사항 예를 들어 함수가 연동되어 있거나 하는 코드를 컴포넌트 하는 경우 onclick이 먹지 않는 등의 불편 사..

See the Pen continue, break by limhaneul2244 (@limhaneul2244) on CodePen. continue문이란? 해당 조건문 블록을 빠져나와 아래 명령문을 실행하지 않고, 다음 반복문 실행 절차를 수행한다. continue문을 사용하게 되면 for문의 조건식이 i < 10으로 되어 있지만 if문에서 i === 5와 같게 되면 해당하는 조건만 제외하고 다음에 이어지는 반복문은 진행하게 된다. break문이란? break; 적어준 곳에서 해당 조건문 블록과 그 밖의 반복문 자체를 빠져나온다. for문이 돌면서 if문의 조건식을 만났을때 (즉, 5와 같아질때 그 조건식을 빠져나온다.) 그래서 for문의 조건식을 i

See the Pen position: sticky by limhaneul2244 (@limhaneul2244) on CodePen. 부모안에서 position fixed처럼 보이기도 하고 static처럼 보이기도 하는 sticky sticky될 대상에는 아래처럼 지정한다. .sticky { position: sticky; position: -webkit-sticky; /*safari*/ top: 0; width: 100px; height: 100px; background-color: orange; } 그래도 sticky가 되지 않는다면 확인해봐야 할 것! 1. 부모의 높이가 충분히 지정되어 있는가? 2. 부모에 overflow속성이 지정되어 있는가? sticky의 경우 부모에 overflow속성이 지정..

구조 중앙정렬 방법 1. 자식 -> .item 에 inline-block지정 (content 영역만큼만 자리잡으므로 중앙으로 위치함, block은 안됨) 상위부모 -> .items 에 text-aling: center 지정 .items { text-align: center; } .item { display: inline-block; } 중앙정렬 방법 2. items에 display: flex; justify-content: center; align-items: center; 지정 .items { display: flex; justify-content: center; align-items: center; } 중앙정렬 방법 3. position을 이용 .items { position: relative; } ..

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover nav effect by limhaneul2244 (@limhaneul2244) on CodePen. front와 back을 겹치게 놓아야 하므로 .item에 position: relative지정. front와 back에position: absolute 지정 absolute지정시 content 크기 만큼 줄어들게 되므로 width값을 정의해주고, front가 앞으로 나와야 하기 때문에 z-index값을 준다. transition을 통해 부드럽게 위, 아래로 움직이게 하기 위해 hover가 아닌 front와 back에 transition을 지정한다. hover가 되었을 때에는 위치값으로 박스를..

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover tool Tip by limhaneul2244 (@limhaneul2244) on CodePen. .icon안에 img와 span의 형제구조로 만듦 position: absolute를 통해 icon의 화살표 방향에 모두 위치하도록 한 뒤 여기서 잠깐 잊지말것! 어떠한 요소든지간에 position: absolute를 지정할 경우 inline-block이 된다. inline요소도 inline-block으로 변경된다. 즉, 컨텐츠 만큼의 너비만 가지게 된다. span을 .icon의 정중앙에 위치시켜주기 위해 transform: translatex(-50%); 를 지정해 icon의 width가 변형..

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. 구조는 아래와 같다. 보통 쇼핑몰에서 상품리스트에 마우스 hover 했을 때 상품의 상세설명이 나오는 경우가 많다. See the Pen hover dimmed by limhaneul2244 (@limhaneul2244) on CodePen. 1번 이미지와 2번 caption이 겹쳐지게 만들자. 맨처음에는 상세설명란이 보이지 않아야 하므로 opacity값이 0이었다가 hover가 되면 1이 되어야 하므로 caption의 opacity는 0 지정. 배경색에 알파값을 지정해 약간 투명해보이게 해준다.

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. See the Pen hover drop down navigation by limhaneul2244 (@limhaneul2244) on CodePen. 중요한 사항 a태그는 body태그를 따르지 않기 때문에 color와 text-decoration등을 별도로 지정해주어야 한다. body { color: #333; line-height: 1.5; } a{ color: #333; text-decoration: none; } /*a태그는 body태그를 따르지 않는다. 따로 색상, 언더라인을 지정해주어야 한다.*/ 뭔가 무심코 지나갔던 것들을 다시한번 재정리하는 느낌이다.

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다. 1. 도형 로딩 애니메이션 예제 See the Pen keyframe animation_01 by limhaneul2244 (@limhaneul2244) on CodePen. 빨간 border안에서 박스가 회전되게 하려면 @keyframes SquareLoading { 0% { top: 0; left: 0; /*시작 방향이 left였다면 그 다음에는 right가 될 수 없다. right로 지정할 경우 다시 되돌아 오지 않는다.*/ } 25% { top: 0; /*right: 0; */ /*right로 지정할 경우 다시 되돌아 오지 않는다.*/ /*left: 100%; */ left: calc(100% - 20px); bac..