<span> 요소는 <div>와 유사한 일반 HTML 요소입니다. . 기억하시겠지만 div는 주로 웹페이지 레이아웃에 사용되는 일반 컨테이너이며 블록이기 때문에 가능한 한 많은 공간을 차지합니다. 요소.
스팬은 인라인 요소. 필요한 만큼만 공간을 차지하며 주로 무언가를 강조하는 데 사용됩니다.
다음은 각각의 시각적 표현입니다.
<메타 이름="viewport" content="width=device-width, initial-scale=1.0 ">Divs 대 스팬 Divs
저는 div입니다저는 최대한 많은 공간을 차지하세요.스팬
저는 스팬입니다. 저는 필요한 만큼만 공간을 차지합니다. 텍스트를 많이 강조합니다.스팬은 div 안에 들어갈 수 있습니다...... 다른 텍스트와 스타일이 다릅니다...
...그리고 display:inline-block클래스를 사용하여 범위와 div를 함께 그룹화하여 CSS에서 색상과 배경색을 변경합니다.
display: inline-block을 추가하지 않으면 스팬의 높이 또는 너비를 변경할 수 없습니다. 재산.
함께 작업할 때의 모습은 다음과 같습니다.
Divs/Spans <스타일> * { box-sizing:border-box; 글꼴 크기:1.4rem; 글꼴 패밀리:고정 폭; } .div-style { 배경:보라색; 색상:블랜치다몬드; 높이:자동; 패딩:20px; 여백:10px; } .span-style { 배경:주황색; 색상:아이보리; } h3 { 텍스트 장식:밑줄;; } .nav { 배경:골든로드; 패딩:20px; } .headline { 글꼴 두께:굵게; 글꼴 크기:1.6rem; } .flex-container { 디스플레이:플렉스; } .container { 디스플레이:플렉스; 플렉스 방향:열;" } .sidebar-main-container { 배경:인도적색; 패딩:20px; } .sidebar { 배경:흰색; 색상:검은색; 너비:40%; 패딩:20px; } .main-container { 너비:60%; 패딩:20px; 배경:녹색; 글꼴 크기:1.2rem; } .main-content { 너비:100%; 여백:10px 0px; 디스플레이:플렉스; } .child-container { 너비:50%; 글꼴 크기:1.0rem; } .pink { 배경:분홍색; 색상:검정; } .red { 배경:빨간색; } p{ 글꼴 크기:1.2rem; } .footer { 텍스트 정렬:가운데; 배경:콘플라워블루; } .footer span { 글꼴 크기:.7rem; }div와 Span을 함께 사용:
Div 1:기본 전체 컨테이너스팬과 div는 다른 HTML 요소와 함께 작동하여 웹사이트의 기본 빌딩 블록을 만듭니다. 스팬은 div와 별도로 스타일을 지정하여 강조할 수 있습니다.