CSS를 사용하여 span 및 div를 사용하여 더 많은 스타일 및 레이아웃을 제어하십시오.
웹 디자인과 HTML / CSS에 익숙하지 않은 많은 사람들은 웹 페이지를 빌드 할 때 요소와 div 요소는 웹 페이지에서 논리적 구분을 정의합니다. 그것은 기본적으로 논리적으로 함께 움직이는 다른 HTML 요소를 배치 할 수있는 상자입니다. 부서는 단락, 표제, 목록, 링크, 이미지 등과 같이 여러 개의 다른 요소를 가질 수 있습니다. HTML 문서에 구조와 조직을 추가로 제공하기 위해 내부에 다른 부분이있을 수도 있습니다. div 요소를 사용하려면 별도의 나누기로 사용할 페이지 영역 앞에 열린 div의 내용 페이지의 영역에 나중에 CSS로 스타일을 지정하는 데 사용할 몇 가지 추가 정보가 필요한 경우 id 선택자를 추가 할 수 있습니다 (예 : id = "myDiv">) 또는 클래스 선택기 (예 : class = "bigDiv">). 그런 다음 CSS를 사용하여 선택하거나 JavaScript를 사용하여 수정할 수 있습니다. 현재의 모범 사례는 ID 대신 클래스 선택기를 사용하는쪽으로 기울어 져 있는데, 이는 부분적으로 특정 ID 선택기의 특성 때문입니다. 사실, 그러나, 당신은 둘 중 하나를 사용할 수 있고 심지어 ID와 클래스 선택자 둘 다 구분을 줄 수 있습니다. div 요소는 HTML5 섹션 요소와 다른데, 그 이유는 포함 된 내용에 의미 적 의미가 없기 때문입니다. 콘텐츠 블록이 div 또는 섹션인지 여부를 잘 모르는 경우 요소 및 콘텐츠의 용도가 무엇을 사용하여 결정할 지 결정하는 데 도움이되는지 생각해보십시오. 궁극적으로 div와 섹션 모두 매우 유사하게 작동하므로 둘 중 하나에 속성 값을 지정하고 CSS로 스타일을 지정하여 필요한 사이트의 모양을 얻을 수 있습니다. 이 두 가지 모두 블록 레벨 요소입니다. span 요소는 기본적으로 인라인 요소입니다. div와 section 요소를 구분합니다. span 요소는 나중에 특정 스타일을 지정할 수있는 추가 "훅"을 제공하기 위해 일반적으로 텍스트의 특정 부분을 래핑하는 데 사용됩니다. CSS와 함께 사용하면 둘러싸는 텍스트의 스타일을 변경할 수 있습니다. 그러나 스타일 속성이 없으면 span 요소만으로는 텍스트에 아무런 영향을 미치지 않습니다. 이것은 스팬과 div 요소 간의 주요 차이점입니다. 위에서 언급했듯이 div 요소에는 단락 나누기가 포함되어 있지만 span 요소는 관련 CSS 스타일 규칙을 태그로 묶인 것에 적용하도록 브라우저에 지시합니다. 강조 표시된 텍스트 및 강조되지 않은 텍스트입니다. class = "highlight"또는 다른 클래스를 span 요소에 추가하여 CSS로 텍스트 스타일을 지정하십시오 (예 : class = "highlight">). span 요소에는 필수 속성이 없지만 가장 유용한 세 가지 요소는 div 요소의 속성과 동일합니다. 문서의 새로운 블록 레벨 요소 로 내용을 정의하지 않고 내용의 스타일을 변경하려는 경우에는 span을 사용하십시오. 예를 들어, h3 표제의 두 번째 단어를 빨간색으로 나타내려면 해당 단어의 스타일을 빨간색 텍스트로 사용하는 span 요소로 그 단어를 둘러 쌀 수 있습니다. 단어는 여전히 h3 요소의 일부로 남아 있지만 이제는 빨간색으로도 표시됩니다. 제레미 지라드 편집 : 2/2/17
요소 사용하기
내 멋진 헤드 라인입니다.