HTML 샘플 / 텍스트 태그 / 목록 태그
HTML - 내용 : 웹브라우저를 통해서 사용자에게 보이는 웹 문서를 작성 CSS - 디자인 : 기존 HTML파일에 다양한 모양을 추가,변경하여 디자인을 표현 Java Script - 기능 / 동적 제어 : 웹 문서에 움직임
jinaon.tistory.com
목록태그 HTML으로 생성한 것에 CSS로 디자인 요소를 추가할 수 있다.
1. 리스트 블릿기호 변경 : list-style-type
1. ul (unordered list)
list-style-type 리스트 블릿기호 태그속성 - none, disc, circle, square
1.none
블릿기호 출력안함
2. disc
블릿기호 : 까만점
3. circle
블릿기호 : 하얀 원
4. square
블릿기호 : 사각형
2. ol(ordered list)
list-style-type 리스트 블릿기호 태그속성 - none, disc, circle, square
1. lower-roman
로마숫자 소문자
2. upper-roman
로마숫자 대문자
3. lower-alpha
알파벳 소문자
4. upper-alpha
알파벳 대문자
5. decimal
숫자
6. none
블릿기호 출력안함
<style>
ul{
list-style-type : disc;
list-style-position: inside;
}
ol{
list-style-type: lower-roman;
}
</style>
2. 블릿기호에 이미지 사용하기 : list-style-image
<style>
ul{
list-style-image : url(bullet.png);
}
</style>
블릿기호 대신에 원하는 이미지파일을 적용할 수도 있다.
list-style-image에 이미지 경로를 잡아주어 설정할 수 있다.
3. 목록 들여쓰기 / 내어쓰기 : list-style-position / text-indent
1. list-style-position: inside/outside
위의 예시는 로마자소문자 태그 외에는 아무런 태그를 걸지 않았고,
아래 예시에는 들여쓰기를 위해 list-style-position: inside 태그를 추가한 것이다.
비교했을 때 inside로 들여쓰기 되었지만, 문장이 길어져서 내려올 때 두번째줄부터는 들여쓰기가 되지 않는다.
이것을 해결하기 위해서는 text-indent를 사용한다.
2. text-indent
px, em 등을 이용해 문단의 첫 줄에 대한 들여쓰기/ 내어쓰기를 할 수 있다.
음수는 왼쪽으로 이동하여 내어쓰기 / 양수는 오른쪽으로 이동하여 들여쓰기를 적용한다.
text-indent: -1em 을 추가해서 해결하였다.
문단의 첫줄에 음수값을 입력해서 왼쪽으로 내어쓰기가 적용되었다. 원하는 모습으로 두번째줄 들여쓰기가 적용된다.