div 스타일

HTML의 <div> element는 다른 element를 함께 그룹화하고 스타일을 적용하는 데 사용할 수 있는 컨테이너 element이다. CSS에서 element 선택기를 사용하여 <div> element를 선택하고 스타일을 적용할 수 있다.

예를 들어, ID가 "컨테이너"인 <div> element가 있고 배경색을 파란색으로 지정하고 너비를 500픽셀로 지정한다고 가정해 보면 다음 CSS를 사용할 수 있다:

#container {
    background-color: blue;
    width: 500px;
}

클래스 셀렉터를 사용하여 동일한 클래스를 가진 여러 div에 스타일을 적용할 수도 있다.

<div class="box"></div>
<div class="box"></div>

.box {
    background-color: blue;
    width: 500px;
}

"box" 클래스가 있는 모든 div에 스타일이 적용된다

element 셀렉터를 사용하여 모든 div에 스타일을 적용할 수도 있다.

div {
    background-color: blue;
    width: 500px;
}

웹 페이지의 모든 div에 스타일이 적용된다.

또한 div를 중첩하여 더 복잡한 레이아웃을 만들고 페이지의 특정 섹션에 스타일을 적용할 수 있다.

<div id="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
  </div>
</div>
[Example]
#container {
    width: 100%;
    background-color: blue;
}
.row {
    display: flex;
}
.col {
    flex: 1;
    background-color: yellow;
    padding: 10px;
}

이렇게 하면 파란색 배경색과 너비가 100%인 컨테이너 div가 생성되며, 해당 컨테이너 내부에는 노란색 배경색과 10px 패딩이 있는 두 개의 컬럼이 있다.

CSS를 사용하여 배경색, 너비, 높이, 테두리, 패딩, 여백 등 다양한 방법으로 div를 스타일링할 수 있습니다. 또한 CSS를 사용하여 디스플레이, 플로트, 위치, 상단, 오른쪽, 하단 및 왼쪽과 같은 속성을 사용하여 페이지에 div를 배치할 수 있다.

div는 블록 수준 element이므로 기본적으로 상위 컨테이너의 전체 너비를 차지하고 그 뒤에 새 줄을 작성한다.

또한 가능한 경우 div 대신 <header>, <nav>, <main>, <article>, <aside>, <footer>와 같은 시맨틱 HTML 태그를 사용하여 사용자와 개발자 모두에게 element의 구조와 목적을 명확히 하는 것이 좋다.