본문 바로가기
반응형

HTML5

[서평] 더 나은 웹 개발을 위한 가이드(고승원 지음, 한빛미디어) :: 프런트엔드 웹 개발, 실무 기술 노하우 [서평] 더 나은 웹 개발을 위한 가이드(고승원 지음, 한빛미디어) :: 프런트엔드 웹 개발, 실무 기술 노하우 "한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다." 기본적인 프런트엔드 웹 개발 지식을 갖춘 개발자 HTML, CSS, 자바스크립트 '더' 깊이 있는 개발 사용자 경험을 고려한 설계 예시 실무 지식과 사례 더 빠르고, 더 잘 읽히는 웹사이트 구축 올해 초에 개교하여 근무하게 된 대안학교의 홈페이지를 만드는 걸 도와주다가 깊이 좌절하고 있습니다. 아주 기초적인 HTML, CSS, 자바스크립트 지식을 가지고 선의로 시작하기엔 너무 거대한 일이었습니다. 부트스트랩과 그누보드를 이용해서 만들어보았는데 만들면 만들수록 디자인은 보기에 안 좋고, 기능은 기능대로 점점 엉망진창이 되어갔습니다. .. 2023. 7. 27.
[HTML] 웹표준 제목(h1, h2, h3, h4, h5, h6) 요소 태그, heading tag HTML 제목 태그 ~ 의 종류와 개념 제목(h1~h6 요소)에는 h1 요소, h2 요소, h3 요소, h4 요소, h5 요소, h6 요소, 이렇게 여섯 단계가 있습니다. 요소는 큰 제목, 는 중간 제목, 는 작은 제목으로 사용하며, ~ 요소는 필요에 따라 이하의 제목에 사용하는게 기본입니다. 보통 이 가장 크게 표시되며 요소가 가장 작게 표시됩니다. 각각의 크기는 브라우저에 의존하지만 CSS의 font-size 속성으로 임의이 크기를 지정할 수도 있습니다. 제목1 입니다. 제목2 입니다. 제목3 입니다. 제목4 입니다. 제목5 입니다. 제목6 입니다. h1~h6 요소의 계층 구조에 주의 예컨데 h1 요소 다음에 h3 요소 지정은 계층 구조를 지키지 않은 것이 됩니다. 즉 h1 요소 다음에는 h2 요소,.. 2022. 7. 6.
[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.
반응형