인프런 9강 "style 속성을 이용해서 CSS 사용하기"
** style 속성 안에는 CSS로 와야 함
- 글자 색상 변경
- <h2 style="color:powderblue">JavaScript</h2> : 문자열 JavaScript의 글자색 변경됨
- 배경 색상 변경
- developer.mozilla.org/ko/docs/Web/CSS/background-color 참고
- <h2 style="background-color: coral;color:powerblue">JavaScript</h2> : 해당 문자열의 배경 색상 변경
인프런 10강 "style 태그를 이용해서 CSS 사용하기"
- 내용 중 특정 부분을 진하게 하고 싶은 경우 (제목이 아닌 경우)
- <span style="font-weight:bold;">JavaScript</span> : JavaScript만 볼드체로 강조해줌
- <head>
<style>
js{
font-weight: bold;
}
</style>
</head>
<body> ...
<span class="js">JavaScript</span> ...
</body>
- 처음 상태와 전혀 변화 없음
- <head>
<style>
.js{
font-weight: bold;
}
</style>
</head>
<body> ...
<span class="js">JavaScript</span> ...
</body>
- 클래스명으로 선언해 준 경우에는 .클래스명 { ... } 로 명시해줘야 함
인프런 11강 "CSS 선택자"
- 등장하는 여러 문자열 중 첫 번째만 다른 색으로 하고 싶은 경우
- #first{
color:green;
}
<span id="first" class="js">...</span>
- id는 #과 함께 명시, class는 .과 함께 명시
- span {
color:blue;
}
- 웹 페이지의 모든 span 태그에 해당하는 내용
- class 선택자와 id 선택자가 함께 명시된 경우 id 선택자로 명시한 내용이 먼저 보임
- class : grouping한다는 것 의미 (ex) 1반, 2반, ...
- id : 한 가지 대상을 식별하는 것 의미 (ex) 17113(학번) : 겹치지 않아야 함.
- 광범위한 것은 class 선택자를 활용하지만, 예외적인 경우에는 id 선택자를 부여하는 것이 효율적
- id 선택자 > class 선택자 > span 선택자의 우선순위로 결정됨
** 개인적으로 이번에 알게 된 것
- <h1>는 제목, 가장 큰 글씨 크기
- <p> 전체 내용
- <div> 줄바꿈 해줌
- <span> 줄바꿈해주지 않음
'JavaScript ◡̈ > inflearn JavaScript' 카테고리의 다른 글
| [WEB2 - JavaScript] section5 조건문 (0) | 2021.02.24 |
|---|---|
| [WEB2 - JavaScript] CSS 기초 (2) (0) | 2021.02.24 |
| [WEB2 - JavaScript] 변수와 대입 연산자, 웹브라우저 제어 (0) | 2021.02.24 |
| [WEB2 - JavaScript] 데이터 타입 - 문자열과 숫자 (0) | 2021.02.24 |
| [WEB2-JavaScript] HTML과 JS의 만남 (0) | 2021.02.24 |
