반응형
안녕하세요 : )
오늘은 간단한 css 속성들을 정리해볼까 합니다.
바로 시작해보죠
CSS 목록 속성
HTML에서는 목록을 표시하는 태그가 <ul>, <ol>이 존재합니다.
순서가 없는 목록과 순서가 있는 목록을 기본값이 아닌 다양한 형태의 목록을 만들 수 있습니다.
1. list-style-type : 목록의 불릿과 번호 스타일 지정
| 순서가 없는 목록 <ui> | 순서가 있는 목록 <ol> | ||
| disc | 채운 원 (기본값) | decimal | 1로 시작하는 십진수 (기본값) |
| circle | 빈원 | decimal-leading-zero | 앞에 0이 붙는 십진수 |
| square | 채운 사각형 | lower-roman | 소문자 로마 |
| none | 불릿 없음 | upper-roman | 대문자 로마 |
| - | - | lower-alpha | 소문자 알파벳 |
| - | - | upper-alpha | 대문자 알파벳 |
<head>
<title>순서없는 목록</title>
<style>
.style_dics{list-style-type: disc;}
.style_circle{list-style-type: circle;}
.style_square{list-style-type: square;}
.style_none{list-style-type: none;}
</style>
</head>
<body>
<ul>
<li>Time is gold.</li>
<li class="style_disc">No sweat, no sweet.</li>
<li class="style_circle">Asking costs noting.</li>
<li class="style_square">Step by step goes a long way</li>
<li class="style_none">You will never know untill you try.</li>
</ul>
</body><head>
<title>순서가 있는 목록</title>
<style>
.style_decimal{list-style-type: decimal;}
.style_zero{list-style-type: decimal-leading-zero;}
.style_lower_roman{list-style-type: lower-roman;}
.style_upper_roman{list-style-type: upper-roman;}
.style_lower_alpha{list-style-type: lower-alpha;}
.style_upper_alpha{list-style-type: upper-alpha;}
</style>
</head>
<body>
<ol>
<li>Time is gold.</li>
<li class="style_decimal">No sweat, no sweet.</li>
<li class="style_zero">Asking costs noting.</li>
<li class="style_lower_roman">Step by step goes a long way</li>
<li class="style_upper_roman">You will never know untill you try.</li>
<li class="style_lower_alpha">Time is gold.</li>
<li class="style_upper_alpha">No sweat, no sweet.</li>
</ol>
</body>실행결과
2. list-style-position : 목록에 들여 쓰는 효과 내기
실제 내용이 시작되는 위치에 불릿이나 숫자가 표시되기 때문에 결과 화면에서 안쪽으로 들여 쓸 수 있다.
inside : 불릿이나 숫자를 안쪽으로 들여 쓰기
outside : 기본값
<style>
ul{list-style-position: outside;}
ol{list-style-position: inside;}
</style>
</head>
<body>
<ul>
<li>Time is gold.</li>
<li class="style_disc">No sweat, no sweet.</li>
<li class="style_circle">Asking costs noting.</li>
<li class="style_square">Step by step goes a long way</li>
<li class="style_none">You will never know untill you try.</li>
</ul>
<ol>
<li>Time is gold.</li>
<li class="style_decimal">No sweat, no sweet.</li>
<li class="style_zero">Asking costs noting.</li>
<li class="style_lower_roman">Step by step goes a long way</li>
<li class="style_upper_alpha">You will never know untill you try.</li>
</ol>
</body>실행결과
3. list-style-image : 불릿 대신 이미지 넣기
이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 맞는 이미지를 만들어야 합니다.
list-style-image : url("이미지 경로");
<head>
<style>
ul{list-style-image:url("check_box.png");
</style>
</head>
<body>
<ul>
<li>Time is gold.</li>
<li>No sweat, no sweet.</li>
<li>Asking costs noting.</li>
<li>Step by step goes a long way</li>
<li>You will never know untill you try.</li>
</ul>
</body>실행결과
4. list-style : 위에서 언급한 모든 list-style 속성을 이용한 스타일 한 줄 표현
list-style : circle inside url("이미지 경로");
CSS 그림자 속성
1. text-shadow : 해당 텍스트에 간단히 그림자 효과 적용
2. box-shadow : 해당 html 요소에 간단한 그림자 효과 적용
box-shadow : 그림자의 x축 값 그림자의 y축 값 blue값 색상값;
<head>
<style>
div{
width: 200px;
height: 100px;
border-radius: 20px;
text-align: center;
line-height: 100px;
}
.text_shadow{text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);}
.box_shadow{box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);}
</style>
</head>
<body>
<h1>Time is <span class="text_shadow">gold</span>.</h1>
<div class="box_shadow">Time is gold.</div>
</body>실행결과
반응형
댓글