CSS 예제를 표시합니다. 웹페이지에 HTML 요소를 표시하기 위한 매개변수입니다. CSS 속성 가시성 및 표시. 목록 항목 표시 - 블록 태그를 기반으로 목록을 생성합니다.

테이블 레이아웃은 거의 사용되지 않지만 경우에 따라 매우 유용할 수 있습니다. 예를 들어, 테이블만 표시하려는 경우 와이드 스크린, 작은 화면의 경우 지원을 유지하면 됩니다. 이는 미디어 쿼리와 디스플레이 속성의 조합을 사용하여 달성할 수 있습니다.

더 현대적인 의미

웹페이지에 콘텐츠가 표시되는 방식은 이후 상당히 변경되었습니다. HTML의 모습. 웹 디자이너가 일종의 창의적인 레이아웃을 만들고 싶을 때 사용된 첫 번째 방법은 HTML 테이블 중첩(테이블 형식 레이아웃)이었습니다.

그리고 CSS가 더욱 대중화되면서 코더는 플로팅 레이아웃으로 이동하여 다양한 플로팅 div에 콘텐츠를 배치했습니다. 원하는 효과. 이 기술은 여전히 ​​매우 일반적이지만 Flexbox(CSS의 유연한 "상자" 레이아웃)의 출현으로 이러한 상황은 점점 더 오래 지속되지 않을 것입니다. 반응형 상자 레이아웃이 모든 브라우저에서 완전히 지원되면 반응형 레이아웃이 지배적인 레이아웃 방법이 될 것입니다. 그러나 모든 브라우저가 Flexbox 사양을 지원하는 것은 아니며 이는 Flexbox 개발을 크게 방해합니다.

Flexbox 모델은 매우 강력하고 많은 일을 할 수 있기 때문에 작동 방식과 사용 방법을 완전히 이해하려면 약간의 노력이 필요합니다. 이 모델을 심도있게 연구하려면 별도의 큰 글이 필요하지만 오늘은 기본적인 부분만 살펴보겠습니다.

디스플레이 선언: flex; 요소의 경우 해당 요소는 플렉스 컨테이너가 되고 해당 하위 요소는 해당 컨테이너의 플렉스 요소가 됩니다. 플렉스 속성은 이 요소의 손자 요소에 적용되지 않습니다. Flex 컨테이너와 Flex 항목 모두 고유한 Flex 속성을 가지고 있습니다.

요소는 블록 요소처럼 동작하며 그리드 모델에 따라 콘텐츠를 표시합니다. 메시 모델은 메시 시스템을 생성하는 방법을 제공하고 메시 요소의 위치 지정을 제어할 수 있는 방법을 제공합니다. CSS를 사용하여, HTML을 포함하지 않고. 미디어 쿼리와 함께 사용되는 경우 CSS 그리드된다 강력한 도구반응형 레이아웃을 디자인하고 구축할 때

CSS 그리드는 어떤 브라우저에서도 공식적으로 구현되지 않습니다. 이를 지원하려면 브라우저는 공급업체 접두사를 지정하고 플래그를 설정해야 합니다.

실험값(프로덕션 코드에서는 사용하면 안됨)

디스플레이: 런인;

이론적으로 요소의 표시 속성을 run-in 으로 설정하면 해당 요소는 다른 블록 내의 블록으로 렌더링됩니다. 이 속성의 사용 사례는 후속 콘텐츠와 동일한 줄에 시각적으로 배치되는 제목을 만들기 위한 사용자 지정 방법을 갖는 것입니다.

이 목적으로 부동소수점을 사용할 수도 있지만 이는 값이 문자열에 자동으로 입력되고 기준선에 맞춰 정렬된다고 가정합니다.

이 값은 다음에서만 지원됩니다. 인터넷 익스플로러 11과 오페라 미니.

요소는 인라인 요소로 동작하며 요소의 서식 모델에 따라 내용을 표시합니다. HTML. 즉, 텍스트 기준선 옆에 주석을 표시할 수 있습니다(보통 발음에 도움이 됨). 이 기술은 중국어와 일본어에서 매우 일반적입니다.

디스플레이: 내용;

이 값의 기본 개념은 요소에 이 값을 사용하면 DOM에서 사라지지만 해당 자식 요소는 모두 남아서 공간을 차지한다는 것입니다. 이 사양은 이 순간 Firefox >59, Chrome >65, Safari 11.1에서만 지원됩니다.

간단한 요약

오늘 살펴본 디스플레이 속성 값 목록은 정말 인상적입니다. 결국 기술의 발전은 문제 해결을 위한 새로운 기법과 새로운 접근법의 출현을 결정합니다. 다양한 업무웹 디자인에서. 반면에 많은 기술은 쓸모가 없어지고 이전의 영광을 잃습니다. 이 기사가 시대에 뒤처지지 않고 레이아웃 문제를 보다 효과적으로 해결하는 데 도움이 되기를 바랍니다.

설정하려면 CSS 표시 속성이 필요합니다. HTML을 입력하세요다른 요소에 상대적인 요소입니다. 간단히 말해서 이 옵션은 다른 요소와 관련하여 요소를 표시하는 방법을 담당합니다. 덕분에 원하는 "특수 효과"를 얻을 수 있습니다.

CSS 표시 구문

디스플레이 : 값 ;

여기서 value는 다음 값을 취할 수 있습니다.

• block - 블록 요소(자동으로 줄바꿈 생성)
• inline - 인라인 요소(줄 바꿈을 생성하지 않음);
• inline-block은 inline의 파생물입니다. 또한 줄바꿈을 생성하지 않지만 요소에 너비와 높이를 지정할 수 있습니다.
• 목록 항목 - 목록 표시가 있는 블록 요소입니다.
• run-in - 컨텍스트에 따라 요소를 블록 또는 인라인으로 설정합니다.
• 테이블 - 테이블과 동일(태그 ), 줄 바꿈 포함;
  인라인 테이블은 테이블의 파생물입니다. 요소는 인라인이지만 인접한 요소가 요소를 둘러쌉니다.
  table-caption - 테이블 제목 생성(태그와 유사)

  );

  table-cell - 테이블 셀 요소 생성(태그와 유사)

  ); table-column - 테이블 열을 정의하는 요소입니다. table-row - 테이블 행을 정의하는 요소입니다. 없음 - 요소가 페이지에 표시되지 않으며 다른 모든 요소는 마치 전혀 존재하지 않는 것처럼 동작합니다. 상속 - 상위 요소로부터의 상속입니다. 메모 기본적으로 모든 요소는 인라인으로 표시됩니다. 디스플레이 활용 예시 예 1. 표시 사용:블록 보시다시피 선이 자동으로 이동되었습니다. 예제에서는 블록 요소가 차지하는 면적을 표시하기 위해 border:1px solid #000 속성이 추가되었습니다. 단락 번호 1. 디스플레이 요소를 살펴보겠습니다. 표시:블록 속성이 있는 텍스트보시다시피 선이 자동으로 이동되었습니다. 예 2. 디스플레이 사용:없음 페이지에 표시되는 내용은 다음과 같습니다. 단락 번호 1. display:none 요소를 살펴보겠습니다. 표시:없음 속성이 있는 텍스트보시다시피 none이라는 텍스트가 있는 블록이 누락되었습니다. visible:hidden 속성과 연관시키는 것이 논리적이지만, 이와 달리 display:none은 객체에 공간을 할당하지 않습니다. 이 속성은 예를 들어 드롭다운 메뉴 효과를 만들 때 매우 유용합니다. 예 번호 3. 디스플레이 사용:인라인 블록 보시다시피 none이라는 텍스트가 있는 블록이 누락되었습니다. 페이지에 표시되는 내용은 다음과 같습니다. 단락 번호 1. 요소를 살펴보겠습니다. 디스플레이:인라인 블록 속성이 있는 텍스트보시다시피 블록이 콘텐츠에 직접 삽입됩니다. 디스플레이 속성은 출력을 담당하고 시각적 디스플레이페이지의 요소. 를 사용하여 표시 속성을 변경할 수도 있습니다. 재산은 상속되지 않습니다. 모든 html 요소는 웹 페이지에 직사각형 컨테이너를 생성합니다. 화면에 보이는 모든 것은 다양한 유형의 컨테이너로 구성됩니다. 정상적인 흐름에서는 블록 요소가 생성됩니다. 빌딩 블록컨테이너 블록 너비의 100%를 차지하면서 세로로 하나씩 표시됩니다. 문자열 컨테이너가 생성됩니다. 라인 블록가로로 한 줄로 표시됩니다. 인라인 요소의 너비는 콘텐츠의 너비와 같습니다. 인라인 블록 요소는 또한 텍스트 줄을 생성하며 요소의 아래쪽은 텍스트 줄의 기준선에 위치하며 줄이 끊어지지 않습니다. 요소의 콘텐츠 형식은 블록 요소와 동일한 방식으로 지정되며 블록의 너비는 콘텐츠의 너비와 같습니다. 테이블은 브라우저에서 블록으로 처리됩니다. 내부 테이블 요소는 콘텐츠, 패딩 및 테두리 프레임, 그러나 여백 필드는 없습니다. 표 1. 표시 속성 값 표시하다 값: 인라인 기본값. 요소는 인라인 블록을 생성합니다. 아날로그 - 태그 . 차단하다 요소는 태그와 마찬가지로 구조적 블록을 생성합니다. . 몸을 풀다 요소는 다음을 생성하는 구조 블록을 생성합니다. 적응형 컨테이너하위 요소의 경우. 인라인 블록 요소는 인라인 블록을 생성합니다. 인라인 플렉스 요소는 하위 요소에 대한 반응형 컨테이너를 생성하는 인라인 블록을 생성합니다. 인라인 테이블 요소는 인라인 블록을 생성하는 구조적 블록을 정의합니다. 목록 항목 요소는 목록 요소로 표시되는 구조 블록을 생성합니다. . 테이블 요소는 구조 블록을 생성합니다. 페이지가 비슷하게 동작합니다. . . . . . . 표 캡션 요소는 기본 테이블 제목을 생성합니다. 페이지가 비슷하게 동작합니다. . 테이블-열 요소는 셀의 열을 설명합니다. 시각적 표현생성되지 않았습니다. 아날로그 - 테이블-열-그룹 요소는 하나 이상의 열을 결합합니다. 아날로그 - 테이블 셀 요소가 생성됩니다. 별도의 셀테이블은 페이지에서 비슷하게 동작합니다. 그리고 . 테이블 헤더 그룹 요소는 항상 다른 행 및 행 그룹 앞에 나타나는 머리글 행 그룹을 정의합니다. 아날로그 - 테이블 바닥글 그룹 요소는 항상 다른 모든 줄 뒤와 하단 기본 헤더 앞에 나타나는 헤더 줄 그룹을 정의합니다. 유사하게 동작 테이블 행 그룹 요소는 하나 이상의 줄을 연결합니다. 아날로그 - 테이블 행 요소는 셀의 행입니다. 예 - 없음 요소는 컨테이너를 생성하지 않으며 페이지에서 완전히 제거됩니다. 상속하다 상위 요소로부터 속성을 상속합니다. 안녕하세요, 블로그 사이트 독자 여러분. 오늘 우리는 디스플레이(Display)라는 스타일 마크업 언어의 다소 중요한 규칙에 대해 이야기하겠습니다. CSS 코드에서 가장 자주 사용되는 값을 이미 보셨을 것입니다. 디스플레이 블록, 없음 또는 인라인. 이 기사에서는 이 모든 것을 더 자세히 살펴보고 예를 들어 보겠습니다. 기본적으로 HTML 코드의 특정 요소를 표시하는 방법을 설정하고 필요한 경우 변경할 수 있습니다. 도움을 받으면 블록 요소를 소문자 또는 목록으로 만들 수 있으며, display:none을 사용하면 웹 페이지에 동적 기능을 구현할 수 있습니다. 스크립트를 사용하지 않는 드롭다운 메뉴순수한 CSS에서. 블록 및 인라인 표시 - 블록을 소문자로 만드는 방법 우리가 이미 Html 언어 강좌에서 배웠듯이 요소는 태그를 사용하여 웹 페이지에 형성되며, 이 요소는 사용 중인 브라우저의 Html 파서에 의해 처리되어 컴퓨터 화면에 표시됩니다. 이러한 요소(Html ​​태그를 기반으로 생성됨)가 표시되는 방식은 최신 CSS 스타일 마크업 언어에 따라 결정됩니다. 태그에 대해 특별한 스타일을 설정하지 않은 경우에도 기본적으로 채택된 규칙을 고려하여 브라우저에 태그가 계속 표시됩니다. 이런거 어디서 볼 수 있어? 모든 HTML 태그에 대한 기본 CSS 스타일? 글쎄, 이 페이지의 모든 것은 동일합니다. 목차 끝으로 스크롤하면 필요한 정보가 제공되는 링크 ""가 표시됩니다. 이게 다 뭐죠? 나는 특정 Html 태그를 설명할 때 이 태그가 어떤 유형의 태그에 속하는지 반복적으로 주의를 기울였습니다. 소문자 또는 블록. 이에 따라 우리는 이러한 요소가 특정 동작을 가질 것이라고 가정했습니다. 즉, 너비에서 사용 가능한 모든 공간을 차지하는 경향이 있거나(블록 기반) 그렇지 않을 것입니다(소문자). 하지만 이 구분이 어디서 왔는지, 특정 태그가 어떤 유형에 속하는지 어디서 확인할 수 있는지는 아직 설명하지 않았습니다. 따라서 우리가 언급한 "HTML 4의 기본 스타일 시트"라는 CSS 사양 페이지에서 이를 확인할 수 있으며 특수 표시 규칙이 이 모든 혼란을 담당합니다. 예를 들어 맨 처음에는 블록에 속한 모든 요소가 나열되며 이는 규칙이 해당 요소에 적용되기 때문에 발생합니다. 표시:블록: 여기서는 동일한 태그, 컨테이너 및 기타 블록 요소를 모두 볼 수 있습니다. W3C 유효성 검사기에서 CSS 속성 및 유효한 값 목록을 보면 표시를 위해 다음이 표시됩니다. 아무것도 지정하지 않으면 기본적으로 "display:inline" 옵션이 사용되며("초기값" 열에 지정된 값이므로) 이는 인라인 요소의 구성에 해당합니다. 따라서 페이지에 제공된 "HTML 4의 기본 스타일 시트" 사양에서는 소문자로 표시되어야 하는 태그(예:span)가 전혀 설명되지 않거나 표시 값이 지정되지 않습니다. 어쨌든 소문자입니다. 표시 규칙은 다음을 담당합니다. 이 요소브라우저에 빌드하고 표시해야 합니다. 이는 태그가 무엇인지, 태그가 어떻게 표시되어야 하는지를 브라우저에 알려줍니다. 행 요소(display: inline) 또는 블록(block)으로 표시하거나 테이블(table) 또는 테이블의 일부(inline-table | table-row-group | table-header-)로 표시할 수 있습니다. 그룹 | 테이블-바닥글-그룹 | 테이블-열-그룹 | 이 규칙은 매우 중요합니다. 그러나 태그에 대해 기본적으로 설정되는 값은 전혀 상수 값이 아닙니다. 원하거나 필요한 경우 항상 블록 요소(브라우저에서 기본적으로 표시: 차단을 사용함)를 소문자로 만들 수 있으며 그에 따라 그 반대로 할 수도 있습니다. 세 개의 태그가 있는 간단한 예를 살펴보겠습니다. 그 중 하나는 기본적으로 스팬 태그이고 나머지 두 개는 블록 태그(H3 및 P)입니다. 더 명확하게 하기 위해 다음 요소용으로 예약된 영역을 채웠습니다. H3는 기본적으로 브라우저에서 블록으로 렌더링됩니다. Span은 라인 태그의 일반적인 예입니다. P - 또 다른 기본 블록 1 결과적으로 브라우저는 기본 표시 규칙 값에 따라 모든 요소를 ​​표시했습니다. 보시다시피, 첫 번째 블록 H3(기본값 block 포함)은 사용 가능한 전체 가로 크기(세 번째 요소 P도 포함)를 차지하는 반면, 인라인 Span(기본값 display:inline 포함)은 사용 가능한 전체 가로 크기를 차지합니다. 포함된 콘텐츠를 배치하는 데 필요한 너비와 정확히 일치합니다. 자, 이제 해보자 초기 블록 태그 H3에서 소문자로 만듭니다.디스플레이 인라인을 추가하여(더 나은 시각적 효과를 얻기 위해 처음 두 요소의 텍스트를 더 작게 만들었습니다): H3 기간 P는 또 다른 기본 블록 태그입니다. 보시다시피 브라우저는 display:inline을 고려했으며 이제 H3 헤더 요소(초기 블록)는 더 이상 너비에서 사용 가능한 모든 공간을 차지하지 않으며 그 결과 다음 인라인 Span 태그가 밀접하게 눌려졌습니다. 그것. 그러나 그는 이전 것을 밀접하게 누르지 않고 공백으로 분리했습니다. H3 헤더가 블록일 때는 이 공백을 고려하지 않았으나 소문자 태그로 변환한 후 하이퍼텍스트 마크업 언어의 모든 규칙에 따라 코드에 있는 모든 공백을 단일 공백으로 변환했습니다. 제공된 링크에서 읽을 수 있습니다. 당신도 똑같이 할 수 있습니다 인라인 Span 태그에서 블록 태그 만들기표시:블록:을 추가하여 H3 기간 P - 또 다른 기본 블록 HTML 요소 결과적으로 우리의 시각적 자료는 무슨 일이 일어났는지 보여줍니다: Span은 이 태그에 포함된 콘텐츠의 양에 관계없이 너비로 사용 가능한 전체 영역을 차지하기 시작했습니다. 목록 항목 표시 - 블록 태그를 기반으로 목록을 생성합니다. 이제 Display를 사용하여 행을 만들어 보겠습니다. 블록 태그목록의 요소. 규칙은 우리가 이 문제에 대처하는 데 도움이 될 것입니다 표시:목록 항목. 처음에는 여러 단락과 제목을 갖도록 하겠습니다. H3 첫 번째 단락(P 태그) 두 번째 단락 제삼 다음과 같이 보일 것입니다: 이제 모든 단락 블록 태그에 display:list-item 규칙을 추가하면 브라우저는 이러한 모든 요소에 대해 동일한 기본 마커가 표시되는 특수 마커 영역을 생성합니다. H3 첫 번째 단락(P 태그) 두 번째 단락 제삼 하지만 이 양식에서는 아무런 변화도 느낄 수 없습니다. 마커 영역은 블록 태그 영역 앞에 추가되며 이를 보려면 해당 블록을 해당 블록이 있는 컨테이너 가장자리의 왼쪽으로 이동해야 합니다. 이는 동일한 방법을 사용하여 수행할 수 있습니다. 즉, 필요한 단락(또는 in으로 묶는 단락)에 대해 margin-left:20px를 설정하면 다음 그림을 얻을 수 있습니다. 표시 규칙을 사용하면 동일한 태그를 변경하지 않고도 Html 코드에 이미 존재하는 요소를 다른 요소로 언제든지 변경할 수 있습니다(단순히 웹 페이지에 표시되는 방식만 변경하면 됨). 사실은 코드에 많은 태그가 있을 수 있고 이를 모두 수동으로 변경하기 어려울 수 있다는 것입니다. 그러나 Display의 도움으로 외부 계단식 스타일 시트 파일을 통해 몇 번의 클릭만으로 이 작업을 수행할 수 있습니다. 편리한. 행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다. 에 가시면 더 많은 영상을 보실 수 있습니다 ");"> 당신은 관심이 있을 수도 있습니다 CSS의 부동 및 지우기 - 블록 레이아웃 도구 위치(절대, 상대 및 고정) - 방법 HTML 위치 지정 CSS의 요소(왼쪽, 오른쪽, 위쪽 및 아래쪽 규칙) Z-색인 및 CSS 커서 규칙을 사용하여 마우스 커서를 변경하는 위치 지정 높이, 너비 및 오버플로 - CSS 규칙콘텐츠 영역을 설명할 때 블록 레이아웃 CSS 속성 HTML의 텍스트 장식을 위한 텍스트 장식, 수직 정렬, 텍스트 정렬, 텍스트 들여쓰기 디스플레이는 CSS에서 템플릿 제어를 위한 가장 중요한 스타일 속성입니다. 각 요소에는 해당 요소의 유형에 따라 기본 표시 값이 있습니다. 대부분의 요소의 경우 기본 표시 값은 일반적으로 block 또는 inline 입니다. 원래 블록 요소는 종종 블록 수준 요소라고 불립니다. 인라인 요소에는 대체 이름이 없습니다. 차단하다 div는 표준 블록 요소입니다. 블록 요소는 새 줄에서 시작하고 해당 내용은 가능한 한 왼쪽과 오른쪽으로 늘어납니다. 다른 일반적인 블록 요소로는 p와 form이 있으며, 머리글, 바닥글, 섹션 등과 같은 HTML5의 새로운 블록 요소도 있습니다. 인라인 스팬은 표준 인라인 요소. 인라인 요소는 단락 내부의 텍스트를 줄바꿈할 수 있습니다. 이와 같이구조를 방해하지 않고. 가장 일반적인 인라인 요소는 링크에 사용되기 때문에 a입니다. 없음 또 다른 일반적인 표시 값은 none 입니다. 스크립트와 같은 일부 특수 요소는 기본적으로 이 값을 사용합니다. 요소를 제거하고 다시 생성하는 대신 요소를 숨기고 표시하기 위해 JavaScript와 함께 널리 사용됩니다. 가시성과는 다릅니다. 표시 속성을 없음으로 설정하면 해당 요소가 존재하지 않는 것처럼 페이지가 표시됩니다. 가시성: 숨김; 단순히 요소를 숨기지만 요소는 마치 완전히 보이는 것처럼 계속해서 공간을 차지합니다. 다른 표시 값 list-item 및 table과 같이 표시할 더 많은 이국적인 스타일 값이 있습니다. 전체 목록은 다음과 같습니다. inline-block과 flex에 대해서는 나중에 논의하겠습니다. 덧셈 앞서 말했듯이 모든 요소에는 기본 표시 유형이 있습니다. 그러나 언제든지 이를 재정의할 수 있습니다! 이는 div를 인라인으로 만드는 데 적합하지 않지만 이를 사용하여 비공개 의미 체계로 요소 표시를 맞춤설정할 수 있습니다. 전형적인 예– 수평 메뉴에 대한 li 요소를 구축하는 기능. 2 / 19 질문이 있으신가요? 이름 이메일 * 메시지 * 보내다 오타 신고 편집자에게 전송될 텍스트: 귀하의 의견(선택사항): 보내다 취소