1. [송이] 다음 코드를 실행했을 때 div의 배경색을 유추하세요!2. [송이] 다음 중 Sheet에 대한 옳지 않은 설명을 고르세요!3. [송이] 다음 코드를 실행했을 때 div의 배경색을 유추하세요!4. [예진] 아래의 예제를 보고 각 출력 결과에 해당하는 cssRules속성을 적어주세요.5. [예진] 다음 설명에 O/X를 표시하고 그 이유를 말해주세요.7. 다음 키워드를 포함관계 순서에 맞춰 정렬하세요! (범위가 클수록 위, 같으면 수평으로 적어주세요)[8~9] 다음 코드를 보고 정답을 맞춰주세요!8. 다음 click1을 클릭했을 때 click1 div의 최종 배경색은??9. click1을 클릭하고 click2를 클릭했을 때의 렌더링 결과를 적어주세요!
1. [송이] 다음 코드를 실행했을 때 div의 배경색을 유추하세요!
<style id="s"> div { width: 100px; height: 100px; background-color: blue; } </style> <body> <div id="container"></div> <script> const el = document.querySelector('#s'); const sheet = el.sheet; const rules = sheet.cssRules; const rule = rules[0]; sheet.insertRule('div {background-color: red}', rules.length); const $container = document.querySelector('#container'); $container.style.backgroundColor = 'pink'; // 인라인으로 들어감. 남용 시에 대참사가 날 수 있음 sheet.insertRule('div {background-color: green}', rules.length); </script> </body>
정답
pink 입니다!
$container.style.backgroundColor = 'pink'; 는 요소의 인라인 스타일로 적용되기 때문에 우선순위가 높습니다.예진 - pink?
윤 - green ?? x 돔으로 직접 접근하는 방법은 인라인(우선순위1)으로 들어감. 남용 시에 대참사가 날 수 있음
2. [송이] 다음 중 Sheet에 대한 옳지 않은 설명을 고르세요!
(1) document에 등록된 sheet 객체에 변화가 생기면 repaint, 경우에 따라 reflow를 한다. (2) document.styleSheets를 통해 html 내 <style> 태그로 적용된 스타일만 볼 수 있다. (3) document.styleSheets 인덱스가 높을 수록 우선 순위가 높다. (4) DOM 조작보다 비용이 저렴하기 때문에 CSSOM 조작으로 스타일과 클래스를 조작하는것이 좋다.
정답
(2) document.styleSheets엔 <style> 뿐만 아니라 외부 css도 포함된다.
예진 - 2: 나머진 맞는 것 같아서...
윤- 2
3. [송이] 다음 코드를 실행했을 때 div의 배경색을 유추하세요!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./style.css" /> <title>Style Sheets</title> <style id="s"> div { width: 100px; height: 100px; background-color: blue; } </style> <style id="w"> div { width: 10px; height: 10px; background-color: yellow; } </style> </head> <body> <div id="container"></div> <script> const el = document.querySelector('#s'); const sheet = el.sheet; const rules = sheet.cssRules; const rule = rules[0]; sheet.insertRule('div {background-color: red}', rules.length); sheet.insertRule('div {background-color: green}', rules.length); </script> </body> </html> // style.css div { width: 200px; height: 200px; background-color: pink; }
정답
id=”w”인 스타일을 따라 10px, 10px인 노란박스가 출력된다.
styleSheets는 인덱스가 클수록 우선순위를 갖는다! (insert 된것들은 인덱스 낮은 시트의 추가속성일뿐)
document.styleSheets
0: 외부 style.css
1: id = s 스타일 시트
insert
insert
2: id = w 스타일 시트
예진 - green..? : link로 불러온 css파일이 먼저 읽어지고 그다음에 아래 코드들이 읽어져서? ⇒ 이미 #s가 #w로 교체 됐는데 insert는 #s에 하고 있기 때문에 적용되지 않는다, link로 불러오는 외부 css파일도 순서를 바꾸게 되면 style태그 이후에 적용될 수 있다.
윤 - green x - link던 스타일태그던 순서대로 오버라이딩 된다
link로 불러와진 Sheet는 document.styleSheets으로 접근할 수 있다
4. [예진] 아래의 예제를 보고 각 출력 결과에 해당하는 cssRules속성을 적어주세요.
<style id="abc"> .header { font-size: 24px; background-color: red; color: white; } </style> -------------------------------- 콘솔 출력 결과 (1) 0: "font-size" 1: "background-color" 2: "color" ... 생략 (2) .header (3) 1
정답
(1) style, (2)selectorText, (3)type
console.log(rules[0]. ?) ⇒ ?가 어떤 속성이냐..?
송이 - (1) style(2) selectorText (3) type
윤 - (1)cssRules.style (2)cssRules.selectorText (3)cssRules.type
5. [예진] 다음 설명에 O/X를 표시하고 그 이유를 말해주세요.
(1) inertRule()을 이용해 룰을 추가할 때 함수 호출 위치가 뒤에 있더라도 정상적인 작동이 가능하다.
(2) document.querySelector(’#a’).sheet.cssRules로 얻어온 결과 값은 일반 배열과 마찬가지로 배열 메소드를 모두 사용할 수 있다.
(3) insertRule을 이용해 룰을 추가할 땐 추가할 위치가 중요하다.
정답
(1) O, 도큐먼트에 등록되어있는 sheet를 건드리게 되면 다시 리렌더링 하기 때문에 순서에 관계 없이 정상적인 작동을 할 수 있다.
(2) X, 일반 배열이 아닌 유사 배열(
length 속성과 인덱싱 된 요소를 가진 객체)이기 때문이다. length속성은 있지만 일반적인 배열 메소드는 작동되지 않는다.(3) O, css는 가장 나중에 등록된 정의가 제일 우선으로 적용되기 때문이다.
윤 - (1) o: document안에 있는 sheet속성이 바뀌면 재렌더링 되기 때문이다
유사 배열:
length 속성과 인덱싱 된 요소를 가진 객체 (2)x: sheet.cssRules는 유사배열이기 때문에 length는 쓸 수 있지만 다른 배열 메소드는 사용 불가
(3)o: 오버라이딩 되기때문에, 인덱스 숫자가 클수록 적용 우선순위가 높다
송이
- (1) O // CSSOM 동적 스타일 추가가 가능하다!
- (2) X 유사배열이기 때문에 일반 배열의 내장 메소드를 사용할 수 없다!
- (3) O 인덱스 번호가 큰 것이 적용된다!
7. 다음 키워드를 포함관계 순서에 맞춰 정렬하세요! (범위가 클수록 위, 같으면 수평으로 적어주세요)
style type selectorText cssRules properties sheet Styled Dom Element item
정답
Styled Dom Element
sheet
cssRules
item
type selectorText style
properties
예진 - Styled Dom Element > sheet > cssRules > item > selectorText = style = type > properties
송이
- Styled Dom Element
- sheet
- cssRules
- item
- type, selectorText, style
- properties
[8~9] 다음 코드를 보고 정답을 맞춰주세요!
<style id="s"> div { background-color: green; font-size: 16px; margin-bottom: 10px; padding: 10px; } </style> <body> <div class="blue">blue</div> <div class="blue">blue</div> <div class="red">red</div> <div class="yellow">yellow</div> <div class="blue">blue</div> <div class="blue yellow click1">click1</div> <div class="red">red</div> <div class="yellow">yellow</div> <div class="blue">blue</div> <div class="red">red</div> <div class="click2">click2</div> <div class="yellow">yellow</div> <div class="blue">blue</div> <div class="red">red</div> </body>
8. 다음 click1을 클릭했을 때 click1 div의 최종 배경색은??
<script> const el = document.querySelector('#s') const sheet = el.sheet const rules = sheet.cssRules document.querySelector('.click1').addEventListener('click', () => { sheet.insertRule('.blue {background: pink }', rules.length) sheet.insertRule('.yellow {background: red }', rules.length - 1) }) </script>
정답
핑크
예진 - 레드
송이 - 핑크
9. click1을 클릭하고 click2를 클릭했을 때의 렌더링 결과를 적어주세요!
<script> const el = document.querySelector('#s') const sheet = el.sheet const rules = sheet.cssRules document.querySelector('.click1').addEventListener('click', () => { sheet.insertRule('.blue {background: pink }', rules.length) sheet.insertRule('.yellow {background: red }', rules.length - 1) }) document.querySelector('.click2').addEventListener('click', () => { sheet.deleteRule(0) }) </script>
정답
- 텍스트의 사이즈가 16px로 바뀌고 div의 높이는 콘텐츠의 높이만큼 줄어든다
- div의 마진과 패딩이 제거된다
- .blue와 .yellow클래스를 가지지 않은 요소들의 배경색이 없어진다
예진 - 원래 있던
background-color: green;
font-size: 16px;
margin-bottom: 10px;
padding: 10px; 가 날라가고, 초록배경인 애가 하얗게 변한다.
.블루 - 핑크, .yellow는 red적용
송이 - blue 클래스: 핑크 / yellow (click 제외) 클래스: 레드 / red 클래스: 화이트
(폰트 사이즈, 패딩, 마진은 모두 다같이 날라감)