<div> 태그 - 레이어

HTML의 div 태그는 다른 block타입 컨트롤로 사용시 기본 줄바뀜이 된다.

다른 요소를 위한 컨테이너를 만들고 CSS를 사용하여 해당 요소에 스타일이나 레이아웃을 적용하는 데 사용한다.

<div id="container">
    <p>id 스타일</p>
    <img src="image.jpg" alt="An image">
    <a href="https://www.naver.com">A link</a>
</div>


#container{
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}


let div = document.getElementById("container");
console.log(div.innerHTML);

 

또한 div 요소에 id 또는 class를 추가하여 CSS 및 JavaScript에서 각각 스타일을 적용하거나 동작을 수행할 수 있다.

<div id="container">
    <p>This is some text inside the div element.</p>
    <img src="image.jpg" alt="An image">
    <a href="https://example.com">A link</a>
</div>

이 예에서 div 요소는 "container" 값의 속성 ID를 가지며 CSS 파일의 #container selector를 사용하여 이 div에 CSS 스타일을 추가할 수 있다. ID 셀렉터(selector)는 "#"(샾)으로 시작한다.

#container{
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

div 요소에 클래스를 추가하고 css 파일에서 클래스를 호출할 수도 있다. 클래스 셀렉터(selector)는 "."(점) 으로 시작한다.

<div class="container">
    <p>클래스 스타일</p>
    <img src="image.jpg" alt="An image">
    <a href="https://www.google.com">A link</a>
</div>

.container{
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

let div_class = document.getElementsByClassName("container")[0];
console.log(div_class.innerHTML);

클래스명으 let div_class = document.getElementsByClassName("container")[0]; 로 레이어를 접근할 수 있다.
다만, 클래스로 가져올 경우 배열형으로 [0]와 같이 객체의 배열 인덱스로 접근해야 한다.