FrontEnd/Front Project (4) 썸네일형 리스트형 [첫번째 Project] :: 반응형 Nav Bar 만들기 3. # 이번 시간에는 Nav bar를 꾸미고, 크기에 윈도우의 크기에 따라 반응하는 반응형으로 만들어보도록 하겠습니다. # 이 장에서는 Javascript가 일부 사용됩니다. 크게 어렵지 않은 부분이라 쉽게 따라하실 수 있을 거라고 생각합니다. # Visual Studio Code 및 Extension 설치 방법 [첫번째 Project] :: 반응형 Nav Bar 만들기 2. # 오늘은 지난번에 만들었던 HTML에 CSS를 덧붙여 Nav bar를 꾸며보도록 하겠습니다. # CSS에서 색깔을 변수로 사용하는 방법과 Item 배치하는 방법에 대해서 알아보도록 하겠습니다. # Item 배치를 공부하시고 싶은 분은 "FlexBox" 와 "Display & Position" 을 공부해보시기 바랍니다. # Visual Studio Code 및 Extension 설치 방법 1) 현재 상태 지금까지 작성한 HTML을 확인해보면 왼쪽과 같은 모양인 것을 확인할 수 있습니다. 우리는 이제 CSS를 활용해 왼쪽을 오른쪽의 모습으로 바꾸도록 하겠습니다. 2) 전체 HTML 아래 과정을 진행하기 전에 CSS 파일을 HTML에 불러와서 사용해야합니다. 그 방법을 간단히 설명드리도록 하겠습니다. 1. .. [첫번째 Project] :: 반응형 Nav Bar 만들기 1. # 오늘은 "반응형 Nav Bar 만들기 1."으로 HTML을 작성하고, CSS를 적용해보도록 하겠습니다. # 중간에 중요한 내용, 필수적으로 짚어야 할 내용이 있는 경우 따로 작성하도록 하겠습니다. # Visual Studio Code 및 Extension 설치 방법 # 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성 - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다. # Full script in Github :: Dony Noh Project GitHub - SudonNoh/Front-end Contribute to SudonNoh/Front-end development by creating an account on GitHub... VScode(Visual Studio code) 및 Extension 설치 방법 # 프로젝트 진행에 앞서 Visual Studio code 설치와 유용한 Extension 설치를 진행하도록 하겠습니다. # 비전공자가 진행한 PROJECT Visual Studio 설치 1) 설치 아래 링크로 접속해 컴퓨터 사양에 맞는 Visual Studio code를 설치합니다. 설치 방법은 간단합니다. 동의 후 모든 절차를 예로만 입력하시고, 필요한 사항은 체크 후 설치하시면 됩니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and.. 이전 1 다음
