13 CSS로 Style 작성하기 기초 I

 

 

css로 style작성하기

 

 

1. CSS에서 해야 할 것들

2. 해석해보기

 

 

 

1. CSS에서 해야 할 것들

 

지금까지 js에서 작성해보면서 테스트를 했다.

사실 text color 같은 것들은 style에 속하고, css에서 변경하는 것이 맞다.

그렇게 하는 것이 코드도 간결해지고, 에러도 줄일 수 있는 일관성을 갖는데 유리하다.

 

 

 

초기 작성했던 css로 가보자.

 

body{

    background-color: beige;

}

 

이것만 있을 것이다. 배경색 베이지로 정했었다.

 

 

 

여기에 h1 글자색을 정의를 추가하자.

그리고, 글자색을 바꿔줄 class도 하나 만들자.

이 class가 h1의 컬러를 담당할 변수를 대신한다고 보면 되겠다.

그럼 전에 했던 currnetColor 또는 newColor 같은 번거로움이 사라진다.

그냥 하나의 컬러 클래스에 이것 저것 변화를 준다고 보면되겠다

 

body{

    background-color: beige;

}

h1{

    color : blue;

}

.textColor{

    color : tomato;

}

 

 

 

이제 저 .textColor라는 클래스를 자바스크립트에서 참조하여 변화를 준다고 보면된다.

사실 정확히는 자바스크립트는 html에서 가져다 쓰고 다시 반영해주고 하는 것이고,

css는 html을 항상 바라보고 있다고 하는 것이 맞을 것이다.

 

어째든 쉽게 생각하자. css 에서 컬러에 대해 정의해놓고, 그걸 html에 반영함과 동시에 

자바스크립트를 통해 조절한다고.

 

 

 

 

 

이제 js로 돌아가서 조절을 해보자.

변화를 준 것은 위에서 얘기한 대로 current, new 로 나눠서 정해줬던 것을 className으로 통일해서 대체했다.

html에는 h1에 대한 class를 정한게 따로 없었다. 

className =  "" 의 의미는 클래스를 참조할 것이 없으므로, 원래 색을 가지고 있다 라는 의미다.

className = "textColor" 부분에서 색을 css에서 클래스로 정해놓은 부분이 반영이 되는 것이다.

 

 

function handleTitleClick(){

    if(h1.className === "textColor"){

        h1.className = "";

    } else{

        h1.className = "textColor";

    }

}

 

 

 

 

 

 

 

 

2.  해석을 해보자

 

클래스 네임이 textColor일 때는 클래스 네임의 값은 없다이며, 그렇지 않을 경우( 즉 textColor 클래스가 아닐 경우)에 클래스네임은 textColor를 반영한다.

tomato 색일 때는 다시 원래의 색으로, 그리고 그렇지 않을 때( 원래의 색일 때)는 tomato색으로 한다.

 

 

 

기본 원리는 동일하다. 

그런데 여기서 css를 참조하는  클래스 이름인 "textColor"라는 string을 그대로 조건문의 변수로 사용하는 것이 에러를 발견하기 어렵게 하는 요소이다. 그래서 이를 새로운 변수로 지정해 주는 것이 오류를 막는데 도움이 된다.

 

const h1 = document.querySelector(".title h1");

function handleTitleClick(){

    const textColorClass = "textColor";

    if(h1.className === textColorClass){

        h1.className = "";

    } else{

        h1.className = textColorClass;

    }

}

h1.addEventListener("click", handleTitleClick);

 

 

 

 

 

Tips. 초보자 유의사항

1. css에서 클래스를 추가할 때, 앞에 .을 붙이고 이름을 명명한다.

2. js에서 css의 클래스를 참조할 때 h1.className 방식으로 작성한다.

3. css참조하는 클래스의 이름은  미리 새로 변수에 지정해 놓고 반영한다.

 

 

 

 

 

BR.h