잇스쿨

1. SVG는 무엇? SVG는 확장 가능한 벡터 이미지를 표현하기 위한 포맷이다. 확장이 가능하다는 것은 이미지를 확대했을 경우 품질이 떨어지지 않는다는 큰 장점을 가지고 있다. 또한 텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능하여, 코드로 수정할 수 있기 때문에 다른 이미지 형식보다 강력한 기능을 가지고 있다. 추가로 반응형 대응과 사이즈 변화에 지장이 없다는 점, 브라우저 호환성, SVG 속성 사용이 가능하다는 장점으로 일반적으로 많이 사용하는 파일 형식인 jpg, png보다는 프론트 입장에서는 활용도가 높다 :D 하지만..... IE8에서는 지원이 되지 않는다! 2. 사용법 웹에서 SVG를 사용하는 방법은 다양하지만, 해상도 독립성 및 파일 용량의 최소화를 위해 SVG를..

게시판 화면만 봐도 보통 태그를 사용하여 레이아웃을 만든다. 동시에 태그 안에 태그를 활용하여 표의 열을 묶는 그룹을 정의하게 된다. 그리고 태그 안의 태그는 각 행에 대해 각 셀의 스타일을 반복하지 않고, 전체 열에 스타일을 적용하는데 사용된다. 최근 HTML 웹 메일을 태그로 레이아웃을 작업하다가 태그에 width 값을 정의해야 하는 상황이었다. 종종 rwdb나 gdweb을 통해 대형 운영 사이트들을 들어가 마크업을 살펴보다 보면, 태그에 col width="100" 또는 style="width:100px" 이런 식으로 주는 경우가 있었다. "두 가지 방식의 차이가 무엇일까" 라는 궁금증이 생겼다. (너무 늦었을지도 모르지만 그래도 이런 궁금증이 떠오른게 다행이지 않을까) Fact Check - HT..

회사에서 사용하는 github 계정과 개인 계정을 같이 쓸 수 있다는 사실을 구글링을 통해 알아내고서 열심히 뻘짓을 하며 며 성공했다...! 나중에 다시 하려면 또 뻘짓을 할 것 같아서 포스팅하기로...★ 우선 PC에 Git이 이미 설치되어 있다라는 가정하에 아래와 같은 단계로 진행된다. 1. SSH-key 생성 Git Bash를 실행한 후, 아래의 명령어를 실행한다. 이 때, 이메일 주소는 git에 가입한 이메일 주소로 입력해야 한다. $ ssh-keygen -t rsa -b 4096 -C [개인 이메일 주소] Enter! 하면 key의 이름을 입력하라고 아래와 같은 문구를 노출한다. Generating public/private rsa key pair. Enter file in which to sav..

word-break - 아시아 언어를 제어하는 줄바꿈 속성 - 문장이 길어지면 줄바꿈(normal)이 일어남 특징 설명 기본값 normal 상속 가능 애니메이션 적용 안됨 버전 CSS3 [Property] 1. normal : word-break 속성의 기본값 2. break-all : 글자를 기준으로 무조건 줄바꿈 3. kepp-all : 단어를 기준으로 줄바꿈 * 특수문자와 언어에 따라 사용 여부를 결정해야 함 (특수문자 때문에 CJK, non-CHK 모두 설정한 width를 오버함) → word-wrap:break-word 를 함께 사용 4. inherit : word-break의 값을 상위요소한테 상속받음 word-wrap - 비아시아 언어를 제어하는 줄바꿈 속성(가로 영역에 넘친 단어를 분리) ..

Hello World! Hello World! Hello, World! 위의 코드의 결과가 어떻게 될 지 상상해봤을 때, 보편적인 측면에서 생각하면 띄어쓰기가 그대로 반영이 될 것이라고 생각하기 쉽다. 하지만, HTML 마크업 언어에서는 두 칸 이상의 공백은 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 된다. 이러한 공백처리 방식은 CSS로 제어할 수 있으며, white-space의 pre-wrap 속성을 사용하면 줄 바꿈, 공백, 들여 쓰기를 모두 적용할 수 있다.

기본적으로 태그는 시작 태그와 종료 태그 2개로 쌍을 이루며, 그 안에 내용이 들어가게 된다. 종료 태그 없이 시작 태그만 존재하는 태그를 빈 태그(EMPTY TAG)라고 한다. 예를 들어, 은 유효하지 않은 HTML 문법이다. 또한, 자식 노드를 가질 수 없는 요소로 , , , , , , , , , , , , 등이 있다. 기존 HTML4.01에서는 형식으로, XHTML1.0에서는 형식으로 선언해야 하며, HTML5에서는 두 가지 방식 모두 허용하고 있다는 것을 기억하자! [참고] https://seulbinim.github.io/WSA/html-basic.html#%EB%A7%88%ED%81%AC%EC%97%85-%EC%96%B8%EC%96%B4%EC%9D%98-%EB%B6%84%EB%A5%98 HTM..

초기에 변수 선언을 할 경우 ':' 을 사용해야 하지만, 변수 선언!하면 습관처럼 나오는 '=' 을 아래와 같이 당당히 썼다. var frontUI = { g_firstLoaded=false, g_isWheel=false, } 그러자 친절히 Console에 바로 나오는 에러문 [Uncaught SyntaxError: Function statements require a function name] 다음과 같이 변경해주자. var frontUI = { g_firstLoaded:false, g_isWheel:false, }

Redux용 React 바인딩은 smart and dumb components를 분리하는 아이디어를 채택하였다. 앱의 최상위 컴포넌트(라우트 핸들러같은)만이 Redux와 연관되는 것이 좋다. 그 아래의 컴포넌트들은 우직해야하고 모든 데이터를 props를 통해 전달받아야 한다. Smart Component Dumb Component 위치 최상위, 라우트 핸들러 중간과 말단 컴포넌트 Redux와 연관됨 예 아니오 데이터를 읽기 위해 Redux 상태를 구독 props에서 데이터를 읽음 데이터를 바꾸기 위해 Redux 액션을 보냄 props에서 콜백을 부름

1. npm install -g create-react-app 프로젝트 환경을 구축할 경로로 이동하여 명령어 실행 2. create-react-app [프로젝트 폴더명] ex. create-react-app redux-example 3. redux 설치 npm install --save redux react-redux 명령어 실행 (react-redux : 뷰 레이어 바인딩)

스마트폰을 예시로 들었을 때, 사용자의 입장과 제품을 만드는 제작자의 입장이 존재할 수 있다. 사용자 입장에서 스마트폰을 조작하는 장치는 "버튼"과 "화면"이라고 할 수 있다. 장치를 조작하는 장치를 "props" 제품의 내부적인 구현을 위해서 다양한 조작 장치를 가지게 하는데 이 내부적 장치들을 "state" 즉, Component 의 기본적인 동작을 바꾸고 싶을 때 사용자에게 제공하는 props를 제공하여 조작할 수 있게 된다. 사용자에게는 알 필요가 없는 Component 내부적으로 사용되는 것들을 state 라고 한다. 아래의 코드로 자세히 알아보자. src/App.js import React, { Component } from 'react'; import Nav from './components..