전체 글47 [배포] - Github 배포 (레파지토리) 전 게시글에 만들었던 반응형 웹사이트 (JihyeTube) 를 Github 에 배포해볼 것입니다. Github 의 회원가입 및 로그인은 간단하니 생략하도록 하겠습니다. 1. 레파지토리를 생성합니다. 2. 레파지토리의 이름을 변경하고 Add a ReadMe file 의 체크박스를 체크합니다. 3. Settings -> Pages 에 있는 Branch 를 main 으로 변경시켜 줍니다. 4. 다시 레파지토리로 돌아와서 만들었던 파일들을 업로드 합니다. 5. 위 단계를 모두 마친 후 Settings -> Pages 에 들어가면 사이트 링크가 뜨게 됩니다. 또는 [깃허브 아이디].github.io/[레파지토리명] 을 통해 접속할 수 있습니다. 생성된 링크를 통해 들어갈 수 있습니다. 2023. 12. 15. [반응형 웹] Youtube 03 #썸네일 만들기 이전 내용에서 추가 :) # 01 index.html 마크업 영상 제목 게시자 조회수 100회 · 1시간 전 12번 반복하여 넣어주기 # 02 thumbs.css > 윤곽 잡기 .thumbs__wrapper { display: flex; /* 1차원 정렬을 여러 행으로 할 수 있다. */ flex-wrap: wrap; justify-content: space-between; margin: 60px 0 0 200px; padding: 20px 0 0 10px; /* 다른 속성과 겹치지 않도록 여백 설정 */ } /* item 들이 한 줄에 4개 보일 수 있도록 width 를 1/4 로 */ .thumbs__item { width: 25%; margin: 0 0 15px 0; padding: 0 10px; .. 2023. 12. 14. [반응형 웹] Youtube 02 #네비게이션 만들기 이전 내용에서 추가 :) # 01 index.html 에 네비게이션 요소 추가 ♥\ 메뉴 항목 ♥\ 메뉴 항목 ♥\ 메뉴 항목 # 02 navigation.css 네비게이션 영역과 색상, 속성 지정 .nav { position: fixed; top: 0; left: 0; z-index: 10; } /* 네비게이션 영역 */ .nav__wrapper { min-width: 200px; min-height: 100vh; background-color: #f8f8f8; padding: 80px 0 0 0; list-style: none; } .nav__wrapper li { display: flex; padding: 10px 16px 10px; } /* 커서 올리면 색상이 변경되게 */ .nav__wrappe.. 2023. 12. 14. [반응형 웹] Youtube 01 #헤더 만들기 파일 생성 컴포넌트 별로 스타일을 개별 정의하기 위해 4개의 css 파일 + 이미지 2개 + index 파일 생성 reset.css 파일 reset 파일은 브라우저의 디폴트 스타일을 리셋하기 위한 파일이다. 라이브러리를 가져와서 리셋을 할 것이다. https://meyerweb.com/eric/tools/css/reset/ 사이트에 접속하면 코드를 가져올 수 있다. + reset.css /* 추가 */ * { box-sizing: border-box; outline: none; } 여백을 추가할 대 크기가 커지는 것을 방지하기 위해 box-sizing: border-box; 속성과 검색창의 outline 이 없도록 하는 outline: none; 속성 추가 헤더 만들기 # 01 햄버거 메뉴, 로고, 검색.. 2023. 12. 14. [Android/Java] Do it 도전 04 문제 도전 04. 문제. SMS 입력 화면 만들고 글자의 수 표시하기 1. SMS로 문자를 전송하는 화면은 위쪽에 텍스트 입력상자, 아래쪽에 [전송] 과 [닫기] 버튼을 수평으로 배치하도록 구성합니다. 2. 텍스트 입력상자 바로 아래에 입력되는 글자의 바이트 수를 '10/80 바이트'와 같은 포맷으로 표시하되 우측 정렬로 하도록 하고 색상을 눈에 잘 띄는 다른 색으로 설정합니다. 3. 텍스트 입력상자에 입력되는 글자의 크기와 줄 간격을 조정하여 한 줄에 한글 8글자가 들어가도록 만들어 봅니다. 4. [전송] 버튼을 누르면 입력된 글자를 화면에 토스트로 표시하여 내용을 확인할 수 있도록 합니다. 04. 프로젝트 xml file > java file > package org.techtown.doit_04; i.. 2023. 12. 10. [Android/Java] Do it 도전 03 문제 도전 03 문제. 두 개의 이미지뷰에 이미지 번갈아 보여주기 1. 화면을 위와 아래 두 영역으로 나누고 그 영역에 각각 이미지뷰를 배치합니다. 2. 각각의 이미지뷰는 스크롤이 생길 수 있도록 합니다. 3. 상단의 이미지뷰에 하나의 이미지를 보이도록 합니다. 4. 두 개의 이미지뷰 사이에 버튼을 하나 만들고 그 버튼을 누르면 상단의 이미지가 하단으로 옮겨져 보이고 다시 누르면 상단으로 다시 옮겨지는 기능을 추가합니다. 알고가기 ! findViewByID() xml 에 정의된 뷰와 java 코드 연결하여 상호작용할 수 있도록 하는 메서드이다. setVisibility(View.INVISIBLE) 뷰의 가시성을 설정하는 메서드 뷰를 화면에서 보이지 않도록 하지만, 해당 뷰가 차지하는 공간은 유지된다. setV.. 2023. 12. 8. 이전 1 2 3 4 ··· 8 다음
