(Manipulating CSS 02) CSS 속성

SoloLearn jQuery 번역

CSS Properties

CSS 속성
  • Similar to the html() method, the css() method can be used to get and set CSS property values.
    • html() 메소드와 마찬가지로, css() 메소드는 CSS 속성 값을 가져오고 설정하는 데 사용할 수 있다.

  • HTML:
<p>What's up?</p>

  • CSS:
p {
  background-color: red;
  color: #ffffff;

  • JS:
$(function() {
  $("p").css("background-color", "blue");

코드 실행 확인

The code above alerts the background-color property of the paragraph and then sets it to blue.

위 코드는 p 태그의 background-color 속성을 alert하고, blue로 설정한다.

Multiple Properties

여러 속성 조작하기

  • To set multiple CSS properties, the css() method uses JSON syntax.
    • 여러 CSS 속성을 설정하기 위해, css() 메소드는 JSON 구문을 사용한다.

  • As you can see, the syntax consists of "property":"value" pairs, which are comma separated and enclosed in curly brackets {}.
    • 구문은 "속성":"값" 쌍으로 구성된다.
    • 쉼표로 구분하고, 중괄호 {}로 감싼다.

  • For example:

코드 실행 확인

  • This will set the color and font-size properties of the paragraph.
    • 위 코드는 p 태그의 colorfont-size 속성을 설정한다.

You can specify any number of properties using this JSON syntax.

JSON 구문을 사용하면 속성 여러 개를 지정할 수 있다.


  • Fill in the blanks to set the font-size and color of the paragraph:
    • p 태그의 font-size와 color를 설정해라.
$("p").css("font-size", "16pt");
$("p").css("color", "blue");

  • Fill in the blanks to set the color and width property of the div.
    • div의 color와 width 속성을 설정해라.