프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

자바스크립트 요소 노드 접근방법 - document.getElementById()

 


자바스크립트에서 HTML 요소에 접근하는 여러 방법 중
getElementById() 함수를 알아본다.
document 객체의 메서드인 getElemntById()는 인자로 가지는 id 속성과 일치하는 html element 요소 하나를 반환해준다.

  <p id="demo"></p>
  <script>
     console.log(document.getElementById("demo"));
  </script>

위 예제와 같이.
demo 라는 id 속성을 가진 요소를 웹문서에서 찾아서 그 값을 반환해준다.
콘솔 로그에 출력되는 값은 

  <p id="demo"></p>

해당 요소 하나가 된다.
id 속성값은 웹문서 상 하나만 가지는 식별자이기에 특정 요소 하나만을 지정할 때 유용하다.
추가로, innerHTML 속성에 값을 추가하면

  document.getElementById("demo").innerHTML = "Hello World";

해당 요소에 콘텐츠 부분이 Hello World 로 수정되며 브라우저 상에 출력된다.

댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기