보호되어 있는 글입니다.
WEB
코드 이해하기 src/App.js JSX란? JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생김 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. document.createElement(”div”); … JSX 문법 감싸인 요소 반드시 하나의 요소에 의하여 감싸여 있어야 합니다. Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 Fragment : 태그로 렌더링 X → ~ 참고) 컴포넌트 부분 화면 함수형 컴포넌트 화살표 함수 권장(=>) 클래스형 컴포넌트 자바스크립트 표현 자바스크립트 표현식을 ..
DOM DOMTree → DOM의 조작 가하면 → DOMTree → CSS 관계 설정 → 배치 FACEBOOK에서 리액트 개발 피드 게시글(스레드)가 무제한으로 나온다. → 너무 느려지는 문제가 생김 사본을 만들어 놓고 비교한다. 주소가 바뀌면 바뀌었다라고 판단하고 버림 기존의 변경사항을 하나하나 세고 변경하는 게 아니라 다 버리고 다시 새로운 걸 만들어서 교체! → 성능이 매우 빠르다. 리액트는 개발 기간이 훨씬 짧고 견고하다. 리액트 별도의 문법인 JSX을 쓴다. 트랜스파일러 트랜스파일러는 JSX를 JavaScript로 변경해준다. 웹팩(깨진거 붙여준다) → 개발 서버에서 개발해야된다. node.js : 자바스크립트 런타임 - V8 내장객체가 다르다 서버쪽 내용이 많음 node.js는 구글에서 만들었..
시맨틱 태그 - 의미가 있는 태그 시맨틱 태그가 아닌 태그 div, span 문서 구조를 위한 HTML5 시맨틱 태그 : 사이트 상단 : 메뉴 : 영역 : 영역 안 내용 : 측면 : 문서 포함하는 웹 브라우저(창) src : 웹페이지의 경로 seamless : 경계선 제외 width, height scrolling - auto - 자동 | yes - 스크롤바 O | no - 스크롤바 X name : target에 iframe name을 지정해서 이동(부모창 → 자식창) : 하단쪽 : 사이트 정보, 연락처, 주소 .. 모바일 기기와 웹 디자인 뷰포트 : 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하기 width : device-width height : device-height user-scalable..
CSS 포지셔닝과 주요 속성들 CSS 포지셔닝 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것 box-sizing content-box : 기본값, 내용물 기준, 내부 여백, 경계선 → 전체 크기가 증가 border-box : 경계선 기준, 내부 여백, 경계선 → 크기 X → 내용물의 크기가 감소 float left : 왼쪽 배치 right : 오른쪽 배치 none 참고) 작업할 땐 float 안 쓰고 flexbox 많이 쓴다. clear float : 적용 속성을 제거 left : float:left 적용 제거 right : float:right 적용 제거 both : float:left, float:right 모두 제거 공간이 있는 요소(block, inline-block)에서만 ..
CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨(block-level) 요소 공간 O, 너비(width), 높이(height) 지정 줄개행 p, h1~h6, div 외부 여백(margin) : 상하좌우 적용 가능 인라인 레벨(inline-level) 요소 공간 X, 너비(width), 높이(height) 지정 X 줄개행 a, i , u, span 외부 여백(margin) : 좌우 여백만 적용 가능 박스 모델(box model) - 박스 형태의 콘텐츠 블록 레벨 요소 width, height 속성 - 콘텐츠 영역의 크기 display 속성 block : inline → block inline : block → inline inline-block : inline(줄 개행 X) + block..
웹에서 색상 표현하기 16진수 표기법 rgb와 rgba 표기법 색상 이름 표기법 배경 색과 배경 이미지 background-color background-clip border-box padding-box content-box background-image→ url 경로 → 배경 이미지 background-repeat repeat : 좌우, 상하 반복 → 기본값 repeat-x : 좌 → 우 반복 repeat-y : 위 → 아래 반복 none : 반복 없음 background-size auto : 이미지 원본 그대로 출력 contain : 이미지를 영역 안으로 축소/확대 cover : 이미지를 영역 안으로 채우기 크기값 background-size: 너비 높이; 백분율 너비, 높이를 함께 지정 → 이미지 ..
글꼴 관련 스타일 font-familyfont-family: 글꼴명, 글꼴명(대체 폰트), 글꼴명, ….; → 처음 글꼴이 없으면 다음 글꼴로 대체되고 다음이 없으면 그 다음으로 대체… 시스템 폰트 : OS에 설치된 폰트 참고) 글꼴 명에 띄어쓰기가 있는 경우 반드시 따옴표로 감싸기 : “글꼴명” 맑은 고딕 ⇒ font-family: “맑은 고딕”; //맑은 고딕은 윈도우 11부터 제공 안 한다. 다운 받아야한다ㅜ MS(마이크로소프트)에만 있는 폰트 font-family: “맑은 고딕”, AppleGothic; → MAC 에는 맑은 고딕이 없어서 애플고딕으로 대체해서 쓴다. / OS 마다 글꼴이 없을 수 있어서 대체 폰트 중요! / 그치만 OS가 다른 환경이든 똑같은 글꼴을 요구한다. 그래서 OS가 달라..
