Frontend (35) 썸네일형 리스트형 [React] 컴포넌트 만들기 js 파일을 만들고 함수를 만들고 export 해주면 간단하게 컴포넌트를 만들 수 있다. Hello 컴포넌트와 Welcome 컴포넌트를 만들었다. App.js에서 컴포넌트들을 import하고 html 태그처럼 원하는 위치에 적어주면 된다. World 컴포넌트를 만들고 Hello 컴포넌트 안에서 World 컴포넌트를 import 했다. 이 때 return 안에 div 태그로 묶어주지 않으면 에러가 발생한다. 현재 컴포넌트 구조는 다음과 같다. 한 컴포넌트를 여러 번 사용하는 것도 가능하다. [React] 컴포넌트, JSX 리액트로 만든 페이지는 컴포넌트들로 구성되어 있다. 페이지 단위로 html을 작성하는 것이 아니라, 각 부분을 컴포넌트로 만들어 조립해서 사용한다. 따라서 비슷한 부분들은 코드를 재사용 할 수 있고, 유지보수도 쉬워진다. 예를 들면 다음과 같이 컴포넌트를 나눌 수 있다. 광고 컴포넌트는 비슷하게 동작할 것이기 때문에 같은 컴포넌트를 스타일만 다르게 해서 재활용할 수 있다. 언론사 컴포넌트의 경우 더 작게 나눠 각 언론사 컴포넌트로 쪼개서 재활용 할 수 있다. 현재는 App이라는 컴포넌트 하나만 있는 상태이다. App 컴포넌트는 함수로 만들어져 있다. 이렇게 함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다. 모든 컴포넌트는 대문자로 시작해야 한다. 이 함수가 리턴하는 것은 JSX(Javascript X.. [React] 설치(create-react-app) 및 구성 파일 알아보기 리액트 프로젝트를 만들기 위해서는 Node.js와 npm을 반드시 먼저 설치해야 한다.Node.js가 설치되어 있지 않다면 아래 링크에 들어가서 설치해준다.https://nodejs.org/ko/download/ 먼저 create-react-app을 설치하기 위해서 cmd를 실행하고 아래 명령어를 입력한다.npm install -g create-react-app설치가 되면 첫 react 프로젝트를 설치해보자.아래 명령어로 프로젝트를 생성한다.npx create-react-app [프로젝트명]npx란?npm에 속해 있는 패키지 실행 도구이다.실행시킬 패키지가 로컬에 저장되어 있는지 확인하고, 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행시킨다.현재 디렉터리 아래에 [프로젝트명] 폴더가 생기고 .. [CSS] flexbox flexbox란? 박스 내 요소 공간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다. flexbox를 flex 컨테이너라고도 한다.(요소들을 포함하기 때문) flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 한다. flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있다. flex-direction 속성 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다. - row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일 - row-reverse : 주축은 행이고 방향.. [CSS] 배치 - display, position, float 박스의 유형 제어 1) display : block - 블록 박스 항상 새 라인에서 시작 / 블록 박스 내에만 배치 / 옆에 다른 요소 배치 불가능 / width와 height로 크기 조절 / padding, border, margin 조절 가능 2) display : inline - 인라인 박스 새 라인에서 시작 못함. 라인 안(inline)에 있음. / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가능 / width와 height로 크기 조절 불가능 / margin-top, margin-bottom 조절 불가능 3) display : inline-block - 인라인 블록 박스 (inline 속성) 새 라인에서 시작 못함. 라인 안에 있음 / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가.. [HTML] 엔터티 코드 (Entity Code) HTML 문서에서 문자들은 UTF-8 코드체계로 작성되는 것이 표준이므로 다양한 문자들을 표현할 수 있다. 하지만 HTML 언어에서 예약어로 사용하고 있는 문자나 키보드로 입력할 수 없는 기호, 심볼, 글자들은 다음 두 방법으로 입력할 수 있다. &엔터티; 혹은 &#코드값; * 브라우저는 HTML 페이지에 있는 연속된 여러 개의 빈칸을 한 개의 빈칸으로 처리하므로, 빈칸을 강제로 삽입하고자 하면 엔터티를 삽입하면 된다. 엔터티 코드를 찾을 수 있는 사이트 HTML 4 Entities HTML 4 Entity Names Complete HTML 4 Entity Reference All entities in the table below, will display correctly in all browsers,.. [HTML] 미디어 삽입 (비디오, 오디오) 비디오 삽입 이 태그를 지원하지 않는 브라우저가 출력하는 메세지 - width, height : 비디오가 재생될 브라우저 공간의 높이와 폭 지정. 생략되면 비디오 원본 크기로 지정 - controls : 이 속성이 설정되면 재생, 재생 시간, 중단, 음소거 등 제어 버튼 출력 - autoplay : 이 속성이 설정되면 비디오 로딩 즉시 재생 - loop : 이 속성이 설정되면 반복 재생 - muted : 오디오를 끌 때 사용 * HTML5에서 재생 가능한 비디오 타입 video/mp4, video/webm, video/ogg 브라우저가 video 태그를 지원하지 않습니다. 비디오 소스는 태그를 이용하여 별도로 지정할 수도 있다. 브라우저가 video 태그를 지원하지 않습니다. 비디오 소스는 태그를 이용하.. [CSS] 박스 모델 구성 속성 - padding, border, margin CSS의 박스 모델 각 HTML 태그 요소를 하나의 박스로 다룬다. 예) DIVDIVDIV → div 영역의 박스 구성이 보이지 않지만, 사실 박스로 구성되어 있음 박스 모델을 구성하는 프로퍼티 박스 모델의 색, 테두리, 단축프로퍼티 border : 3px dotted blue; * 테두리 종류 둥근 모서리 테두리 만들기 : border-radius 배경 다루기 background-color background-image background-position background-position : center center; /* 박스 중간에 이미지 출력 */ background-repeat background-repeat : repeat-y; /* 위에서 아래로 이미지 반복 출력 */ 이전 1 2 3 4 5 다음
