눈길을 끄는 목록을 만들기위한 CSS

• 할 수있다 18, 2024

목록은 최종 사용자가 쉽게 읽을 수 있기 때문에 훌륭한 웹 디자인 요소입니다. 대부분의 사용자는 빠른 답변을 원하며 처음에는 웹 사이트를 건너 뛰어 질문에 대한 답변인지 확인합니다. 그들이 검색 엔진을 통해 귀하의 웹 사이트에 입력하는 경우 특히 그렇습니다.

제목 태그와 목록을 사용하면 사람들이 웹 사이트의 기본 콘텐츠를 쉽게 볼 수있는 좋은 방법입니다. 목록과 소제목이 흥미 롭다고 생각되면 사이트에 남아있을 가능성이 더 큽니다. 물론 이탈률이 낮아지고 웹 사이트의 신뢰성과 엔진 순위가 향상됩니다. 가독성을 향상시키고 눈을 쉽게 탈피 할 수있는 것은 웹 사이트에 항상 도움이됩니다. 훌륭한 디자인은 항상 가독성을 염두에 둡니다.

CSS는 사용자 정의 글 머리 기호 (마커)를 사용하여 세련된 목록을 작성하는 쉽고 효과적인 방법입니다. 웹 사이트의 로고, 색상 또는 테마와 연결되는 다양한 모양 또는 간단한 사용자 정의 그래픽을 포함 할 수 있습니다. 예를 들어, ghost tours 웹 사이트에서 측면 탐색 모음과 기본 페이지의 순서가없는 목록 항목에 사용되는 작은 유령 아이콘을 만들었습니다. 단순하지만 매우 귀엽고 사이트 테마에 연결되어 해당 페이지 요소가 눈에 making니다.

다른 경우 글 머리 기호가 목록의 중요한 내용에서 산만해질 수 있습니다. 이 경우 "없음"의 목록 스타일 속성을 사용하여 자동으로 생성 된 마커를 제거 할 수 있습니다.

리스트 스타일 속성

list-style-type 속성을 사용하여 각 목록 항목과 함께 표시되는 마커 유형을 선택하십시오. 사용 가능한 값은 disc, circle, square, decimal, lower-roman, upper-roman, lower-greek, lower-latin, upper latin, lower-alpha, upper-alpha 및 none입니다.

자신의 이미지를 마커로 지정하려면 다음과 같이 list-style-image 속성을 사용하십시오.

ul {list-style-image : url (imagename.jpg);
목록 스타일 위치 : 외부;
}

URL은 스타일 시트를 기준으로하며 이미지가있는 폴더를 가리켜 야합니다. 이 경우 이미지는 css 및 html 파일과 동일한 폴더에 있습니다. 이미지를 별도의 폴더에 배치하면 다음도 포함됩니다. url (images / imagename.jpg)

마커 위치

마커 위치를 사용자 정의 할 수도 있습니다. 위의 예에서 outside 속성은 글 머리 기호를 내용 영역 외부에 표시합니다.
list-style-position : inside는 내용 영역 내부의 글 머리 기호를 허용하여 목록 내용으로 들어갑니다.

속기 기술

CSS를 사용하여 목록을 형식화하는 또 다른 빠른 방법은 속기 기술입니다. 이 방법을 사용하면 모든 목록 속성이 하나의 단일 속성으로 지정됩니다.

ul
{
목록 스타일 : circle url ( "image.gif");
}

속기 방법에서 모든 값은 다음과 같이 지정된 순서로 나타나야합니다.

리스트 스타일
목록 스타일 위치 (내부, 외부)
리스트 스타일 이미지

다른 값이 올바른 순서로 유지되는 한 값을 건너 뛰더라도 문제가되지 않습니다.

사용자 정의 목록은 매우 유용하며 CSS를 통해 쉽게 달성 할 수 있습니다. 간단한 세부 정보는 일반 웹 사이트를 최고의 웹 사이트로 변환합니다.

비디오 지침: Wix SEO 마법사 | Google 검색 순위 향상의 시작 (할 수있다 2024).