반응형 웹-프론트(Web-Front)47 [CSS.019] Flex로 메뉴바 만들기 *[풀코드] See the Pen menuBar_by_Felx by wootekken (@wootekken) on CodePen. [1] HTML로 메뉴 글자를 작성합니다. 그리고 CSS로 아래와 같이 기본 여백을 0, 색깔을 입혀줍니다. [2] 메뉴의 글자를 꾸미고 정렬을 해줍니다. [3] 메뉴에 display: flex를 정교하여 가로로 놓이게 해주고 마우스를 메뉴에 얹였을 때 flex-grow로 크기 변화가 나타나게 해줍니다. 2022. 3. 12. [CSS.018] Flex로 정렬하기 dd [1] Flex 레이아웃의 구조 Flex 레리아웃의 기분 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 ㅇㅇ [코드 1] [코드1-실행결과] ㅇ [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다.. 2022. 3. 8. [깃허브.004] 웹 사이트 무료배포 HTML/CSS/JS 로 만든 Single 웹 페이지를 무료로 온라인에 업로드해서 다른사람들이 볼 수 있도록 배포하면 얼마나 좋을까요? 깃허브에서는 이것이 가능합니다. 웹 개발의 마지막 단계인 배포(deploy)를 깃허브에서 하는 방법은 다음과 같습니다. [1] Github Pages 설정을 이용해서 나의 서버연동 없이 무료로 웹 사이트를 배포할 수 있습니다. 준비과정은, 아래와 같이 최상단 경로에 index.html 파일이 존재하게끔 깃허브에 웹 파일을 업로드 합니다. [2] 파일 준비가 되었다면, 아래 그림의 1~4 순서대로 눌러 줍니다. [3] Save 버튼까지 눌렀으면, 조금만 기다려 주세요. 그러면 아래 그림과 같이 페이지를 새로고침 했을 때, Environments라는 메뉴가 생깁니다. 이거를.. 2022. 3. 3. [CSS.016] FloxBox로 정렬해보기 [1] Flex 레이아웃의 구조 Flex 레이아웃의 기본 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 [코드 1] [코드1-실행결과] [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다. height.. 2022. 3. 1. [HTML.006] vscode 편리한 패키지 추천 VSCODE(Visual Studio Code)에 웹 프로그래밍을 할 때 편리한 패키지를 추천해 드립니다. [1] Auto Rename Tag HTML 태그 수정시 "시작태그"를 수정하면 "닫는태그"까지 자동으로 수정되는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "Auto Rename Tag"를 검색하고 Install 버튼을 눌러 설치하면 됩니다. [2] CSS peek HTML의 태그를 Ctrl+클릭시 해당 CSS 부분으로 화면이 자동으로 옮겨가는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "CSS peek"을 검색하고 Install 버튼을 눌러 설치하면 됩니다. [3] Live Server vscode에서 코딩 후 저장만 하면 웹 브라우저에서 자동으로 .. 2022. 3. 1. [깃허브.003] 내 코드 깃허브에 올리기 * 먼저 알아야할 개념 이 실습을 하기전에 위 그림의 원격 저장소, 로컬 저장소의 개념을 먼저 알아야 합니다. -원격 저장소:: 깃허브 온라인 사이트의 파일 저장소-로컬 저장소: 내 컴퓨터 속의 오프라인 저장소 * 아래 실습은 "[깃허브.002] 깃허브 데스크탑용 프로그램설치/저장소 연결" 실습을 완료한 후 이어지는 실습입니다. [1] 깃허브의 원격 저장소와 깃허브 데스크탑 프로그램이 연결된 상태에서 아래 그림과 같이 데스크탑 프로그램의 화면에 보면, (1) 저장소의 이름(myfirstTest)을 확인할수 있고, (2) show in Explorer를 클릭하면 내 컴퓨터에 저장된 코드의 폴더(로컬 저장소)로 이동하게 됩니다. [2] Show in Explorer 버튼을 눌렀을 때 나타나는 폴더(로컬 저장.. 2022. 2. 28. [깃허브.002]데스크탑 깃허브 설치/저장소 연결법 [1] github.com 에 접속하여 회원가입합니다. [2] 오른쪽 상단의 내 계정을 클릭하여 나타나는 메뉴 중, Your repositories를 클릭합니다. 여기에서 repository는 깃허브의 저장소를 말합니다. [3] 새로운 repository를 만들기 위해 나타나는 화면에서 New(초록색 버튼)를 클릭합니다. [4] Repository name에 아무 이름을 적습니다.(나의 코드가 저장될 장소의 주소로 사용되는 이름입니다.) 그리고 Public, Create repository 버튼을 누르면 repository가 생성됩니다. [5] 아래 화면의 빨간네모 부분처럼 주소가 생긴 화면이 나타나면 나만의 저장소인 repository가 잘 만들어 진 것입니다. 지금은 저장된 내용이 없어서 아래와 같이.. 2022. 2. 28. [깃허브.001] 깃허브란?(What is github?) Git이란 소스코드를 효과적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템'입니다. (원래는 Linux 소스코드를 관리할 목적으로 개발 되었습니다.) Git에서는 소스 코드가 변경된 이력을 쉽게 확인할 수 있고, 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수도 있습니다. Git -로컬에서 관리되는 버전 관리 시스템 (VCS : Version Control System) -소스코드 수정에 따른 버전을 관리해주는 시스템 Github -클라우드 방식으로 관리되는 버전 관리 시스템(VCS) -자체 구축이 아닌 빌려쓰는 클라우드 개념 -오픈소스는 일정 부분 무료로 저장 가능, 아닐 경우 유료 사용 -다른 사람들과 협업할 경우, 오픈소스를 공유하고 다른 사람들의 의견을 듣고 싶은 경우 등은 .. 2022. 2. 28. [CSS-015] 레이아웃 배치(Float활용) [CSS-015] 레이아웃 배치(Float활용) HTML 화면 레이아웃을 배치할 때, CSS에서 Float 명령어를 이용하여 배치를 할 수 있습니다. 그 방법에 대해서 아래와 같이 소개합니다. [1] 레이아웃 1 See the Pen CSS-layout01 by wootekken (@wootekken) on CodePen. [2] 레이아웃 2 See the Pen CSS-layout02 by wootekken (@wootekken) on CodePen. [3] 레이아웃 3 See the Pen CSS-layout03 by wootekken (@wootekken) on CodePen. [퀴즈] 레이아웃 4 아래 그림과 같이 레이아웃을 만들어 보세요. (퀴즈 정답은 아래의 "더보기"에서 확인) 더보기 See.. 2022. 2. 25. 이전 1 2 3 4 5 6 다음 728x90 반응형
