일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Archives
- Today
- Total
Tags
- zoom:1
- 레이아웃 잡기
- transform 전환효과
- Date 객체
- footer 고정
- ie7 핵
- Number 객체
- zoomin 효과
- 한빛미디어
- Object 객체
- css3
- transform 효과
- ie7 inline
- String 객체
- Array 객체
- 모던 웹을 위한 JavaScript + jQuery 입문
- 속성 scale
- float 깨짐
- display:inline-block
- css로 줌인 효과 주기
- css 줄바꿈
- HTML
- CSS
- CSS3 효과
- Math 객체
- CSS 효과주기
- html 줄바꿈
- 코딩 예제
- html br
- 속성 ease
마크업개발 메모장
html태그 <u>l과 <ol>의 차이점 본문
웹페이지를 만들다 보면 잘 짜여진 목록으로 메뉴를 만들거나, 컨텐츠 내용에 순서가 있는 목록을 작성해야 할때가 있다.
그럴때 블릿을 활용하게 되면 각 항목들이 한 줄에 표시되거나, 정렬이 순차적으로 잘 되어 편하게 쓸 수 있으며, 순차적인 마크업이 가능해 진다.
대부분의 웹브라우저는 <li>태그가 있으면 목록 항목의 시작부분에 블릿(글머리 기호)을 표시해 준다.
하지만 <li>태그는 <ul>이라는 부모 태그 하위에 지정해야 제대로 표시된다.
그 예제로 아래 코드를 참고 하자.
만약, 순차적인 목록 항목을 표시해야 한다면 <ul>이 아닌 <ol>태그를 사용해서 작성 할 수 있다.
그 예제로 아래 코드를 참고 하자.
그럴때 블릿을 활용하게 되면 각 항목들이 한 줄에 표시되거나, 정렬이 순차적으로 잘 되어 편하게 쓸 수 있으며, 순차적인 마크업이 가능해 진다.
대부분의 웹브라우저는 <li>태그가 있으면 목록 항목의 시작부분에 블릿(글머리 기호)을 표시해 준다.
하지만 <li>태그는 <ul>이라는 부모 태그 하위에 지정해야 제대로 표시된다.
그 예제로 아래 코드를 참고 하자.
위와 같이 작성 한다면 웹브라우저에서는 다음 아래와 같이 블릿과 항목들이 각 한줄에 출력 되는 것을 확인 할 수 있다.ul li 테스트 입니다.
- 소개
- 영화리뷰
- 하루일과
ul li 테스트 입니다.
- 소개
- 영화리뷰
- 하루일과
만약, 순차적인 목록 항목을 표시해야 한다면 <ul>이 아닌 <ol>태그를 사용해서 작성 할 수 있다.
그 예제로 아래 코드를 참고 하자.
위와 같이 작성 한다면 웹브라우저에서는 다음 아래와 같이 숫자 블릿과 항목들이 각 한줄에 출력 되는 것을 확인 할 수 있다.ol li 테스트 입니다.
- 소개
- 영화리뷰
- 하루일과
ol li 테스트 입니다.
- 소개
- 영화리뷰
- 하루일과
이처럼 간편하게 블릿을 사용하여 목록을 작성 할 수 있다.
'HTML/CSS' 카테고리의 다른 글
CSS3 animation를 이용한 이미지 움직이기 (0) | 2014.11.19 |
---|---|
CSS3 transition 속성 (0) | 2014.11.17 |
푸터 하단 고정방법 (0) | 2014.08.28 |
사파리에서 깨지는 레이아웃 잡기 (0) | 2014.08.27 |
나눔고딕 웹폰트 사용하기 (0) | 2013.02.04 |