-
목록관련 태그Frontend/HTML 2024. 5. 27. 20:11
02 목록 관련 태그 ul(UnOrdered List) : 순서가 없는 목록
li(List Item) : 목록의 한 줄
-
점심메뉴
- 김밥
- 샌드위치
- 라면
- 순대국밥
ol(Ordered List) : 순서가 있는 목록
type "속성" : 표시되는 숫자 모양을 변경 type "a" : 영어 소문자로 시작(a, b, c, ...) type "A" : 영어 대문자로 시작(A, B, C, ...) type "i" : 로마 소문자로 시작(i, ii, iii, ...) type "I" : 로마 대문자로 시작(I, II, III, ...) type "1" : 숫자로 시작(1, 2, 3, ...) start "속성" : 시작하는 숫자 지정 reverse : 거꾸로 시작(역순) 순서 ol 태그 작성후 li 태그 작성하기- 사과
- 포도
- 키위
- 망고
- 멜론
- 사과
- 포도
- 키위
- 망고
- 멜론
dl(Description List) 태그 : 설명 목록
dl 태그 : 설명 목록이 작성될 공간 dt 태그 : 설명 제목(Description Title) dd 태그 : 설명 내용(Description Data)- 김밥
- 밥에 양념을 하고 양념한 밥을 김에 넣고 각종 채소를 넣은 음식
- 종류 : 참치, 김치, 야채, 치즈, 돈까스 등
- 라면
- 물과 동시에 스프랑 면을 넣고 3분간 끓여서 먹는 음식
- 종류 : 해물, 차돌, 콩나물, 숙주
목록을 이중으로 여러개 작성
- 분식
- 김밥
- 돈까스
- 양식
- 파스타
- 피자
HTML 코드
<!DOCTYPE html> <!-- language 언어 약자로 lang 사용, Korean 한국어의 약자로 ko 사용 html 코드에는 한국어가 들어갈 것임을 표현한 것 필수 X meta : metadata 의 약자이며 데이터에 대한 정보를 제공하는 것 주로 meta 를 앞에 붙일 때는 정보를 전달 head 안에서만 사용하도록 권고 charset : 문자를 깨짐 없이 전달 (UTF-8 같은 경우에는 한글을 깨짐 없이 작성해주기 위한 설정) meta charset="UTF-8" lang="ko" : 웹에서 한국어로 올바르게 언어 설정 진행 , 검색할 때 검색 엔진에 노출되는 언어 지정 charset="UTF-8" : 01~~ 로 읽는 컴퓨터가 한글을 읽었을 때 글자가 깨짐없이 읽을 수 있도록 설정 UTF-8 : 한국에서만 작성하는 것이 아니라 다양한 다른 나라 언어도 설정이 가능 --> <html lang="ko"> <head> <!-- html 로 코드 시작 --> <title>02 목록 관련 태그</title> <!-- 파일 제목과 사용자들에게 보여지는 탭 제목이 달랐으면 할 때 작성--> <meta charset="UTF-8" /> <!-- meta 는 head 안에서만 작성할 것 --> </head> <body> <h1>ul(UnOrdered List) : 순서가 없는 목록</h1> <h1>li(List Item) : 목록의 한 줄</h1> <ul> 점심메뉴 <li>김밥</li> <!-- 단축키 : shift alt ↑ or ↓--> <li>샌드위치</li> <li>라면</li> <li>순대국밥</li> </ul> <h1>ol(Ordered List) : 순서가 있는 목록</h1> <pre> type "속성" : 표시되는 숫자 모양을 변경 type "a" : 영어 소문자로 시작(a, b, c, ...) type "A" : 영어 대문자로 시작(A, B, C, ...) type "i" : 로마 소문자로 시작(i, ii, iii, ...) type "I" : 로마 대문자로 시작(I, II, III, ...) type "1" : 숫자로 시작(1, 2, 3, ...) start "속성" : 시작하는 숫자 지정 reverse : 거꾸로 시작(역순) 순서 ol 태그 작성후 li 태그 작성하기 </pre> <ol type="1" start="3" reversed> <li>사과</li> <!-- 숫자 3으로 시작하는 사과 --> <li>포도</li> <!-- reverse 를 사용했기 때문에 2. 포도 --> <li>키위</li> <!-- 1. 키위 --> <li>망고</li> <!-- 0. 망고 --> <li>멜론</li> <!-- -1. 멜론 --> </ol> <!-- 만약 c 부터 시작하길 원하면 tpye="a" start="3" --> <ol type="1" start="3"> <!-- start="3" 이기 때문에 3 시작 --> <li>사과</li> <!-- 숫자 3으로 시작하는 사과 --> <li>포도</li> <!-- reverse 를 사용X 4. 포도 --> <li>키위</li> <!-- 5. 키위 --> <li>망고</li> <!-- 6. 망고 --> <li>멜론</li> <!-- 7. 멜론 --> </ol> <h1>dl(Description List) 태그 : 설명 목록</h1> <pre> dl 태그 : 설명 목록이 작성될 공간 dt 태그 : 설명 제목(Description Title) dd 태그 : 설명 내용(Description Data) </pre> <dl> <dt>김밥</dt> <dd>밥에 양념을 하고 양념한 밥을 김에 넣고 각종 채소를 넣은 음식</dd> <dd>종류 : 참치, 김치, 야채, 치즈, 돈까스 등</dd> <dt>라면</dt> <dd>물과 동시에 스프랑 면을 넣고 3분간 끓여서 먹는 음식</dd> <dd>종류 : 해물, 차돌, 콩나물, 숙주</dd> </dl> <h1>목록을 이중으로 여러개 작성</h1> <ul> <li>분식</li> <ol> <!-- 아무 값이 없으면 숫자 1 부터가 디폴트 --> <li>김밥</li> <li>돈까스</li> </ol> <li>양식</li> <ol> <li>파스타</li> <li>피자</li> </ol> </ul> </body> </html> <!-- html 로 코드 종료 -->