Chapter 05. 스타일 다루기. Lesson 02. 핵심내용

Chapter 05. 스타일 다루기. 

Lesson 02. 핵심내용

- 핵심 01: 스타일 값 구하기

- 핵심 02: 스타일 값 설정하기

- 핵심 03: 클래스 추가

- 핵심 04: 클래스 삭제

- 핵심 01: 스타일 값 구하기

사용법 : 

$대상.css("스타일 속성이름")

$대상.css(["스타일 속성이름","스타일 속성이름"...])

예제 01. 메뉴 항목(li)의 글자 크기를 출력해 주세요

<script>
$(document).ready(function()
{
    // 메뉴 아이템의 폰트 사이즈 정보 출력
    console.log("font-size=", $("ul.menu li").css("font-size"));
});
</script>

실행결과

font-size = 12px

예제 02. 메뉴(ul.menu)의 너비와 높이를 출력해 주세요

<script>
$(document).ready(function()
{
    // 메뉴의 너비와 높이 정보 구하기
    var info = $("ul.menu").css(["width", "height"]);
 
    // 너비와 높이 정보 출력 하기
    console.log("width = "+info.width+", height = "+info.height);
});
</script>

스타일 속성을 동시에 여러 개 구할 때는 스타일 속성이름을 배열 값으로 만들어 css() 메서드를 호출합니다.

실행결과

width=300px, height=145px

- 핵심 02: 스타일 값 설정하기

사용법 : 

$대상.css("속성이름","값")
$대상.css
({
    속성이름:값
    속성이름:값
)}

예제 03. 실행 후 화면처럼 실행(#test) 버튼을 누를 때마다 선택 메뉴 아이템(li.select)의 글자 크기를 1px씩 증가시켜 주세요

<script>
$(document).ready(function()
{
    // 선택 메뉴 아이템 구하기
    var $item = $("ul.menu li.select");
    // #test에 클릭 이벤트 추가
    $("#test").click(function()
    {
    // 현재 선택한 폰트 크기 구하기
    var fontSize = parseInt($item.css("fontSize")); // parseInt()함수는 ()안의 문자열을 10진수로 형변환
                
    // 폰트 크기를 1증가
    $item.css("fontSize", fontSize+1);
    })
});
</script>

예제 04. 실행 버튼을 누르면 실행 후 화면처럼 메뉴 아이템의 폰트 크기를 11부터 시작해서 5씩 증가시켜 적용해 주세요

<script>      
$(document).ready(function()
{
  $("#test").click(function()
  {
    // 기본 사이즈
    var size=10;
    // 메뉴 아이템 개수 만큼 루프 돌기 =
    // each() 메서드는 노드에 순차적으로 접근하여 배열끝까지 루프를 돌림(for문이랑 비슷)
    $("ul.menu li").each(function(index) 
    {
    // 해당 메뉴 아이템 접근해 폰트 설정
      $(this).css(
      {
      fontSize:size
      })
  // 폰트 사이즈 5씩 증가
  size+=5;
    })
  })
});
</script>

예제 05. 버튼을 누르면 실행 후 화면처럼 선택 메뉴 아이템(li.select)의 너비와 높이를 100px로 만들어 주세요

<script>
$(document).ready(function()
{
    // 선택 메뉴 아이템 구하기
    var $item = $("ul.menu li.select");
    // #test에 클릭 이벤트 추가
        $("#test").click(function()
        {
        // 너비와 높이 스타일 값 설정하기
        $item.css({
        width:100,
        height:100
        })
    })
});
</script>

* 여러 개의 속성값을 동시에 적용할 때는 속성이름과 값을 오브젝트 리터럴로 만들어. css() 메서드를 호출합니다

- 핵심 03: 클래스 추가

사용법 : $대상.addClass("클래스 이름1 [클래스 이름2...]")

<script>
$(document).ready(function()
{
    // 메뉴 아이템에 클릭 이벤트 등록
    $("ul.menu li").click(function()
    {
    // 클릭한 메뉴 아이템에 select 클래스 추가
        $(this).addClass("select");
    })
});
</script>

* 여러 개의 스타일 속성값을 적용해야 하는 경우 css() 메서드를 이용해 여러 번 스타일 속성값을 적용하는 것보다

클래스 선택자를 만들어 사용하면 더 효과적입니다.

예제 07. 클릭한 메뉴 항목에 ".select" 선택자와 ".border" 선택자를 추가해 주세요

<script>
$(document).ready(function()
{
    // 메뉴 아이템에 클릭 이벤트 등록
    $("ul.menu li").click(function()
    {
    // 클릭한 메뉴 아이템에 select 클래스 추가
        $(this).addClass("select border");
    })
});
</script>

* addClass() 메서드를 이용하면 여러 개의 스타일 선택자를 동시에 추가할 수 있습니다.

- 핵심 04: 클래스 삭제

사용법

$대상.removeClass() // 모든 클래스 삭제

$대상.removeClass("클랙스 이름1 [클래스 이름...]")

예제 08. 클릭한 메뉴 아이템에 select 클래스가 적용되어 있지 않은 경우 적용해 주고 그렇지 않은 경우 제거해 주세요

<script>
$(document).ready(function(){
    // 메뉴 아이템에 클릭 이벤트 리스너 등록
    $("ul.menu li").click(function()
    {
        // 클릭한 메뉴 아이템에 select 클래스가 있는 경우 -> 제거
        // 없는 경우 -> 추가
        var $item = $(this);
        if($item.hasClass("select")==false)
        $item.addClass("select");
        else
        $item.removeClass("select");
    })
});
</script>

* hasClass() 메서드를 이용하면 특정 클래스가 적용되어 있는지 쉽게 알 수 있습니다.

* toggleClass() 메서드를 이용하면 위의 풀이를 다음과 같이 좀더 간결하게 처리할 수 있습니다.

<script>
$(document).ready(function(){
    // 메뉴 아이템에 클릭 이벤트 리스너 등록
    $("ul.menu li").click(function()
    {
        $(this).toggleClass("select");
    })
});
</script>

예제 09. 제거버튼(#remove)을 누르면 메뉴 항목에 설정되어 있는 클래스를 모두 제거해 주세요

<script>
$(document).ready(function()
{
    // 메뉴 아이템에 클릭 이벤트 리스너 등록
    $("#remove").click(function()
    {
        // 메뉴 아이템 개수 만큼 루프 돌기
        $("ul.menu li").each(function()
        {
        // 현재 메뉴 아이템에 설정된 모든 클래스 제거
        $(this).removeClass();
        })
    })
});
</script>