본문 바로가기
반응형

CSS5

[서평] 더 나은 웹 개발을 위한 가이드(고승원 지음, 한빛미디어) :: 프런트엔드 웹 개발, 실무 기술 노하우 [서평] 더 나은 웹 개발을 위한 가이드(고승원 지음, 한빛미디어) :: 프런트엔드 웹 개발, 실무 기술 노하우 "한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다." 기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자 HTML, CSS, 자바스크립트 '더' 깊이 있는 개발 사용자 경험을 고려한 설계 예시 실무 지식과 사례 더 빠르고, 더 잘 읽히는 웹사이트 구축 올해 초에 개교하여 근무하게 된 대안학교의 홈페이지를 만드는 걸 도와주다가 깊이 좌절하고 있습니다. 아주 기초적인 HTML, CSS, 자바스크립트 지식을 가지고 선의로 시작하기엔 너무 거대한 일이었습니다. 부트스트랩과 그누보드를 이용해서 만들어보았는데 만들면 만들수록 디자인은 보기에 안 좋고, 기능은 기능대로 점점 엉망진창이 되어갔습니다. .. 2023. 7. 27.
[CSS] 눈누 웹폰트 적용하기 | 상업적 이용 가능한 무료 한글 폰트 사용법 | 티스토리 블로그, 웹사이트 꾸미기 상업적으로도 이용 가능한 예쁜 폰트들을 온라인에서 무료로 제공하는 사이트들이 있습니다. 지난 번에 포스팅을 했던 구글 웹폰트와 마찬가지로 무료 제공 폰트 사이트 중에 잘 알려진 곳 중에 하나가 바로 오늘 소개해드릴 '눈누'라는 사이트입니다. 눈누는 상업적으로도 사용 가능한 무료 폰트들을 제공하는 사이트입니다. 아래 링크를 통해 사이트에 접속하실 수 있습니다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 웹폰트 준비하기 눈누 사이트에 접속하셨다면 사이트 내에서 자신이 적용하고 싶은 폰트를 선택합니다. 제가 즐겨 사용하는 티몬 몬소리체를 선택해보았습니다. 클릭하시면 폰트 미리보기, 웹폰트로 사용, 디자인 예시, 폰트의 라이센스 등이 표시됩니다. 웹폰트로 사용 부분에 스.. 2022. 7. 13.
[CSS] 나의 웹사이트에 구글 웹폰트 적용하는 방법, 무료폰트, CSS, HTML, 웹디자인 나의 웹페이지에 구글 웹폰트를 적용해봅시다. 웹페이지 HTML, CSS 파일을 만들다 보니 글자체를 바꾸고 싶을 때가 있습니다. 구글에서 웹폰트를 많이 제공하고 있는데요. 구글 웹폰트를 어떻게 활용할 수 있는지 간단히 알아보겠습니다. 1. 구글 웹폰트 사이트에 접속합니다. 아래의 링크를 클릭하거나 포털 사이트에서 "구글 폰트"를 검색하면 보통 제일 위쪽에 아래 사이트가 등장합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 언어를 선택합니다. 굳이 언어를 선택하지는 않아도 되지만, 한글 폰트 위주로 찾기 쉽도록 Kor.. 2022. 6. 27.
[CSS] 손쉬운 반응형 웹 디자인을 위한 부트스트랩 사용 방법, Bootstrap 부트스트랩이란? 부트스트랩(Bootstrap)은 프런트엔드 개발을 쉽고 빠르게 하는 프레임워크입니다. 각종 레이아웃, 입력창, 버튼 같은 HTML UI 컴포넌트를 CSS와 자바스크립트를 이용해 쓰기 편하게 제공합니다. 부트스트랩은 원래 트위터 블루프린트(Twitter Blueprint)라는 트위터 사내 프로젝트로 시작했습니다. 트위터의 수많은 직원이 각자 맡은 부분을 개발하다 보니 디자인 일관성이 깨지고 관리하기가 점점 어려웠다고 합니다. 그래서 이 문제를 심각하게 느낀 트위터의 디자이너인 마크 오토(Mark Otto)와 개발자인 제이콥 쏜튼(Jacob Thornton)이 업무 시간 외 시간에 함께 프로젝트를 진행하였고 이후 많은 사람이 프로젝트에 참여하게 되어 마침내 2011년에 부트스트랩이라는 이름으.. 2022. 6. 24.
[Tistory] 티스토리 북클럽(Book Club) 스킨 썸네일 정사각형으로 변경, 뉴북 스타일, 최적화, 수익형 블로그 SEO 안녕하세요. 이번 시간에는 티스토리 블로그 북클럽 스킨의 썸네일을 정사각형으로 설정하는 방법에 대해서 알아보겠습니다. 그동안 관리를 잘 못하고 있던 블로그를 최적화해보려고 합니다. 그 첫번째 단계로 눈에 보기 좋게 꾸며보려고 합니다. 티스토리 블로그 북클럽 스킨은 티스토리에서 기본적으로 제공하는 반응형 스킨이라 저를 포함하여 많은 분들이 사용하실 텐데요. 저도 전체적인 디자인이 마음에 들어서 사용하고 있습니다만 디자인 상에 조금 아쉬운 점들이 몇 군데 보여서 이를 수정해보려고 합니다. 북클럽 스킨, 리스트 스타일을 '뉴북'으로 바꾸어보자 기존의 제 블로그 화면입니다. 대표이미지를 썸네일로 사용하고 있는데 상하좌우가 제가 생각한 것과 다르게 잘려있는 것을 알 수 있습니다 심지어 대표글을 4개만 표시하게 해.. 2022. 5. 25.
반응형