HTML+CSS 기본

HTML+CSS 기본

CSS에서 html의 태그 요소는 일반적으로 블록 요소, 인라인 요소(인라인 요소라고도 함) 및 인라인 블록 요소의 세 가지 유형으로 나뉩니다.

일반적으로 사용되는 블록 요소는

,

,

...

,

,

,

, , ,

,

일반적으로 사용되는 인라인 요소는

, , ,
, 입니다. , , , , , ,

일반적으로 사용되는 인라인 블록 요소는

,

블록 수준 요소의 특징:

1. 각 블록 수준 요소는 새 줄에서 시작하고, 이후 요소도 새 줄에서 시작합니다. (너무 횡포해서 블록 수준 요소가 한 줄을 차지합니다.)

2. 요소의 높이, 너비, 줄 높이, 상하 여백을 설정할 수 있습니다.

3. 요소의 너비가 설정되지 않은 경우 너비가 설정되지 않은 한 요소의 너비는 상위 컨테이너의 100%입니다(상위 요소의 너비와 동일).

인라인 요소의 특징:

1. 다른 요소와 같은 줄에

2. 요소의 높이, 너비, 위쪽 및 아래쪽 여백을 설정할 수 없습니다. ;

3. 요소의 너비는 포함된 텍스트 또는 이미지의 너비이며 변경할 수 없습니다.

인라인 블록 요소 특징:

1. 다른 요소와 같은 줄에

2. 요소 모두 설정할 수 있습니다.

CSS에는 Flow, Layer, Float라는 3가지 기본 레이아웃 모델이 포함되어 있습니다.

웹 페이지에서 요소에는 세 가지 레이아웃 모델이 있습니다.
1. 흐름 모델(Flow)
2. 플로팅 모델(Float)
레이어 모델(Layer)


첫 번째 흐름 모델에 대해 이야기해 보겠습니다. 흐름은 기본 웹 페이지 레이아웃 모드입니다. 즉, 기본 상태의 웹 페이지의 HTML 웹 요소는 흐름 모델에 따라 웹 페이지 콘텐츠를 배포합니다.

유동 레이아웃 모델에는 두 가지 일반적인 특성이 있습니다.

첫째, 블록 요소는 포함 요소 내에서 수직으로 확장되고 위에서 아래로 순서대로 배포됩니다. 블록 요소는 100%입니다. 실제로 블록 요소는 행 형태로 위치를 차지합니다.

두 번째 점, 흐름 모델에서 인라인 요소는 포함 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시됩니다.

레이어 레이아웃 모델은 이미지 소프트웨어 PhotoShop에서 매우 인기 있는 레이어 편집 기능과 같습니다. 그러나 웹 디자인 분야에서는 웹 페이지 크기의 이동성으로 인해 각 레이어를 정확하게 배치하고 작동할 수 있습니다. , 레이어 레이아웃이 없습니다. 대중적일 수 있습니다. 그러나 웹 페이지에서 로컬로 레이어 레이아웃을 사용하면 여전히 편리합니다.




이미지 소프트웨어 PhotoShop의 레이어와 마찬가지로 웹페이지에서 HTML 요소의 위치를 ​​정확하게 지정하는 방법을 통해 각 레이어를 정확하게 배치하고 작동할 수 있습니다. CSS는 레이어 레이아웃 모델을 지원하는 위치 지정 속성 집합을 정의합니다.

레이어 모델에는 세 가지 형태가 있습니다.

1. 절대 위치 지정(위치: 절대)

2. 상대 위치 지정(위치: 상대)

3 . 고정 위치 지정(위치: 고정)

레이어 모델 - 절대 위치 지정:

레이어 모델에서 요소의 절대 위치 지정을 설정하려면 위치:절대( 절대 위치 지정을 나타냄), this 이 문의 기능은 문서 흐름 밖으로 요소를 끈 다음 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 사용하여 위치 지정 속성이 있는 가장 가까운 상위 포함 블록을 기준으로 절대 위치 지정을 수행하는 것입니다. . 그러한 포함 블록이 없으면 본문 요소, 즉 브라우저 창을 기준으로 합니다.




레이어 모델 - 상대 위치 지정:

레이어 모델에서 요소의 상대 위치를 설정하려면 position:relative(상대 위치 지정을 나타냄)를 설정해야 합니다. 왼쪽, 오른쪽을 통과하는 , 위쪽 및 아래쪽 속성은 일반 문서 흐름에서 요소의 오프셋 위치를 결정합니다. 상대 위치 지정 프로세스는 먼저 정적(부동) 모드에서 요소를 생성한 다음(요소가 레이어처럼 부동) 이전 위치를 기준으로 이동하는 것입니다. 이동 방향과 진폭은 왼쪽, 오른쪽에 따라 결정됩니다. , 상단 및 하단 속성, 오프셋 전 위치는 변경되지 않습니다.




측면 모델 - 고정 위치 지정:

fixed: 고정 위치 지정을 나타내며 절대 위치 지정 유형과 유사하지만 상대 이동 좌표는 뷰(화면 내 웹 페이지 창)입니다. 그 자체. 뷰 자체는 고정되어 있으므로 화면에서 브라우저 창의 화면 위치를 이동하거나 브라우저 창의 표시 크기를 변경하지 않는 한 브라우저 창의 스크롤 막대가 스크롤됨에 따라 뷰는 변경되지 않습니다. 항상 문서의 흐름에 영향을 받지 않는 브라우저 창 내의 특정 위치에 있어야 합니다. 이는 background-attachment:fixed 속성과 동일한 기능을 갖습니다.



가변 너비로 블록 요소를 중앙에 배치하는 세 가지 방법이 있습니다(이 세 가지 방법은 현재 많이 사용됩니다):

테이블 태그 추가

표시 설정: 인라인 방식: 첫 번째 방법과 유사하게 표시 유형을 인라인 요소로 설정하고 가변 너비 요소의 속성을 설정합니다

위치 설정:상대적 및 왼쪽:50%: 상대 위치 지정을 사용하여 요소를 왼쪽으로 50% 이동합니다. 즉, 중앙 정렬 목적을 달성합니다.

텍스트 한 줄의 수직 중앙 정렬이 결정됩니다. 부모 요소의 높이에 따라 이 방법은 부모 요소의 높이와 줄 높이를 일관되게 설정하여 달성됩니다. (height: 요소의 높이, line-height: 이름에서 알 수 있듯이 줄 높이(줄 간격)는 텍스트에서 줄 사이의 기준선 사이의 거리를 나타냅니다.) Chrome, Firefox 및 IE8 이상의 브라우저에서는 블록 수준 요소의 표시를 table-cell(테이블 셀 표시로 설정)로 설정하고 수직 정렬 속성을 활성화할 수 있지만 IE6 및 7은 이 스타일을 지원하지 않습니다. . 호환성 비교 차이점.