웹/Front-end (9) 썸네일형 리스트형 [React] ReactJS로 영화 웹 서비스 만들기 - ② JSX & PROPS ReactJS로 영화 웹 서비스 만들기 관련 게시글은 모두 노마드 코더 강의 중 ReactJS로 영화 웹 서비스 만들기 & Do it! 클론 코딩 영화 평점 웹 서비스 책을 참고로 한다. 강의 목차는 다음과 같다. #0 INTRODUCTION #1 SETUP #2 JSX & PROPS #3 STATE #4 MAKING THE MOVIE APP #5 CONCLUSIONS #6 ROUTING BONUS #2 JSX & PROPS #리액트 동작 원리 앞서 App.js 파일에서 div태그 안에 입력한 텍스트가 브라우저에 출력되었는데, public 폴더의 ≫ index.html 파일을 확인해보면 div 태그 사이에 내용이 비어있다. 리액트는 1) 프로젝트 폴더 (src 폴더)에 작성된 코드를 자바스크립트를 이용해.. [React] ReactJS로 영화 웹 서비스 만들기 - ① 환경셋팅 맥도날드 프로젝트 업데이트 중에 view 페이지 반응형이 전-혀 되어있지 않아 수정 중에 뷰페이지를 자유롭게 수정하기엔 프론트 부분이 취약한 걸 깨닫고 인강 정주행중이다. ReactJS로 영화 웹 서비스 만들기 관련 게시글은 모두 노마드 코더 강의 중 ReactJS로 영화 웹 서비스 만들기 & Do it! 클론 코딩 영화 평점 웹 서비스 책을 참고로 한다. 강의 목차는 다음과 같다. #0 INTRODUCTION #1 SETUP #2 JSX & PROPS #3 STATE #4 MAKING THE MOVIE APP #5 CONCLUSIONS #6 ROUTING BONUS #0 INTRODUCTION 프로젝트를 하기에 앞서 필요한 작업은 Node.js 설치 파일 다운로드 npm 설치 (NodeJS 설치 시 같.. [HTML/CSS] script 태그 위치 코드를 정리하는 작업 중에 script태그 위치를 어디로 하는 게 좋을 지 몰라서 검색해봤더니 정리를 너무 잘해준 블로그 글이 있어서 내용을 담아왔다. 내가 숙지가 안된 내용이라 그냥 그대로 퍼 오는 게 더 정확한 정보를 습득할 수 있을 것 같아서 원문을 거의 그대로 옮겨왔다. 출처: https://epthffh.tistory.com/entry/html-안에-script-태그를-어느-위치에-삽입하는것이-가장-좋을까 [물고기 개발자의 블로그] html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까? html 안에 script 태그를 어느 위치에 삽입하는것이 가장 좋을까? 문득 궁금해서 찾아보았습니다. 다음은 stackoverflow 에서 가장 추천수가 많은 질문과 답변입니다. 발번역이므로 .. [HTML/CSS] 포트폴리오 페이지 - JS 소스코드 main.js의 소스코드이다. 코드의 가독성을 위해 파일 내 노트(주석) 정리 중.. // 전체 스크립트 엄격 모드 구문 // https://www.w3schools.com/js/js_strict.asp 'use strict'; // Make navbar transparent when it is on the top //querySelector 이용 시, ctrl or cmd 를 이용해서 함수가 정의된 곳으로 이동 가능. const navbar = document.querySelector('#navbar'); const navbarHeight = navbar.getBoundingClientRect().height; // 스크롤이 될 때마다 {} 블럭 안을 실행 document.addEventListener.. [HTML/CSS] 포트폴리오 페이지 - CSS 소스코드 style.css 파일의 소스코드이다. 공부하며 주석으로 기록했던 부분들은 여기에 남겨두고 프로젝트 파일에서는 정리하는 작업 중.. /* Global */ :root { /* Color */ --color-white: #ffffff; --color-light-white: #eeeeee; --color-dark-white: #bdbdbd; --color-pink: #fe918d; --color-dark-pink: #ff6863; --color-dark-grey: #4d4d4d; --color-grey: #616161; --color-light-grey: #7c7979; --color-blue: #73aace; --color-blue-blue: #3091FF; --color-dark-blue: #2a7ba3.. [HTML/CSS] 포트폴리오 페이지 - HTML 소스코드 index.html 파일의 소스코드이다. Testimonials 섹션은 아직 미완성이라 우선 주석처리해뒀다. 캐러셀(Carousel)로 구현하고 싶은데 바닐라 자바스크립트로는 구현해본 적이 없어서 (부트스트랩으로만 해봄) 뒤로 미뤄뒀다. JS 추가 필요 작업 + IntersectionObserver (참고자료) + Carousel (참고자료) ㄴ index.html의 Testimonials 섹션 추가 Home About Skills Work Resume Contact Hyeran Park Hello, I am a junior web-developer. Contact me About me Hi, I'm Hyeran. A full-stack web developer living in Seoul, South .. [HTML/CSS] 포트폴리오 페이지 - CSS: justify-content justify-content는 브라우저가 flex 컨테이너의 주축(가로축)과 그리드 컨테이너의 인라인 축(중심축)을 따라 콘텐츠 항목 및 주변 공간을 배분하는 방법을 정의하는 속성이다. 즉, flex 가로 정렬 사이의 간격을 배분할 수 있다. {display: flex}와 함께 사용시, 각 요소들 사이사이 간격을 균등하게 배분할 수 있다. 참고로, align-items는 세로축-교차축 기준 정렬이다. 따라서 flex-direction: column 또는 flex-direction: column-reverse일 때 세로 중간 맞춤 시 사용 출처: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content https://m.blog.naver.com/.. [HTML/CSS] 포트폴리오 페이지 - CSS Flex 출처: https://studiomeal.com/archives/197 Flex랑 Grid 설명은 1분 코딩 튜토리얼이면 될 거 같다. 이미지 자료랑 설명이 너무 훌륭하다. 내가 공부하면서 보기 위해 본문을 그냥 복붙해서 가져왔다. ▼▼▼▼▼▼▼▼▼▼▼ Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. helloflex abc helloflex 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다. Flex의 속성들은, .. 이전 1 2 다음
