JavascriptJS Memo

HTML 폼과 CSS 제어하기

js, form, css

HTML 폼 태그와 CSS 제어하기

폼

웹에서는 사용자 정보를 입력할 때, 검색 키워드를 입력할 때 그리고 키워드를 검색할 때 등 다양한 용도로 사용된다. 데이터 처리 관점에서 바라보자면

폼에 입력한 데이터를 웹 서버로 보내고 웹 서버는 데이터를 처리하여 반환한다는 관점과
클라이언트 측 자바스크립트로 웹 어플리케이션을 만들 때 사용자 입력을 받는 UI로 사용한다. 이 때 데이터 처리는 클라이언트 자바스크립트가 담당한다라는 두 가지 관점이 있다.

폼 요소와 폼 컨트롤 요소

폼 요소를 작성하고는 method와 action 속성을 지정한다. method 속성에는 post, get 등의 방법이 있고 action은 데이터를 처리하는 CGI 프로그램의 URL을 받는다.

폼 요소와 폼 컨트롤 요소 가져오기

  • DOM 메서드로 가져오기

DOM을 할 때 배웠던 getElementById, getElementByTagName 등의 메서드를 사용하여 가져올 수 있다.

  • forms 프로퍼티로 form 요소 가져오기

form 요소 목록은 Document 객체의 forms 프로퍼티에서도 가져올 수 있다.

  • form 요소 객체의 자식 요소로 객체 가져오기

CSS 제어하기

스타일을 변경하는 방법에는 요소 객체의 style 속성을 수정하기, class 속성 값을 바꾸어 스타일 전환하기, 스타일 시트를 수정하는 방법이 있다.
주로 1,2를 사용한다.

인라인 스타일 제어하기

1번의 방법을 인라인 스타일이라고 하는데 이를 제어할 수 있다.

요소 객체가 가진 style 프로퍼티의 값은 CSSStyleDeclaration 객체이다(카멜 케이스)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1 id="title">Javascript</h1>
  <script>
    var element = document.getElementById('title');
    element.onclick = function() {
      element.style.backgroundColor = "pink";
    }
  </script>
</body>
</html>

클래스 제어로 스타일 변경

이 방법을 이용하면 여러 요소의 스타일을 한꺼번에 바꿀 수 있다.

Share