css flex layout setting

흔히 id 또는 class에 적용하여 연속된 컬럼형태의 오브젝트를 가변형에 맞겍 유연하게 사용할 수 있다. 워드프레스의 컨테인 안에 속해 있는 컬럼을 가로폭에 맞춰서 가로 정렬하여 사용할수 있음. 컨테인의 id 또는 class 에 display 속성값에 flex을 선언하여 flexbox를 사용함으로 써 하위의 컬럼의 폭을 유연하게 변경할수 있다.

css gird layout 에대해 정리해보자

css gird layout 은 가장 혁신적인 레이아웃을 잡는 획기적인 모듈이라고들 말 한다.  쉽게 웹페이지상의 그리드를 이용하여 특정 위치를 활용할 수 있다.

웹폰트 속성에 대해 알아보자

웹폰트(Web Fonts)는 웹사이트에서 특정 폰트를 사용하기 위해 사용되는 기술입니다. 기본 시스템 폰트 이외의 다양한 폰트를 웹사이트에 적용할 수 있도록 해줍니다. 웹폰트를 사용하려면 몇 가지 속성을 알아야 합니다.

폰트-브라우져에서-깨져보일때

한글 폰트가 사파리 브라우저에서 그래픽이 깨져보이는 문제는 몇 가지 이유로 발생할 수 있습니다. 다음은 이 문제를 해결하기 위한 몇 가지 가능한 해결책입니다.

list-style 이미지 적용하기

list-style 이미지 속성을 적용하여 목록 항목에 이미지를 사용하려면 다음과 같이 CSS를 사용할 수 있습니다:

CSS를 사용하여 텍스트 스타일

CSS를 사용하여 텍스트를 스타일링할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 CSS 텍스트 스타일 속성입니다:

백그라운드 무빙 css 애니메이션 효과주기

백그라운드에 무빙(Moving) CSS 애니메이션 효과를 주기 위해 @keyframes 규칙을 사용할 수 있습니다. @keyframes 규칙은 애니메이션에 대한 키프레임(시작과 끝 상태)을 정의하는데 사용됩니다.

워드프레스 사이드 메뉴 카테고리 css 스타일 정의하기

워드프레스 사이드 메뉴 구현시 CSS 스타일 파일 입니다. 빠른 작업을 위한 Tip 으로 활용하시길 바랍니다.

모바일 CSS 소스

모바일 CSS를 설정하는 데 사용되는 일반적인 속성과 값에 대해 알려드리겠습니다. 모바일 기기에서 웹 페이지를 최적화하기 위해 다음과 같은 CSS 속성을 사용할 수 있습니다:

워드프레스 사이트 사이드메뉴 CSS 커스텀하기

css 코드 수정을 통해 위의 이미지와 같게 변경가능하다.  이를 활용한다면 추가적인 커스텀에 도움이 될 것으로 생각됩니다.

디바이스 기기 해상도에 따른 CSS 미디어쿼리 적용가이드

다양한 디바이스 기기 해상도에 따라 CSS를 적용하는 방법에 대해 안내해 드리겠습니다. 이를 통해 웹페이지가 다양한 화면 크기에서 일관된 사용자 경험을 제공할 수 있습니다.