웹
[Jekyll] Jekyll와 Github로 만드는 깃허브 블로그 - (3) 글씨체 변경
글씨체에 대한 설정이 없어서 윈도우에서 크롬으로 TIL 블로그에 들어가면 한글 글꼴이 깨진듯 이상하더라구요 😢 해결하기 위해 간단한 방법으로 웹폰트를 적용했습니다! 구글 폰트에서 원하는 폰트 가져오기 저는 이 폰트로! 폰트를 골라 Select this stlye을 누르고 @import를 눌러 나오는 url 주소를 복사해둡니다 CSS 파일에 다음과 같은 코드를 붙여넣습니다 제 앞선 글들과 동일한 사이트를 생성하셨다면, css > main.scss 파일에 넣으시면 됩니다! @font-face { font-family: 'Noto Sans KR'; src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap'); fo..
[Jekyll] Jekyll와 Github로 만드는 깃허브 블로그 - (2) Ubuntu에서 Ruby와 Jekyll 설치하기
이제 Jekyll 테마의 변경한 세부사항을 바로 확인할 수 있도록 Ruby와 Jekyll을 설치하도록 하겠습니다. 0. 기본적인 설치 및 사용법은 Jekyll 사이트에서 알아봤습니다 📌 jekyllrb-ko.github.io/ 설치 환경 - VMware Workstation 16 Player - Ubuntu 20.04.2.0 1. Update 설치 전 업데이트는 필수! sudo apt-get update sudo apt-get upgrade 2. 필요한 패키지 설치 sudo apt-get install ruby-full build-essential zlib1g-dev 3. Gem 설치 디렉토리 설정 root 사용자로 Ruby Gem 을 설치하는 것은 피하는 게 좋습니다. 다음 명령으로 Gem 설치 경로를..
[Jekyll] Jekyll와 Github로 만드는 깃허브 블로그 - (1) Jekyll 테마 적용하기
TIL를 블로그에 작성하고 싶어서, 깃허브 블로그를 하나 만들기로 했습니다. 매일 TIL를 작성하며 공부 중이라는 사실을 깃허브 잔디밭에도 나타내고 싶기도 하고, 개인 도메인과 호스팅을 구입하긴 부담돼서 깃허브 블로그로 결정했습니다! Jekyll Github 사이트를 제작, 운영하는 데 추천하는 도구는 'Jekyll'와 HEXO입니다. 저는 템플릿의 종류가 많은 Jekyll을 선택했습니다. Jekyll은 Ruby 언어로 작성된 정적 웹사이트 생성기입니다. 마크다운, Liquid, HTML&CSS를 넣으면 바로 게시할 수 있는 사이트를 완성할 수 있습니다! DB 관리도 필요없는 블로그를 운영하기 아주 편리한 도구죠. Jekyll의 기본 사용법은 다음 사이트에서 익혀서 사용했습니다. 📌 jekyllrb-ko..
[Github] Github page 기능을 통한 웹 사이트 운영
포트폴리오와 TIL 를 위한 웹 사이트를 제작하기로 했습니다. Github를 웹 호스팅으로 이용하기로 했고 그 방법을 소개하겠습니다! 1. Repository 를 생성 2. index.html 파일을 생성 웹 사이트의 메인 페이지로 사용될 파일입니다. 저는 Hello라는 텍스트만 담은 파일로 생성했습니다. 3. Github Pages 설정 Settings > GitHub Pages > Source 에서 None을 클릭하여 master branch 를 선택하고 Save! Settings 에 들어가서 아래로 쭉 내리면 찾을 수 있습니다. Save하면 index.html 이 자동으로 웹 사이트의 소스로 공개됩니다. 4. 생성된 링크를 통해 웹 사이트로 들어갈 수 있습니다. index.html 이 이 웹 사이트..
[HTML] HTML 문서의 구성과 기본적인 태그
Tag(태그) 란? HTML 문서를 구성하고 있는 요소 태그에는 이름과 속성이 있다. 예) 시작 태그와 종료태크가 쌍을 이룬다. HTML 1. 최신 HTML 버전 HTML5 2. 사용할 편집툴 메모장으로도 가능 Notepad, Atom, Eclipse ... 본인에게 맞는 툴을 사용하는 것이 좋습니다. 저는 Visual Studio Code를 사용합니다! HTML 전체적인 구조 1. 기본 태그 : 문서가 html 파일이라고 지정 html 태그 : 태그 안이 html 문서를 구성. html 태그 안은 , 두 가지 태그로 구성된다. head 태그 : 환경 설정에 관련된 정보 body 태그 : 공유하고자 하는 정보를 담는다. : 줄바꿈(개행). 종료 태그를 따로 하지 않아도 된다. ※ xmlns : 지정네임스..
[HTML & CSS] Web을 구성하는 HTML과 CSS
Web(웹) 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태 사전적으로 거미줄이란 의미로, IT에서는 WWW(World Wide Web)의 줄임말 전 세계의 컴퓨터들을 연결하여 정보 공유를 하는데 주 목적 이렇게 연결되어 있는 상태를 네트워크에 연결되어 있다고 한다. ※인터넷(Internet) 1개 이상의 네트워크가 연결되어 있는 형태 http://codesyun.tistory.com:80/category/Programming 프로토콜 : 네트워크 상에서 약속한 통신규약(HTTP, FTP, SMTP , POP, DHCP) IP : 네트워크 상에서 컴퓨터를 식별할 수 있는 주소 DNS : IP 주소를 인간이 쉽게 외우도록 맵핑한 문자열 Port : Port 번호는 해당 컴퓨터의 구동되고 있..