본문 바로가기

프론트엔드

(9)
[React] 라우팅(Routing)이란? / react-router-dom / header, footer / 홈페이지 만들기 / react img / require 문법 라우팅(Routing) 이란? 라우팅 : 호출되는 URL에 따라 페이지 이동을 설정하는 것 React에서 view는 component를 사용하고 있습니다. 라우팅을 이용하면, 호출되는 URL에 따라 서로 다른 컴포넌트를 표시할 수 있습니다. react-router-dom 패키지 react에서 라우팅을 지원하는 패키지 중, 웹 개발을 위한 패키지로 적합한 것은 react-router-dom 입니다. *설치 방법 npm install --save react-router-dom react-router-dom 패키지는 BrowserRouter, Route, Link 기능을 제공합니다. Route와 Link를 사용하기 위해서는 태그로 감싸 사용해야 합니다. - Route : 호출되는 URL에 따라 이동할 comp..
[React] Reactstrap 기능들 (Carousel, Collapse, Fade, Form, Input Group, Jumbotron) Reactstrap 에서는 여러 기능을 제공합니다. 오늘은 그 중 Carousel, Collapse, Fade, Form에 대해 알아보겠습니다. 예제를 통해 사용하는 방법을 익혀봅시다! 1. Carousel : 컨텐츠를 옆으로 넘기는 기능 - carousel 패키지에는 슬라이드를 일정 시간 단위로 자동으로 회전시키는 기능을 제공합니다. import React from 'react'; import ReactstrapCarousel from './R041_ReactstrapCarousel' import 'bootstrap/dist/css/bootstrap.css' function App() { return ( Start React 200! CSS 적용하기 ); } export default App; App...
[CSS] 선택자, 주요 속성 정리(flex, grid, font-size, color, margin, padding, position) 1. 선택자란? 선택자는 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지를 브라우저에 알려주는 요소입니다. 1) 요소 선택자 : 직접 요소명을 적어서 나타내는 선택자 (a, h1, div, img, p, span 등) 2) id 선택자 : id 속성 앞에 #을 붙여서 사용 3) class 선택자 : class 속성 앞에 .(마침표)를 붙여서 사용 4) 선택자 중첩 : 선택자를 이어서 사용 ex) 선택자가 span.main 이라면 span 태그이면서 class 명이 main인 선택자들을 선택합니다. 5) 선택자 묶음 : ,를 이용하여 묶음 6) 후손 선택자 : 띄어쓰기로 연결하면 자식요소를 선택함 ex) 선택자가 img a 라면 img 태그의 자식 요소인 a 선택자를 선택합니다. 2. ..
[HTML] html class 속성과 id 속성의 차이점 목적의 차이 - class : 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 - id : 태그에 유일한 이름을 붙이고 싶을 때 반복가능성의 차이 - class class 속성은 여러번 반복해서 사용할 수 있고, 동일한 class로 분류된 태그들을 쉽게 관리할 수 있습니다. - id id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다. CSS 적용의 차이 이렇게 html에서 지정된 id와 class를 css에서 사용할 때에도 차이가 있습니다. - class id 속성은 앞에 # 기호를 붙이고 쓰고, 유일한 속성이므로 class보다 우선적으로 적용됩니다. - id class 속성은 앞에 .(마침표) 기호를 붙이고 쓰면 됩니다. 정리 class id 스타일의 분류에 사용 특정 요소에..
[HTML] HTML 태그 정리(div, span, img, input, a) 1. div 태그 div 태그는 특별한 기능 없이, 여러 소스를 묶을 때 사용합니다. 주로 레이아웃을 나누는데 쓰입니다. 2. span 태그 span 태그도 div 태그와 마찬가지로 특별한 기능을 갖지 않습니다. - 와 의 차이점 div 태그와 span 태그는 display 속성이 다릅니다. div 태그는 dispaly: block 으로 줄바꿈이 가능하고, span 태그는 display: inline으로 줄바꿈이 되지 않습니다. 따라서, 내용을 한 줄로 쓰려면 span 태그를 사용하고, 두 줄 이상 넣으려면 div 태그를 사용합니다. 3. img 태그 태그 의미 이미지 삽입 src= 이미지 파일 경로 alt= 대체용 텍스트 width= height= 가로, 세로 크기 조절 % 브라우저 창의 크기 단위 p..
[HTML] HTML, DOM이란? (Hypertext Markup Language, DOM) 1. HTML이란? HTML (Hypertext Markup Language) HTML은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML으로 웹 페이지의 틀을 잡는다고 생각하면 됩니다. - Hypertext 하이퍼텍스트 하이퍼텍스트는 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. - Markup Language 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어입니다. HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 요소를 사용하고, 요소들은 "태그"를 통해 문서의 다른 텍스트와 구분합니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다...
인터넷/웹 1.0/브라우저 란? 1. 인터넷 인터넷 (Internet) 인터넷이란 전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망입니다. 클라이언트와 서버로 구성되며 TCP/IP라는 기본 프로토콜을 통해 제공되고 있습니다. 즉, 인터넷은 수많은 클라이언트 컴퓨터와 서버 컴퓨터, 그리고 이들로 구성된 네트워크들의 집합체인 것입니다. 인터넷의 특징 1. 서로 동시에 참여할 수 있는 쌍방향 통신을 제공 2. 시간에 제약을 받지 않음 3. 텍스트, 이미지, 음성, 동영상 등 다양한 포맷으로 통신 가능 4. 무료 사용 2. 웹 1.0 웹 1.0 (WEB 1.0) 웹 1.0은 단순한 웹 사이트의 집합체로 일방향으로 정보를 제공하는 형태입니다. 즉, 우리가 흔히 말하는 초기 웹사이트(ex. 야후)가 이에 해당합니다. 인터넷상에서 정보를 제..
Web 관련 핵심 키워드 정리(URL/URI, www, http/https) 1. URI와 URL URI (Uniform Resource Identifier) Uniform Resource Identifier (통합 자원 식별자) - uniform: 리소스를 식별하는 통일된 방식 - resource: URI로 식별이 가능한 모든 종류의 자원 - identifier: 다른 항목과 구분하기 위해 필요한 정보 즉, URI는 인터넷상의 리소스 "자원 자체"를 식별하는 고유한 문자열 시퀀스입니다. 인터넷에 있는 자료의 ID라고 생각할 수 있고, 그래서 URI는 유일해야합니다. URL (Uniform Resource Locator) URL은 네트워크상에서 통합 자원(리소스)의 "위치"를 나타내기 위한 규약입니다. -> 웹 사이트 주소 + 컴퓨터 네트워크상의 자원 이는 웹 사이트 주소뿐만 아..