목록HTML (3)

PINKYETI

[React] 개발 환경 세팅 - Project 생성 및 구동하기 (+VSCode)

안녕하세요. 오늘은 VSCode를 활용하여 React Project 를 생성해보겠습니다. 먼저 프로젝트 생성을 위한 개발 환경 세팅을 진행할텐데요, 사용할 IDE는 VSCode 입니다. 그리고 Node.js 를 설치해줍니다. React 에서 사용되는 언어는 JavaScript 인데 웹 브라우저 외의 동작을 지원하는 엔진입니다. Node.js 는 아래 사이트에서 설치해주도록 할게요. (개발 목적에 맞는 버전 확인하셔서 설치하시면 됩니다.) - Node.js Download https://nodejs.org/ko/download 1. Node.js 설치 및 확인 Node.js 설치 마법사를 진행하셨다면 엔진이 설치되었는지, npm(Node Package Manager)이 설치되었는지 확인해줍니다. npm 이..
# Dev Note/[Frontend] 2023. 8. 23. 01:08
[JavaScript] 반응형 웹 페이지 슬라이드 2단 메뉴바 만들기 (+HTML/CSS, 드롭다운 x)

안녕하세요. 핑크예티입니다. 최근 웹개발 프로젝트를 진행하며, Front-end 개발을 맡게 되었는데요, 잘 모르는 영역이라 쉽지 않더라고요. 반응형 웹페이지 구현을 시작하다가 메뉴바 구현부터 막혀서 고생을 좀 했습니다. 최근 웹페이지에서 흔하게 볼 수 있는 형태의 2단 메뉴바 구성은 구글링을 통해서도 찾아보기 힘들더라고요. 그래서 제가 작성했던 방법을 공유하고자 펜을 들게 되었습니다. 성격 급하신 분들은, 전체 코드 & 메뉴바 예시부터 보고가세요. - 메뉴바 예시 HTML 삽입 미리보기할 수 없는 소스 - 전체 코드 - 메뉴바 템플릿은 BootStrap 예시를 참고하여 작성 - BootStrap/jQuery HTML 연동은 cdn으로 연결 - .sub-menu Class를 선언하여 Sub Menu St..
# Dev Note/[Frontend] 2022. 4. 22. 04:03
[BootStrap] 부트스트랩 템플릿 활용 및 HTML 연동 (+Navigation Bar)

안녕하세요. 핑크예티입니다. 오늘은 Front-end 를 처음 접하시는 분들께 활용하기 유용한 라이브러리인 "BootStrap" 을 소개하려 합니다. 부트스트랩은 간단히 말씀드리면, Front-end 개발에 유용한 CSS class 및 JavaScript 함수들을 내장해놓은 라이브러리 입니다. 따라서, 이 라이브러리를 HTML에 연동하여 Style을 처음부터 구현하지 않고 import 하여 가져다 쓸 수 있는데요. 어떻게 사용하는지 알아보도록 하겠습니다. 1. BootStrap 다운로드 먼저 부트스트랩을 사용하기 위해서는 다운로드를 받아줍니다. 아래 링크 통해 다운로드를 진행해주세요. (사이트 내에 부트스트랩 Example 도 있으니 참고하세요.) https://getbootstrap.com/ Boots..
# Dev Note/[Frontend] 2022. 4. 20. 23:06
이전 Prev 1 Next 다음