-
목록과 리스트(ul, li)
리스트 태그 - 브라우저를 사용할 때 리스트를 인식하기 위하여 사용
[ul]
목록의 역할
[li]
리스트 역할
- 제목은 재목태그(h태그)를 추가적으로 작성 해줘야 한다.
[주의사항]
1. ul 태그 안에는 li태그만 사용할 수 있고, li태그 안에는 모든 태그를 사용할 수 없다.때문에 너무 큰 구조에 ul, li를 활용하는 것은 코딩할 때 헷갈릴 수 있다.
2 ul, li 태그는 독단적으로 사용할 수 없다. ul태그 없이 li태그를 쓸 수 없고,
li태그 없이 ul태그를 쓸 수 없다. (웹 표준에 어긋나는 코드이다.
[개발자 모드]
1. 미리보기 화면에서 원하는 태그에 우클릭 - 검사를 누르면 관련된 css정보를 확인할 수 있다.
2. 개발자 모드 왼쪽 상단에 점선 화살표 아이콘을 클릭하고 미리보기 화면 태그에 마우스를 올리면 팝업창에 간단한 css정보를 확인할 수 있다.
3. 개발자 모드 css파일에서는 기본적으로 들어있는 코드와 내가 작성한 코드를 따로 확인할 수 있다.
index.html-24ae1963... -> 내가 작성한 코드
user agent styleshee -> 기본적으로 들어있는 코드
[ul, li, body 노멀라이즈]
body와 ul에 기본적으로 여백값이 들어있기 때문에 margin: 0; padding: 0;이라는 코드를 작성해서 한번에 노멀라이즈 진행
li는 추가적으로 함께 노멀라이즈 하기 위해 같이 선택 후 list-style: none;(동그라미 형태 삭제)라는 코드로 노멀라이즈 진행
위 태그를 사용하여 기본값으로 변경 후 사용해주는 것이 좋다
[활용예시]
1. 네비바 네이케이션바(목록)
- 메뉴 리스트1
- 메뉴 리스트2
- 메뉴 리스트3
- 메뉴 리스트4
2. 아이콘 아이콘 박스(목록)
-. 아이콘 리스트 1(목록=
-. 아이콘 리스트 2(목록)
-. 아이콘 리스트 3(목록)
-. 아이콘 리스트 4(목록)
3. 상품 리스트 (상품목록x)
상품리스트(목록)
-. 이미지 리스트(리스트) -. 버튼 리스트(리스트) -. 제목 리스트(리스트) -. 본문 리스트(리스트)
ul태그 안에는 li와 다른 태그가 들어올 수 없기 때문에 제목 태그를 바깥쪽에 작성했다
제목태그(h1~h6)
[h태그 특징]
1. 기본적으로 상하마진값을 가지고 있다.
2. h1 ~ h6 순서대로 작성해야 한다.*h1은 html문서 내에서 딱 한번만 사용할 수 있다.
다른 것들은 여러 번 사용할 수 있다.★★ 로고 이미지나 코드는 h1태그 안에 작성한다★★
ㄴ가장 상단에 첫번째로 들어오는 의미있는 구조이기 때문이다
ex) 예시1_틀린형태
<h1>제목1</h1>
<h3>제목3</h3>
ex) 예시2_맞는형태
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
ex) 예시3_틀린형태
<h1>제목1</h1>
<h1>제목1</h1>
<h2>제목2</h2>
목록/리스트 태그와 제목태그를 활용한 삼성디자인 구현
리스트 태그를 사용한 코드 
display: flex;를 사용하기 전에 기본 설정부터 마쳐야 한다. text-alingn은 쓰려는 코드를 상속하는 코드에 사용해야한다.
요소에 붙어 사용해야 하기 때문에 가운데 정렬은 상속받아 하는 것이 좋음 
라인하이트를 사용하면 유지보수가 힘들기 때문에 보통 플렉스를 한번 더 사용해서 유지보수에 능하게 한다 
★중요 이해★
가운데 정렬 margin auto 시도해보기....