반응형
css 리스트를 꾸밀 때 사용하는 기본 프로퍼티 알아보기
네 안녕하세요, 이번 포스팅에서는 리스트를 꾸미는 방법애 대하여 알아보도록 할 건데,
그중에서 리스트를 꾸밀 때 스는 기본 프로퍼티에 대하여 간략히 알아보는 시간을 가져보려 합니다.
우리가 그냥 html 태그를 이용해서 리스트를 만들면 다소 밋밋해 보일 수 있습니다.
그래서 그럴 때 사용을 합니다.
그러면 그러한 프로퍼티가 어떤 것들이 있는지 한 번 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 리스트 꾸미기 프로퍼티 알아보기
일단 리스트를 꾸미지 않은 html 태그와,
그걸 작성해서 열어 본 웹을 보여드리도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 꾸미기</title>
</head>
<body>
<h3>커피 메뉴</h3>
<hr>
<ul>
<li>Espresso</li>
<li>Cappuccino</li>
<li>Cafe Latte</li>
</ul>
</body>
</html>
반응형
기본적으로 이런 식으로 짭니다.
그럼 결과가 어떤 식으로 나오는 지 한 번 보도록 하겠습니다.
css를 적용하지 않고 그냥 html만 작성하면 이렇게 나옵니다.
그래서 다소 밋밋해 보입니다.
그럼 이럴 때 쓰는 프로퍼티는 무엇이 있는지 알아보겠습니다.
아래의 표에 제가 정리를 했습니다.
| 프로퍼티 | 설명 |
| list-style-type | 아이템 마커 타입 지정 |
| list-style-image | 아이템 마커 이미지 지정 |
| list-style-position | 아이템 마커의 출력 위치 지정(아이템 영역 내부 또는 외부에 지정) |
| list-style | 위 3개의 값을 한 번에 지정하는 단축 프로퍼티 |
이렇게 있습니다.
여기까지 리스트를 꾸밀 때 사용하는 단축 프로퍼티에 대하여 알아보았습니다.
다음 포스팅 부터는 직접 이들을 사용해 가며 리스트를 꾸며보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css list-style-position 프로퍼티로 마커 위치 조정하기 (0) | 2023.04.24 |
|---|---|
| css background 프로퍼티로 리스트와 아이템에 배경 지정하기 (0) | 2023.04.24 |
| css overflow 프로퍼티로 콘텐츠 자르기 (0) | 2023.04.24 |
| css visibility 프로퍼티로 태그 숨기거나 공개하기 (0) | 2023.04.24 |
| css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 (0) | 2023.04.24 |
댓글