1. CSS 스타일 정의 방법 3가지
- 인라인 스타일(Inline Style) : HTML 태그 명령어 라인 내부에 스타일 정의
- 내부 스타일(Internal Style Sheet) : HTML 문서 내부 상단에 style 태그를 이용해 별도로 스타일 정의
- 외부 스타일(External Style Sheet) : HTML 문서와 별도로 확장자가 css인 파일 생성 후, HTML 문서 상단에 link 태그로 불러와 스타일 적용
2. 스타일 적용 우선 순위
속성값 !important > 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 기본값
3. 인라인 스타일에 접근하기
<div id="test" style="color:red"></div>const test1 = document.getElementbyId("test");
conosle.log(test.style.color); // color :red 값을 읽어온다 4. 내부스타일 또는 외부 스타일 가져오기
인라인 스타일이 아닌 경우 스타일 접근하는 방법은 getComputedStyle()함수를 이용해서 전체스타일을 구한 후 , 속성에 접근해야 한다.
단, 모든 값은 읽기 전용
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>스타일 가져오기</title>
<style>
#test {
font-size:24px;
}
</style>
</head>
<body>
<div id="test">테스트</div>
<script>
const test1 = document.getElementById("test");
const style = window.getComputedStyle(test1);
console.log(style.fontSize); // "24px"
}
</script>
</body>
</html>5. class 및 id 속성을 사용하여 element의 css속성을 적용 및 제거하기
setAttribute()//id속성 추가와 classList.add()//class속성 추가를 활용하여 css 적용한다. 그리고 removeAttribute()와 classList.remove()를 사용해 css를 제거한다.
<참조>
https://programmer-seva.tistory.com/58
https://demun.tistory.com/2418
사진촬영을 좋아하는 프론트엔드 개발자입니다.