728x90
목차
CSS로 웹 페이지의 목록을 아름답게 디자인하기 📃✨
안녕하세요, 디자인 마법사 여러분! 🎨 오늘은 웹 페이지에서 자주 사용되는 목록 요소를 더욱 강조하고 아름답게 만드는 방법에 대해 알아보려고 합니다. HTML에서는 <ul> (비순차 목록)과 <ol> (순차 목록) 태그를 통해 목록을 생성하지만, CSS를 활용하면 이러한 기본 목록 스타일을 원하는 대로 변형할 수 있습니다.
1. 기본 목록 스타일 제거하기
기본적으로 웹 브라우저는 <ul>에 점 모양의 표시자를, <ol>에는 숫자를 표시합니다. 이러한 기본 스타일을 제거하려면 list-style-type 속성을 사용합니다.
ul, ol {
list-style-type: none;
}
2. 목록 표시자(list markers) 스타일 지정하기
목록 앞에 원하는 모양이나 이미지를 표시하려면, list-style-type 또는 list-style-image 속성을 사용합니다.
- 사각형 점 표시:
ul {
list-style-type: square; /* 사각형 점 표시 */
}- 원형 점 표시:
ul {
list-style-type: circle; /* 중첩된 목록 등에서 사용되는 빈 원형 점 */
}- 한자 표시:
ul {
list-style-type: cjk-ideographic; /* 한자 형태의 표시자 */
}- 이미지를 표시자로 사용:
ul {
list-style-image: url('path-to-image.png');
}
3. 목록의 여백과 들여쓰기 조절하기
목록 주위의 여백을 조절하려면 margin 속성, 목록 내용의 들여쓰기를 조절하려면 padding 속성을 사용합니다.
ul {
margin: 20px 0;
padding-left: 40px;
}
4. 순차 목록의 숫자 스타일 지정하기
<ol>에서는 list-style-type 속성을 활용하여 숫자 외의 여러 스타일을 적용할 수 있습니다.
- 소문자 로마 숫자:
ol {
list-style-type: lower-roman; /* i, ii, iii... */
}- 소문자 알파벳:
ol {
list-style-type: lower-alpha; /* a, b, c... */
}- 대문자 알파벳:
ol {
list-style-type: upper-alpha; /* A, B, C... */
}
마치며
목록은 정보를 정리하고 강조하는 데 중요한 역할을 합니다. CSS의 다양한 스타일링 기능을 활용하면, 보다 독창적이고 사용자에게 친숙한 디자인의 목록을 만들 수 있습니다. 다음 포스트에서는 더 많은 디자인 팁을 함께 공유하도록 하겠습니다. 오늘도 즐거운 디자인 여정을 위해 함께해주셔서 감사합니다! 📘🖍️🍀
