HTML9 [React]리액트 기본 구조 / JSX란? 기본 구조 처음 리액트를 처음 접한다면 어떤 식으로 사용을 해야 되는지 감을 잡는 게 중요한 것 같습니다. 리액트의 기본 구조는 컴포넌트 구조를 가지고 있습니다. 컴포넌트 구조란 예를 들어 아래의 이미지처럼 UI를 개발한다고 할 때 '로고 이미지', '검색어 입력 상자', 오른쪽 상단의 '버튼' 등 필요한 컴포넌트들이 있을 것입니다. 이러한 컴포넌트들을 각각의 파일로 작성을 하고, 그 파일들을 import 시켜 재활용하여 사용할 수 있는 구조를 말합니다. 재활용한다는 말을 좀 더 자세히 말씀드리자면 위의 이미지에서도 첫 번째 이미지와 같이 '로고 이미지', '검색어 입력 상자'를 보실 수 있을 것입니다. 이때 새로운 코딩을 하는 것이 아닌, 첫 번째 이미지에서 사용하였던 컴포넌트를 다시 사용하여 만들 수.. 2020. 12. 19. [HTML+CSS] border에 그라데이션 넣기 border(테두리)에 그라데이션 효과 넣는 예제입니다. See the Pen border gradation by limqo (@limqo) on CodePen. 위의 코드에서 box1의 div는 border-image를 이용하여 gradation 넣은 것을 확인 할 수 있습니다. 하지만 box1에 border-radius가 적용되있지 않은 것 을 볼 수 있습니다. box2 처럼 설정을 하면 border-image에 border-radius 적용시킬 수 있습니다. 2020. 8. 7. [HTML+CSS] slide 애니메이션있는 사이드메뉴 효과내기 사이드의 메뉴를 열었다, 닫았다 하는 예제입니다. See the Pen side slide 효과 by limqo (@limqo) on CodePen. 1. 먼저 메뉴부분과 버튼부분으로 영역을 잡아주고, 적절한 위치에 배치를 해줍니다. 2. animate(이동방향거리, delay); 를 이용하여 화면 밖의 영역으로 div를 이동해 줍니다. 3. toggleClass를 이용하여 메뉴의 상태와 화살표 방향을 변경해 줍니다. 생각보다 간단하면서 있어보이는(?) 효과를 나태낼수 있고, 디자인적으로 좀더 신경을 쓴다면 훌륭한 연출을 할 수 있을 것 입니다. 2020. 7. 27. [HTML+CSS] div 자연스러운 테두리 효과(box-shadow) 3D의 dashborad의 느낌으로 div를 꾸미기 위해 box-shadow를 이용하면 자연스러운 연출을 할 수 있습니다. See the Pen 테두리 그라에디션 효과 by limqo (@limqo) on CodePen. box-shadow는 shadow방향(ouset, inset), Xoffset, Yoffset, Blur(흐림), Spread(확산), color로 구성되 있습니다. 크롬의 DevTools를 이용하면 쉽게 사용하고 이해할 수 있습니다. 그림처럼 DevTools에 Style 탭에서 box-shadow앞에 아이콘을 확인할 수 있습니다. 이 아이콘을 클릭하게 되면 아래와 같은 설정창이 나옵니다. 위 창에서 원하는 수치를 확인하면서 작업하면 더 쉽게 작업을 할 수 있습니다. 2020. 7. 27. [HTML+CSS] ul, li 태그로 트리구조 만들기 트리구조는 아래의 그림처럼 우리가 흔히 볼 수 있는 폴더의 구조입니다. 또한 웹개발을 할때 메뉴, 카테고리 등을 표현할 때 필요한 구조입니다. 다음은 코드입니다. See the Pen Tree by limqo (@limqo) on CodePen. 구조는 이 기본 한 묶음이고, 하위 트리를 생성할 경우는 하위에 새로운 을 추가하면 됩니다. javascript를 응용하여 동적으로 생성 할 수 있습니다. 마지막 노드 여부를 class="lastTree"로 판단하고, 여기에 필요한 이벤트를 추가하면 됩니다. 코드를 보면 선택 여부를 를 이용하여 선택 여부를 확인합니다. 2020. 7. 17. 이전 1 2 다음 728x90 반응형
