WordPress

워드프레스 GeneratePress 테마 수정을 하는 과정을 기록한 포스팅입니다. 이번 포스팅에서는 메인 내비게이션 바(Primary Navigation)를 블로그 최상단으로 배치합니다. 그 후 스크롤 시에도 메인 내비게이션 바가 항상 최상단에 고정이 되어있도록 CSS를 수정합니다. Primary Navigation 이란 GeneratePress 테마에서 Primary Navigation(메인 내비게이션 바)은 웹사이트 탐색의 편의성을 위해 쉽게 블로그 카테고리 페이지에 접근할 수 있도록 도와주는 부분이다. 이하의 이미지에서 빨간색 … Read more

워드프레스 편집기로 글을 쓸 때 마우스를 많이 써야하는 것에 불편함을 느껴서 고민을 하다가, 로컬에서 마크다운으로 글을 작성하고 워드프레스 편집기에 복붙만 하면 되는 환경을 만들어 보고 있다. 이번엔 GeneratePress 테마에 Prism을 적용한다. 개요 깃허브 디폴트 스타일의 코드 블럭은 라인 넘버를 표시하지 않는다. 나는 코드 블럭에 라인 넘버(행 번호, line number)와 복사하기 버튼(Copy Button)을 표시하고 싶다. Prism … Read more

워드프레스 편집기로 글을 쓸 때 마우스를 많이 써야하는 것에 불편함을 느껴서 고민을 하다가, 로컬에서 마크다운으로 글을 작성하고 워드프레스 편집기에 복붙만 하면 되는 환경을 만들어 보고 있다. 이번엔 VSCode을 사용해 Markdown to html로 변환하고 Github style을 적용한다. Visual Studio Code 개요 워드프레스 편집기에도 마크다운 블록이 있긴하지만 원하는 스타일이 아니어서 현 시점에는 직관적으로 표현이 가능한 html 블록을 … Read more

워드프레스 GeneratePress 테마 수정을 하는 과정을 기록한 포스팅입니다. 이번 포스팅에서는 포스팅 내부의 제목요소(헤딩태그 h1~h6)에 대해서 설명하고, GeneratePress 테마 사용시에 포스팅 내부에 있는 h1~h6 태그의 디자인을 변경하는 방법에 대해서 다룹니다. 제목요소(HTML 헤딩태그)란? HTML에서 헤딩 태그(h1~h6)는 제목이나 소제목을 나타내는 데 사용되며, 총 6단계의 크기로 구분된다. h1은 가장 중요한 제목을 나타내며, h6은 가장 낮은 수준의 제목을 나타낸다. 이하의 … Read more

워드프레스 GeneratePress 테마 수정을 하는 과정을 기록한 포스팅입니다. 이번 포스팅에서는 CSS 미디어 룰(CSS @media rule)을 사용하여 반응형 디자인을 하는 방법에 대해 다룹니다. 스크린 사이즈에 따라 글 목록 UI을 변경해 출력합니다. GeneratePress 테마 : 수정 전 글 목록 UI 이전 포스팅(바로가기)에서는 카테고리에서 보이는 글 목록 UI을 하단의 이미지처럼 변경해 줬다. 이게 데스크탑이나 타블렛에서는 적절한 디자인으로 보여서 … Read more