HTML 컨텐트를 사용하여 요소 구분 방법

HTML Content Division 요소(<div>는 용기를 충당하여 웹 페이지를 단독 구성 요소로 구성하여 단독 스타일 설정을 합니다.이 강좌는 웹 페이지에서 <div> 용기의 스타일을 만들고 설정하는 방법을 가르쳐 줍니다.
그 자체로 말하자면 <div> 요소는 페이지의 레이아웃에 거의 영향을 주지 않고 크기, 색깔, 위치 또는 기타 기능을 조정할 수 있도록 부여된다 attributes.일반적으로 개발자는 CSS 설정 <div> 요소의 스타일을 사용하지만, 이 강좌는 HTML 문서에서 직접 설정 <div> 요소의 스타일을 통해 <div> 요소의 작업 방식을 알려 줍니다.style 요소는 HTML<div> 속성을 사용하여 스타일을 설정합니다.다음 예에서 보듯이 <div> 요소에는 여러 스타일 특성이 포함될 수 있습니다.

<div style=”property: value; property: value;”></div>

<div> 요소에는 시작 및 종료 표시가 있지만 내용이 필요하지 않습니다.index.html 요소가 실천 중인 작업 방식을 이해하려면 index.html 파일을 지우고 다음 코드를 붙여넣으십시오.(이 강좌 시리즈를 배우지 않으셨다면 저희 강좌 Setting Up Your HTML Project 에서 설정 <div> 파일에 대한 설명을 보실 수 있습니다.

<div style="width:300px;height:200px; background-color:red;">
</div>

파일을 저장하고 브라우저에서 다시 로드합니다.(브라우저에서 파일을 로드하는 방법에 대한 자세한 내용은 우리tutorial here를 참조하십시오.)다음 그림과 같이 너비가 300픽셀이고 높이가 200픽셀인 빨간색 상자를 받아야 합니다.

또한 시작과 끝 <div> 태그 사이에 내용을 추가하여 <div> 요소에 내용을 추가할 수 있습니다.다음과 같이 태그 사이에 텍스트를 추가합니다.

<div style="width:300px;height:300px; background-color:red;">
  This is text inside a div. 
</div>

파일을 저장하고 브라우저에서 다시 로드합니다.다음을 수신해야 합니다.

또한 <div> 개의 용기를 <div> 개의 용기에 넣을 수 있습니다.다음과 같이 빨간색<div> 컨테이너에 노란색<div> 컨테이너를 추가하십시오.

<div style="width:300px;height:300px; background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>  
</div>

파일을 저장하고 브라우저에서 다시 로드합니다.다음을 수신해야 합니다.
<div> 요소는 블록 레벨 요소로 자신의 줄에서 시작하여 다음 줄로 밀어냅니다.파일에 다른 <div> 요소를 추가하여 다음 줄로 밀어 넣는 방법을 알아봅니다. 두 번째 <div> 요소 옆에 충분한 공간이 있는 것 같아도:

<div style="width:300px;height:300px;background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>
</div>
<div style="width:100px;height:100px; background-color:blue;">
</div>

파일을 저장하고 브라우저에서 다시 로드합니다.다음을 수신해야 합니다.

이제 당신은 <div> 원소의 작업 원리에 대해 기본적인 이해를 가져야 합니다.우리가 본 강좌 시리즈의 세 번째 부분에서 사이트를 구축하기 시작할 때, 우리는 <div> 요소를 되돌릴 것이다.