반응형 Project/더퓨어웹사이트 프로젝트 5 더퓨어웹사이트 프로젝트2 보호되어 있는 글 입니다. 2023. 3. 29. [pureapp 프로젝트] 반응형 시멘틱 마크업 공부 🔶 시멘틱 마크업 div, section, article, h2 등 수많은 태그들을 문서 내용에 맞게 선택해서 사용하는 것 [ 장점 ] 1. SEO - 검색엔진 최적화에 유리 2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌 3. 유지보수 - 정리된 마크업은 코드 식별이 용이함 위와 같은 형식으로 div 떡칠하지 말고 의미있는 마크업으로 만들어보자. 📢 목표 : 반응형 시멘틱 마크업 분석해서 적용하기 - 모바일에서는 nav가 토글로 숨겨질 것(js사용) - main 안에 열을 두개로 설정하여 aside를 넣을 것 - 모바일에서 일정 너비로 줄어들면 aside는 아래로 내려갈 것 - scss 문법을 사용할 것 📢 vsCode 에서 Sass 사용하기 node로 sass를 설치해서 packa.. 2023. 3. 28. 더퓨어웹사이트 프로젝트1 보호되어 있는 글 입니다. 2023. 3. 24. [pureapp 프로젝트] 230308 개발환경 세팅 1. mamp 먼저 mamp설치함 https://www.mamp.info/en/downloads/ MAMP는 설치 후 프로젝트 폴더로 경로를 설정하고 start한다. PHP 서버라고 함. 우리는 특이하게 php 서버를 함께 세팅해놓고 만든다. 나는 그냥 무식하게 루트에 해놨따....옘병 그 후 gitlab에서 프로젝트 링크 복사 후 원하는 경로에서 프로젝트를 clone해준다. 로컬에서 프로젝트할 때 백엔드 언어와 같은 공간에서 환경을 구성하는건 흔치 않다. 요즘은 그렇게 안함. FE 개발자가 전문화되고, 개발환경(빌드툴) 성능이 향상되었기 때문. (node로 가상 서버를 띄워서 백엔드 서버 도움 없이 개발이 가능해짐.) 문제는 이 방식의 단점은 소규모 개발에서는 js 개발을 위해 백엔드 개발을 다 끝내놓.. 2023. 3. 9. React 게시판 만들기(1) - React 설치 및 React Router v6 기본 구조 설정 따라만드는 예제 출처 : https://binaryjourney.tistory.com/8 ▼ node.js와 npm와 CRA이란? 더보기 Node.js Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미한다. 리액트 어플리케이션은 웹 브라우저 에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex.바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다. Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는 node.js가 설치되어 있어야 한다. 터미널에서 아래 명령어를 실행 함으로써 node.js 버전을 확인할 수 있다. 노드 버전이 정상적.. 2023. 2. 27. 이전 1 다음 반응형 LIST
