CSS : Cascade Style Sheet html이 데이터를 다룬다면, css는 style에 대해 다룬다. 문서내용 작성하는 부분과 꾸미는 부분을 분리하여 내용을 수정하여도, 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없다. 다양한 기기에도 디자인만 따로 적용하여 구동 시킬 수 있다. style : 정해진 속성을 입력하여 웹페이지를 꾸미는 것 stylesheet 웹페이지에서 반복적으로 쓰는 style을 모아놓은 것 스타일 기본 형식 css를 html에 적용하는 방법 1. html요소의 inline style속성 작성 2. html문서의 내부 style태그 작성 3. 외부 css파일을 현재 html문서와 연결 1. html요소의 inline style 속성 작성하기 CSS c..
이미지 관련 태그 이미지는 img로 작성하며, 시작과 종료 태그의 구분 없이 하나의 태그만 작성한다. src = 이미지 경로 (절대경로/상대경로) 절대경로 : 절대주소는 / 또는 프로토콜로 시작한다. 파일 프로토콜 절대 주소는 서버환경에서 보안상 사용할 수 없다. 상대주소 : / 또는 프로토콜로 시작하지 않는 주소이다. ./ 는 현재 디렉토리 ../ 는 부모 디렉토리 alt = 대체텍스트 이미지를 찾지 못했거나, 시각적 확인이 불가능한 경우 사용할 텍스트. 절대 크기 px : 픽셀로 크기를 나타냄. 창을 키우거나 줄여도 변화 X 상대 크기 % : 전체 가로 길이에서 %로 크기를 나타냄. 창을 키우거나 줄이면 크기변화 O https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9..
비주얼코드 설치 https://code.visualstudio.com/download Extension 에서 추가해야할 것들 Live Server -> Extension Settings local 검색해서 Use local IP as host 선택. 모두 설치해주자. 이제 HTML에 대해 알아보자! HTML Hyper Text Markup Language 웹에서 정보를 표현할 목적으로 만든 마크업 언어. Hyper Text : 다른 페이지로 이동 가능한 링크가 포함된 텍스트 Markup Language : 태그를 통한 정보의 계층구조를 표현하는 언어 웹페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 해석기호(태그들)로 이루어져 있다. ㄴ마크업 (태그) : 문서의 논리적인..
리액트 프레임워크를 구성하는 3요소는 가상DOM, JSX, 컴포넌트이다. 이중 가상 DOM부터 알아보겠다. react 와 react-dom 리액트 플젝의 경우, 항상 react와 react-dom이 필요하다. react는 컴포넌트와 jsx, 리액트 훅 등 렌더러에 무관한 기능 (= 환경과 무관하게 공통 사용하는기능) 을 제공 react-dom은 앱이 동작하는 환경에 종속적인 기능을 제공하는데 특화된 패키지 다음과 같은 구조라고 보면 된다. XML 마크업 언어를 사용한다. document.createElement(요소); --xml요소를 만듬 document.appendChild(부모요소); --xml에서 부모요소의 자식 요소를 가리킬 때 사용 document.getElementById(아이디명); --x..
리액트 프로젝트 만드는 방법 : create-react-app 사용(CRA) Node.js 오픈소스 라이브러리 쉽게 설치하는법 : node pakage manager (npx) 사용 npx create-react-app 프로젝트명 --template typescript를 터미널에 입력하면, 프로젝트가 새로 생긴다. 리액트 프로젝트의 기본구조. package.json에 scripts 항목을 보면, start와 build에 대한 정의가 되어있다. npm run start -- 개발모드 npm run build -- 빌드모드 빌드모드 : 웹팩이 프로젝트 디렉터리 파일을 모두 모아 이름에 main이나 chunk라는 단어가 들어있는 번들 파일을 만듦. 번들 파일이란 ; 웹팩이 다양한 입력모듈(이미지,css,htm..
리액트는 페이스북에서 만든 오픈소스 자바스크립트 프레임워크. 리액트는 가상 DOM과 JSX에서 동작한다. 리액트는 SPA방식을 이용하며, SPA 란 single page application을 의미한다. index.html 파일 1개로 동작하기 때문에 서버에 자원을 1번만 요청하고, 화면 깜빡임 현상이 발생하지 않는다. 필요한 부분만 동적으로 화면을 생성하는 방식인 것이다. (jquery의 ajax랑 비슷한 느낌?) 전자정부프레임워크 4.0부터 리액트를 프론트앤드 기술로 도입한다고 한 만큼, 실제로 굉장히 많이 사용하고 있는 프론트앤드 언어이다. 나는 Do it ! 리액트 모던 웹개발 with 타입스크립트 책을 통해 리액트를 실제로 활용해 보면서 공부해보려고 한다. 설치할 개발 도구는 다음과 같다. 프로..
