Web6 [배포] - 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. Java Spring 기초 라이브러리 Gradle : 의존관계가 있는 라이브러리를 모두 다운해준다. 스프링부트 라이브러리 spring-boot-starter-web spring-boot-starter-tomcat : 톰캣 (웹서버) spring-webmvc : 스프링 웹 MVC srping-boot-starter-thymeleaf : 타임리프 템플릿 엔진 (View) html 을 만들어주는 엔진 spring-boot-starter (공통) spring-boot (스프링부트) spring-boot-starter-logging (로깅) spring-core (스프링코어) 테스트 라이브러리 spring-boot-starter-test junit : 테스트 프레임워크 mockito : 목 라이브러리 assertj : 테스트 코드를 좀 더.. 2023. 11. 15. 웹 개발 - 기초 웹 사이트를 만드는 것 정적 사이트 방문자에게 정보를 보여주기만 하는 웹 사이트 동적 사이트 화면에 정보를 보여주는 것 뿐만 아니라 여러가지 서비스와 기능을 제공할 수 있는 웹 사이트 서버와 클라이언트 사용자는 웹 브라우저에서 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와 웹 브라우저에 보여주게 된다. 이때 인터넷에 연결된 컴퓨터를 서버라고 한다. 그리고 사용자가 웹 사이트에 접근하려고 사용하는 PC, 태블릿, 휴대폰 등을 클라이언트라고 한다. 정보를 검색하거나 처리하는 일은 서버가 하게 되며, 사용자와 서버 사이에서 화면으로 보여주는 역할을 클라이언트가 하게 된다. 웹 개발의 프론트엔드와 백엔드 프론트엔드 웹 브라우저에 보이는 화면의 디자인과 사용자 동작에 반응.. 2023. 9. 22. 이전 1 다음
