분류 전체보기91 [ReactJS] Introduction & The Basics of React - ReactJS 로 영화 웹 서비스 만들기 (1) https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React Fundamentals nomadcoders.co 이미 수강했던 강좌지만 이번에 2021년 기준으로 업데이트 됐다. 시간도 얼마 안걸리니까 개념도 다시 볼 겸 재수강 시작!! #1. Introduction ReactJS 를 사용해야하는 이유 - 넷플릭스, 에어비앤비 등 많은 유명 웹 사이트에서 사용 - 페이스북에서 개발하고 지원 -> 수명이 짧지 X - 대규모의 커뮤니티 (JS 와 함께) ReactJS 의 특징 - UI 를 interactive 하게 해줌 #2. The Basics of React ReactJS 사전 준비 - Vanilla .. 2021. 11. 24. 브라우저 렌더링 동작 원리 ■ 렌더링 엔진 : 서버에서 요청받은 내용을 브라우저 화면에 표시하는 역할 브라우저 렌더링 엔진 IE Trident Chrome Webkit, Blink(버전 28 이후) Safari Webkit FireFox Gecko ■ 브라우저 렌더링 과정 : 리소스 파일 파싱 - RENDER 트리 생성 - 배치 - Paint 브라우저 주소창에 www.naver.com 입력 -> DNS 가 www.naver.com 주소의 서버를 찾음 -> HTTP/HTTPS 방식으로 통신 -> HTML, CSS 등 리소스 파일을 브라우저에게 보냄 -> 브라우저는 텍스트 형태의 리소스 파일 파싱 -> 한줄씩 읽으며 DOM 트리 생성 if) -> 중간에 link 태그를 만나 CSS 요청 발생 시, CSS 파싱하며 CSSOM 트리 생성.. 2021. 11. 8. [CSS] 위치 속성 - Display 디스플레이 display 속성 - 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가 결정 1. 블록(block) - 언제나 새로운 라인에서 시작 - 해당 라인의 모든 너비 차지 ex) , , , , , 2. 인라인(inline) - 새로운 라인에서 시작 X - 너비는 해당 HTML 요소의 내용만큼만 차지 ex) , , display 속성의 기본 설정값의 변경 - 블록 요소인 태그의 display 속성값을 인라인으로 변경 가능 li { display: inline; } - 인라인 요소인 태그의 display 속성값을 블록으로 변경 가능 a { display: block; } - 하지만 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 X ex) 인라인 -> 블록이 되어도 변경된 요소 내부에 다른 요소.. 2021. 11. 1. [CSS] 박스 모델 - 패딩, 테두리, 마진, 아웃라인 박스 모델(box-model) - 박스 모양으로 구성된 모든 HTML 요소 1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 2. 패딩(padding) : 내용과 테두리 사이의 간격. 눈에 보이지X 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 눈에 보이지X - height와 width 속성 => 내용 부분만을 대상 * IE 8 이하는 height, width에 패딩, 테두리 크기 포함 => 필수!! 패딩(padding) - 내용과 테두리 사이의 간격 - 배경색의 영향을 받음 1. padding-top 2. padding-right 3. padding-bottom 4. padding-le.. 2021. 11. 1. [CSS] 박스 모델 - 크기 크기 단위 - %, em, px, cm, mm, inch 등 - 백분율 단위(%) : 기본 크기 100%, 상대적인 크기 설정 - 배수 단위(em) : 해당 글꼴의 기본 크기 1em, 상대적인 크기 설정 - 픽셀 단위(px) : 스크린의 픽셀 기준, 절대적인 크기 설정 * 1배 = 1em = 100% 크기 속성 1. height 2. width 3. max-width 4. min-width 5. max-height 6. min-height 1. height 와 2. width - HTML 요소의 높이와 너비 설정 - 기본 : auto div { height: 200px; width: 500px; } 3. max-width - HTML 요소의 최대 너비 설정 - 기본 : none (제한 X) - 줄어드는 .. 2021. 11. 1. [CSS] 기본 속성 - 이미지 스프라이트 CSS 이미지 스프라이트(Image Sprite) - 여러 개의 이미지를 하나의 이미지로 합쳐서 관리 - 이미지를 다운받기 위한 서버 요청을 줄일 수 있음 => 로딩 시간 단축 - 관리할 이미지 파일의 수가 줄어 간편 .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; } .up { width: 21px; height: 20px; background-position: 0 0; } .down { width: 21px; height: 20px; background-position: -21px 0; } .right { width: 22px; height: 20px; background-po.. 2021. 11. 1. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음
