CSS 코드를 사용하여 HTML의 글머리 기호 목록을 정렬합니다.
웹 디자이너는 글머리 기호와 텍스트를 추가하는 것 이상의 용도로 글머리 기호 목록을 사용합니다. 글머리 기호 목록을 만드는 데 사용되는 HTML 태그는 메뉴를 만들거나 JavaScript가 슬라이드쇼에 로드할 이미지를 구성하는 데 유용합니다. HTML 속어로 "순서 없는 목록"이라고 하는 글머리 기호 목록과 함께 계단식 스타일 시트 코드를 사용하는 방법을 배우면 몇 가지 흥미로운 웹 디자인 가능성이 열립니다.
1 단계
글머리 기호 목록이 포함된 HTML 파일을 열고 코드 상단을 향한 태그와 태그 사이를 찾습니다. 태그가 아직 없는 경우 태그를 추가합니다. 코드에 다음이 포함된 경우 태그 뒤 어딘가에 태그를 지정하고 CSS 파일에 대한 참조가 포함된 경우 해당 파일을 대신 엽니다. CSS 코드는 태그 사이 또는 CSS 파일의 새 줄로 이동합니다.
오늘의 비디오
2 단계
"텍스트 정렬"을 설정하여 모든 글머리 기호 내의 텍스트를 정렬합니다.
- 꼬리표. 그만큼
- 그리고 태그를 사용하여 단일 목록의 일부로 정의합니다. 텍스트를 정렬할 때
- 태그가 주위를 감쌉니다.
- 태그의 경우 정렬은 모든 글머리 기호의 텍스트에 영향을 주지만 목록 자체를 페이지의 왼쪽 또는 오른쪽에 정렬하지는 않습니다. 다음은 "텍스트 정렬"을 설정하는 CSS 코드의 예입니다.
ul {텍스트 정렬: 오른쪽;}
글머리 기호는 텍스트와 함께 움직이지 않습니다. 이 경우 총알은 왼쪽에 있습니다.
3단계
"float"를 설정하여 전체 목록을 페이지의 왼쪽이나 오른쪽에 맞춥니다.
- 꼬리표. "float"가 왼쪽 또는 오른쪽으로 설정된 경우
- 태그를 사용하면 전체 글머리 기호 목록을 페이지의 왼쪽이나 오른쪽으로 이동합니다. 다음과 같이 float를 설정합니다.
ul {float: 오른쪽;}
"float"를 왼쪽이나 오른쪽으로 설정할 수 있지만 중앙은 설정할 수 없습니다.
4단계
당신의
- 태그
그리고
태그를 사용하여 페이지의 글머리 기호 목록 중앙에 배치할 래퍼를 만듭니다. 결과 코드는 다음과 같습니다.- 목록 항목
- 목록 항목
그만큼
태그는 그 자체로 아무 것도 중앙에 배치하지 않습니다. CSS를 사용하여 모든 것을 중앙에 배치해야 합니다. 사이에 다음 코드를 추가하십시오.
