반응형
기본적인 list들은 아래의 사이트를 참고하자
https://youknow301.tistory.com/79
HTML 리스트 list
HTML 설명 : 비순서형 리스트 태그이다. 예시코드 An unordered HTML list SamSung HYUNDAI SK 위의 코드를 실행해보면 옆에 동그란 점으로 리스트가 구성된 것을 알 수 있다. 여기서 는 list를 뜻하며 추후에
youknow301.tistory.com
https://youknow301.tistory.com/80
HTML 리스트 - Unordered Lists
비순서형 리스트 의 태그로 시작하여 요소 안에 로 시작이 되어야한다. An unordered HTML list SamSung HYUNDAI SK 비순서형 리스트 스타일 변경 CSS에서 list-style-type의 구조를 가지며 여러가지 type으로 바꿀
youknow301.tistory.com
여러가지 리스트 형식들(list-style-type)
아래의 예시를 보고 확인하자
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.ul1{
list-style-type:circle;
}
.ul2{
list-style-type:square;
}
.ol1{
list-style-type:lower-latin;
}
.ol2{
list-style-type:lower-greek;
}
</style>
</head>
<body>
<h2>리스트 list-style-type</h2>
<p>비순서형 리스트들 예시</p>
<ul class="ul1">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ul>
<br>
<ul class="ul2">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ul>
<p>순서형 리스트 예시</p>
<ol class="ol1">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ol>
<ol class="ol2">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ol>
</body>
</html>
list-style-image
리스트 형식에 사진을 집어넣을 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('eximages.jpg');
}
</style>
</head>
<body>
<h2>The list-style-image Property</h2>
<p>The list-style-image property specifies an image as the list item marker:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
리스트 항목 위치 지정
list-style-position:outside -> 글머리 기호가 리스트 항목 밖에 존재한다.
list-style-position:inside -> 글머리 기호가 리스트 항목 안쪽에 존재한다.
다음 아래의 예제코드와 결과를 보자
<!DOCTYPE html>
<html>
<head>
<style>
.a{
list-style-position: outside;
}
.b{
list-style-position: inside;
}
</style>
</head>
<body>
<h1>list-style-position 특성</h1>
<h2>list-style-position: outside (default)</h2>
<ul class="a">
<li>Computer - 컴퓨터구조를 보면 중앙처리장치 Central Processing Unit인 CPU, 운영체제 Operation System이 존재한다. </li>
<li>Register - 레지스터는 CPU가 요청을 처리하는데 필요한 데이터를 일시적으로 저장하는 기억장치이다.</li>
<li>Docker - 컨테이너 기반의 오픈소스 가상화 플렛폼이다.</li>
</ul>
<h2>list-style-position: inside</h2>
<ul class="b">
<li>Computer - 컴퓨터구조를 보면 중앙처리장치 Central Processing Unit인 CPU, 운영체제 Operation System이 존재한다. </li>
<li>Register - 레지스터는 CPU가 요청을 처리하는데 필요한 데이터를 일시적으로 저장하는 기억장치이다.</li>
<li>Docker - 컨테이너 기반의 오픈소스 가상화 플렛폼이다.</li>
</ul>
</body>
</html>
기본설정 제거
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Default list:</p>
<ul>
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ul>
<p>리스트의 bullets, margin, padding 제거:</p>
<ul class="demo">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ul>
</body>
</html>
리스트 스타일에 색상넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
ul{
background-color: aquamarine;
padding:20px;
}
ol{
background-color: red;
padding:20px;
}
ol li{
color:darkred;
background: yellow;
padding:10px;
margin-right: 20px;
}
</style>
</head>
<body>
<h2>리스트 list-style-type</h2>
<p>비순서형 리스트들 예시</p>
<ul class="ul1">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ul>
<br>
<ul class="ul2">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ul>
<p>순서형 리스트 예시</p>
<ol class="ol1">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ol>
<ol class="ol2">
<li>Computer</li>
<li>Register</li>
<li>Docker</li>
</ol>
</body>
</html>
반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] 테이블(tables)의 모든 것 (0) | 2023.09.12 |
|---|---|
| [CSS] Links 링크 (0) | 2023.09.12 |
| [CSS] Fonts(폰트)의 모든 것 (0) | 2023.09.11 |
| [CSS] 텍스트에 관한 모든 것 (0) | 2023.09.11 |
| [CSS] 높이 너비 최대-너비(Height, Width, Max-width) (0) | 2023.09.11 |
댓글