HTML : (1)

지환·2023년 10월 31일
0

자바스크립트

목록 보기
1/4
post-thumbnail

브라우저 구성요소

> window + document + navigator

상속관계

window <- document <- c1.html

: document는 c1.html 전체를 받는 객체이다.

브라우저는 인터프리터의 역할을 한다.

:태그는 보이지 않고 마킹된 태그가 적용된 화면을 확인할 수 있다.

브라우저 역할

  1. DOM Tree그린다.

  2. CSS가 존재하는 경우 1번에서 그려진 트리에 css가 추가된 트리를 다시 그린다.

  3. CSS 적용된 화면이 출력 - rendering

브라우저 개발자 센터 무조건 활용할것

  1. element - 코드와 CSS를 직접 변경하여 그 결과를 확인가능함

  2. network - 요청에 대한 서버측의 응답 결과를 상수로 확인가능함(200, 304, 404, 405, 500(Exception-자바),
    403)

  3. application- navigator - (local, session)storage, cookie

  4. console - 로그 출력 console.log(this), alert("숫자만 넣어주세요."), prompt(0~9사이의 숫자를 입력하세요)

html은 순서지향적이다. - 차례차례 읽혀진다. - script태그를 html끝나는 맨 뒤로 옮겼다.
const target = document.querySelector(".target");

c1.html과 c1.css 섞어쓰기 브라우저에는 DOM Tree만 그리는 엔진과 DOM Tree에 css가 가미된 Tree를 그리는 엔진이 따로 있다.

실제 화면에 출력될 때는 태그에 CSS속성이 반영된 태그 정보를 사용자 컴터가 다운로드 받는다.
브라우저는 다운로드된 내용을 처리하는 것이다.

즉 서버와 동기화가 되어 있지 못하다.

이러한 동기화 처리는 JAVA와 섞어쓰기가 필요한 대목이겠다.

html 태그는 순서대로 차례대로 읽혀지고 처리가 되는데 중간에 XXX.js를 만나면 다운로드를 다 받을 때
까지 멈추게 된다. 따라서 지연이 발생하고 화면은 열리지 않게 된다.

그런데 이벤트 처리가 먼저인가 화면 처리가 먼저 인가를 생각해 보면 화면을 먼저 그리고 그 후속으로 이벤트 처리가 필요하다는 것을 알고 있다

그러면 defer옵션을 추가하여 그대로 아래로 진행 시킨다음 다운로드가 완료되었을 때

코드를 실행하게 되면 undefined 메세지를 피할 수 있을 것이다.

인라인요소 vs 블록 요소

1. 배치 (Layout) 방식

  • 블록 요소는 화면의 너비를 모두 차지하고, 새로운 줄에서 시작

  • 요소는 위에서 아래로 쌓이며, 수평 공간을 차지하고 다른 요소와 나란히 나타나지 않는다.

<div>, <p>, <h1>, <ul>, <li>와 같은 요소가 블록 요소

  • 인라인 요소는 콘텐츠 내에서 나란히 표시 인라인 요소는 콘텐츠의 일부로서 텍스트나 다른 인라인 요소와 나란히 배치한다.

  • 필요한 만큼의 공간을 차지

일반적으로 <span>, <a>, <strong>, <em>과 같은 요소가 인라인 요소입

2. 크기 조절

  • 블록 요소는 너비(width)와 높이(height)를 CSS로 지정하여 크기를 조절할 수 있다.
  • 인라인 요소는 일반적으로 너비와 높이를 지정해도 적용되지 않거나, 설정해도 텍스트나 인라인 요소의 크기를 조절하기 어렵다.

3. 줄 바꿈

  • 블록 요소 : 블록 요소는 새로운 줄에서 시작하므로 한 블록 요소 뒤에 다른 블록 요소가 오면 자동으로 줄 바꿈이 발생

  • 인라인 요소 : 인라인 요소는 나란히 배치되므로 다른 인라인 요소와 같은 줄에 표시

  • 줄 바꿈이 발생하려면 br 요소나 CSS의 display: block; 속성을 사용하여 변경해야함

4. 상자 모델

  • 블록 요소 : 블록 요소는 상자 모델의 모든 속성(패딩, 보더, 마진)을 적용할 수 있으며, 주로 레이아웃을 설계하는 데 사용

  • 인라인 요소 : 인라인 요소는 수평적으로 흐르며 상자 모델을 사용하기 어려우므로, 패딩과 마진은 좌우 방향으로만 적용

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rect{
      width:150px;
      height: 150px;
      background-color: greenyellow;
      margin-bottom: 10px;
      /* margin-bottom : 외부여백 */
    }
  </style>
</head>
<body>
  <span class = "rect">
    1
  </span>
  
  <span class = "rect">
    2
  </span>

  <span class = "rect">
    3
  </span>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rect{
      width:150px;
      height: 150px;
      background-color: greenyellow;
      margin-bottom: 10px;
      /* margin-bottom : 외부여백 */
    }
  </style>
</head>
<body>
<div class="rect">1</div>
<div class="rect">2</div>
<div class="rect">3</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습 - 좌표</title>
    <link rel="stylesheet" href="c1.css">
    <!-- js가 외부 파일인 경우 다운로드에 시간이 발생될 수 도 있다. -->
    <script src="c1.js" defer></script>
</head>
<body>
    <div class="line horizontal"></div>
    <div class="line vertical"></div>
    <img class="target" src="target.png" alt="타겟이미지">
    <span class="label">(500,400)</span>
    
</body>
</html>
  
* {
    box-sizing: border-box;
    left: 0;
    top: 0;
}

body {
    background-color: black;
}

.line {
    position: absolute;
    background-color: white;
}

.vertical {
    height: 100%;/* 화면을 꽉채움 */
    width: 1px;/* 흰선 두께 */
    left: 50%;/* x축 좌표 */
}

.horizontal {
    width: 100%;
    height: 1px;
    top: 50%;
}

.label {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(20px,20px);
}

.target {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
const vertical = document.querySelector('.vertical');
const horizontal = document.querySelector('.horizontal');
const target = document.querySelector('.target');
const label = document.querySelector('.label');

//const 상수선언시, let 변하는 값을 사용
//var - 호이스팅 이슈
addEventListener('load', () => {
  console.log('test');
  const domRect = target.getBoundingClientRect();
  const twidth = domRect.width;
  const theight = domRect.height;
  console.log(`${twidth} , ${theight}`);
  document.addEventListener('mousemove', (event) => {
    const x = event.clientX;
    const y = event.clientY;
    console.log(`${event.clientX}, ${event.clientY}`);
    //문제제기 - 좌표값이 출력되는건 확인했지만 가로와 세로 선이 그대로 이다. 해결해 본다
    vertical.style.left = `${x}px`;
    horizontal.style.top = `${y}px`;
    target.style.left = `${x}px`;
    target.style.top = `${y}px`;
    label.style.left = `${x}px`;
    label.style.top = `${y}px`;
    label.innerHTML = `(${x}px, ${y}px)`;
    //TextNode는 NodeName은 없는 NodeValue는 있다.
    //label.innerHTML = `(100px, 200px)`;
  });
});

document.querySelector

HTML 구조가 있다고 가정해보자.

<div class="myDiv">이것은 div 요소입니다.</div>
<p class="myPara">이것은 문단(p) 요소입니다.</p>

document.querySelector는 JavaScript의 DOM(Document Object Model)을 사용하여 HTML 문서에서 요소를 선택하는 메서드다. 

const divElement = document.querySelector('.myDiv');
const paraElement = document.querySelector('.myPara');

  • 위의 코드에서 document.querySelector('.myDiv')는 CSS 선택자 .myDiv에 해당하는 첫 번째 div 요소를 선택하고,

  • document.querySelector('.myPara')는 CSS 선택자 .myPara에 해당하는 첫 번째 p요소를 선택한다.

load 이벤트

  • load 이벤트는 웹 페이지의 모든 리소스 (이미지, 스크립트, 스타일 등)가 로드되고 페이지가 완전히 준비된 상태일 때 발생한다.

  • window 객체에서 발생하며, 주로 초기 설정 및 초기화를 위해 사용한다.

1. 지금 여기서는 이벤트에 대한 이벤트 처리기는 페이지가 로드되면 실행되고, 코드 블록 내에서 다음 작업을 수행한다.

2. test를 콘솔에 출력하는 console.log('test'); 구문 실행.

3. getBoundingClientRect() 메서드를 사용하여 domRect 객체를 생성하고 

4. 해당 너비와 높이를 twidth 및 theight 변수에 저장. 이 정보는 나중에 사용한다.

createElement 자바스크립트 요소 생성

  • 대부분 HTML document에서 바로 요소를 생성하지만 자바스크립트를 통해서도 요소를 생성하는 것이 가능하다.

  • 동적으로 특정 태그의 HTML 요소를 생성하려면 자바스크립트의 document.createElement() 메소드를 사용할 수 있다.

  • 요소를 생성한 후에는 appendChild() 메소드나 insertBefore() 메소드를 사용하여 document에 요소를 삽입할 수 있다.

  • 이 후에 removeChild() 메소드를 사용하여 노드를 제거하거나 replaceChild() 메소드를 사용하여 노드를 교체할 수 있다.


<!DOCTYPE html>
<html>

<head>
  <script>
    function fun() {
      const btn = document.createElement("button");

      btn.innerHTML = "Click me";

      document.body.appendChild(btn);
    }  
  </script>
</head>

<body>
  <button onclick="fun()">Create Button</button>
</body>

</html>
  • 위의 코드를 index.html로 저장한 후 실행하면 다음과 같은 화면을 볼 수 있다.

profile
지환
아는만큼보인다.
다음 포스트

자바스크립트 - 페이징네이션 및 workout

0개의 댓글