html 블록 요소와 인라인 요소에 대한 자세한 소개

원문은 여기

블록레벨 요소의 분류 블록레벨 요소는 구조적 적용 여부와 내용적 적용 여부에 따라 구조화된 블록 요소, 터미널 블록 요소, 멀티 타겟 블록 요소의 세 가지 유형으로 구분됩니다. 1. 구조화된 블록 요소 이러한 유형의 요소는 문서를 구조화하는 데 사용됩니다. 좋은 문서 구조는 검색 엔진 및 기타 기술(예: JavaScript )에 매우 유용합니다. 의미론적인 의미는 없습니다. 문서의 구성만 정의할 뿐 문서의 내용을 반영하지는 않습니다. 기본 구조적 블록 요소 * *

* * 지원 구조적 요소 * &lt ;li> * * * * * 2. 터미널 블록 요소 이 유형의 요소는 구조에서 내용으로 이동하는 데 사용되며 의미적 의미를 가질 수 있습니다. . 터미널 블록 요소는 구조의 끝에 속하며 다른 블록 수준 요소는 포함할 수 없으며 텍스트 또는 라인 수준 요소만 포함할 수 있습니다. 터미널 블록 요소 * ... * * 다목적 블록 요소는 구조화된 방식으로 사용될 때 구조적 의미를 가지며, 터미널 형식으로 사용될 때 의미론적 의미를 갖습니다. 다중 대상 블록 요소에는 블록 요소나 콘텐츠(텍스트와 줄 수준 요소의 조합이 콘텐츠임)가 포함될 수 있지만 동시에 둘 다 포함될 수는 없습니다. 콘텐츠는 블록 요소에 배치되어야 합니다. 블록 요소는 줄 수준 요소와 텍스트의 형제 요소로 사용되어서는 안 됩니다. HTML 유효성 검사기의 한계로 인해 현재 이러한 상황을 감지할 수 있는 방법은 없지만 피해야 합니다. 다중 대상 블록 요소 * * * > * CSS 레이아웃에 관해 이야기할 때 미리 알아야 할 것이 있습니다. 다양한 HTML 태그/요소의 경우 블록 수준에서 분류할 수 있습니다: 블록(블록 요소) 또는 인라인( 인라인 요소 ): 블록 요소의 특성: * 항상 시작 새 줄에서 * 높이, 줄 높이, 위쪽 및 아래쪽 여백을 모두 제어할 수 있습니다. * 너비가 설정되지 않은 경우 너비는 기본적으로 해당 컨테이너의 100%로 설정됩니다. 인라인 요소의 특징: * 다른 요소는 같은 줄에 있습니다. * 높이, 줄 높이, 위쪽 및 아래쪽 여백은 변경할 수 없습니다. * 너비는 텍스트 또는 이미지입니다. 수용 가능 너비는 변경할 수 없습니다. 그 속성과 적용은 아래에 자세히 설명되어 있습니다. ◎블록 요소(블록 요소)는 일반적으로 다른 요소의 컨테이너로 사용되며 인라인 요소 및 기타 블록 요소를 수용할 수 있습니다. 기본적으로 블록 요소는 한 번에 새로운 줄로 아래쪽으로 정렬된다는 것을 알고 있습니다. CSS로 스타일을 제어하면 이 기본 레이아웃 모드를 변경하고 원하는 위치에 블록 요소를 배치할 수 있습니다. 테이블 태그도 테이블 테이블 을 기반으로 하고 CSS+p를 기반으로 하는 레이아웃은 페이지 로딩 속도의 차이 외에 일종의 블록 요소라는 점에 유의해야 합니다. 모든 콘텐츠 요소의 테이블 로드 완료 후 표시됨), 다른 차이점은 없습니다. 그러나 페이지의 소스코드를 보면 그 차이가 매우 크다. 좋은 구조라는 개념을 바탕으로 설계된 CSS 레이아웃 소스 코드는 최소한 웹 개발 경험이 없는 사용자도 연속적인 페이지 콘텐츠를 쉽게 찾을 수 있도록 해줍니다. 이러한 관점에서 CSS 레이아웃 코드는 더 나은 미적 경험을 제공해야 합니다. 모듈형 의 p를 상자로 상상한 다음 원하는 대로 배열하여 완전한 콘텐츠를 구성할 수 있습니다. 웹 레이아웃 디자인도 동일한 패턴을 따릅니다. 블록 요소(block 요소) HTML 태그 카테고리 세부정보 * 주소 - 주소 * blockquote - 블록 quote * center - 센터 정렬 블록 * dir - 디렉토리 목록 * p - 일반적으로 사용되는 블록 수준이 쉬우며 CSS 레이아웃의 기본 태그이기도 합니다. * dl - 정의 목록 * 필드 set - 양식 제어 그룹 * 양식 - 대화형 양식(다른 블록 요소를 수용하는 데에만 사용할 수 있음) * h1 - 큰 제목 * h2 - 자막 * h3 - 레벨 3 제목 * h4 - 레벨 4 제목 * h5 - 레벨 5 제목 * h6 - 레벨 6 제목 * hr - 가로 구분선 * isindex - 입력 프롬프트 * 메뉴 - 메뉴 목록 * noframes - 프레임 선택적 콘텐츠, (프레임을 지원하지 않는 브라우저의 경우 이 블록 콘텐츠 표시) * noscript - 선택적 스크립트 콘텐츠(스크립트를 지원하지 않는 브라우저의 경우 이 콘텐츠 표시) * ol - 정렬 형식 * p - 문단 * 미리 서식이 지정된 텍스트 * table - 표 * ul - 정렬되지 않은 목록 ◎인라인 요소는 일반적으로 기본 요소를 기반으로 합니다. 의미 수준에서는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다. 블록과 인라인의 차이점을 명확하게 보여주기 위해 각각의 대표 요소 p와 범위의 데모를 사용하여 설명할 수 있습니다. XXXXXXXXX 이것은 a p 레이아웃 XXXXXXXXX p는 새 줄에서 시작하며 그 모양은 내부 텍스트의 영향을 받지 않습니다. XXXXXXXXX이것은 스팬 레이아웃입니다XXXXXXXXX 모든 요소는 한 줄에 있고, 스팬에는 텍스트만 포함됩니다. 인라인 요소( 인라인 요소) HTML 태그 분류 내용 * a - anchor * abbr - 약어 * acronym - 첫 번째 단어 * b - 굵게(권장하지 않음) * bdo - bidi 재정의 * big - 큰 글꼴 * br - 줄 바꿈 * cite - quote * code - 컴퓨터 코드(소스 코드를 인용할 때 필요) * dfn - 정의 필드 입력 - 입력 상자 * kbd - 키보드 텍스트 정의 * 레이블 - 테이블 레이블 * q - 짧은 따옴표 * s - 밑줄(권장하지 않음) * samp - 정의 예 컴퓨터 코드 * 선택 - 항목 선택 * 작게 - 작은 글꼴 텍스트 * 범위 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 내의 블록을 정의 * 취소 - 밑줄 * 강 - 굵은 강조 * sub - subscript * sup - 위 첨자 * textarea - 여러 줄 텍스트 입력 상자 * tt - 텔렉스 텍스트 * u - 밑줄 * var - 변수 정의 ◎가변 요소는 위 두 가지를 기반으로 하며 환경에 따라 변화합니다. 기본 개념 은 컨텍스트에 따라 해당 요소가 블록 요소인지 인라인 요소인지 결정하는 것입니다. 카테고리가 결정되면 블록 또는 인라인 요소에 대한 규칙을 따릅니다. 가변요소 HTML 태그 분류 내용 * applet - java applet * 버튼 - 버튼 * del - 삭제 text * iframe - 인라인 프레임 * ins - 삽입된 텍스트 * map - 이미지 블록(map) * object - object object * script - 클라이언트 스크립트 그러나 CSS를 통해 위 표의 HTML 태그 분류 제한을 없애고 다양한 태그/요소에 필요한 속성을 자유롭게 적용할 수 있습니다. 예를 들어, 블록 요소 [ul] 태그에 display:inline 속성을 추가하여 원래 수직 목록을 수평으로 표시할 수 있습니다. 이는 블로그 탐색 막대를 설정할 때 널리 사용됩니다. 인라인 요소 [cite]에는 display:block과 같은 속성을 추가하여 매번 새 줄에서 시작하는 속성도 갖습니다.