- display와 float의 개념이 빠진 상태에서 마음먹은대로 코드를 작성해서 어떻게든 해보려고 했는데 좀 더 정리된 방법을 써보고 싶어서 그런 부분을 알아봤습니다.
* 디스플레이(배치 방법을 결정하는 속성)
| 유형 | 설명 |
| 차단하다 | 인라인 수준 요소를 한 줄을 차지하는 블록 수준 요소로 만듭니다. → 수직 탐색 기본적으로 width:100%;이며 height, width, margin, padding 등의 값을 설정할 수 있습니다. |
| 줄을 서서 | 블록 수준 요소가 인라인 수준 요소가 되어 콘텐츠만큼 많은 공간 차지 → 수평 탐색 너비와 높이가 없고 왼쪽과 오른쪽 여백과 패딩만 있음 |
| 인라인 블록 | 속성 값 속성, 테두리 및 패딩이 모두 있는 요소를 지정할 수 있습니다. |
* Float(좌우 정렬 속성)
블록 수준 요소를 정렬하고 문서 위에 웹 요소를 띄웁니다.
위치: 절대; 사용하지 않음
가로 탐색 방식
1) 인라인 블록 → (디스플레이:li까지 인라인 블록 결정, 마진 결정) + (디스플레이:a까지 블록 결정, 패딩 결정)
2) 부동 → (float:left in left) + (set display: block in left a, set padding)
1) 기본 여백과 패딩이 있지만 2) 기본 여백과 패딩이 없으므로 필요한 경우 지정하고 clear 속성으로 플로팅을 비활성화해야 합니다.
부동은 요소 간에 독립성을 갖습니다. 그 이유는 float 속성을 지정하는 인라인 요소가 블록 요소로 변경되어 float가 차지하는 줄을 무시한다고 합니다.
따라서 내가 display:block 및 float:left를 li에 썼을 때 블록이 무시되고 수평으로 정렬된 것처럼 보입니다.
다른 구글 검색 결과를 보면 nav는 display:block, ul은 float:right, li은 display:inline-block도 설정되어 있는데 다른 방법을 배울수록 헷갈리네요…ㅎㅎ