반응형
Style 속성을 이용해서 CSS 사용하기
html의 문법 style=" ~속성(property)~ "
<h2 style="Background-color:coral; color:powderblue;">자바스크립트</h2>
Style 태그를 이용해서 CSS 사용하기
<div> : 어떤 의미도 기능도 없는 태그, css/자바스크립트 등으로 제어하고 싶을 때 감싸줌, 한줄 전체를 쓰는 태그이므로 자동으로 줄바꿈이 됨 → 줄바꿈이 되지 않는 태그가 필요하다면 <span>을 쓰자!
<span style="font-weight:bold;">해이나</span>는 공부를 하는 중이다.<head>
<style>
.js{
font-weight:bold;
Color:red;
}
</style>
</head>
<span class="js">해이나</span>는 공부를 하는 중이다.
→ 이 웹페이지에 있는 태그 이름이 js라면 폰트를 굵게, 색상을 빨간색으로 바꾼다.
→ 만약 이 글에서 해이나가 1억번 반복되더라도 상단의 선택자를 통해 한 번에 수정할 수 있다.
CSS 선택자
<head>
<style>
.js{
font-weight:bold;
color:red;
}
#first{
color:green;
}
span{
color:blue;
}
</style>
</head>
<span id="first" class="js">해이나</span>는 공부를 하는 중이다.→ 클래스 앞에는 마침표(.)를 붙이고 아이디 앞에는 샾(#)을 붙인다. 아무것도 붙이지 않으면 이 웹페이지에 있는 해당 태그 모두를 의미한다.
→ class는 무언가를 그룹핑한다는 의미, id는 한가지를 식별(타겟팅)한다는 의미이다. 같은 class명은 페이지 내에서 여러번 사용 가능, 같은 id값은 페이지 내에서 한 번 밖에 사용할 수 없다. (사용해도 동작은 하지만 규약 위반임)
→ class 선택자가 id 선택자보다 더 포괄적이다. class 선택자를 이용해서 효과를 주고 싶은 태그들을 광범위하게 처리하고, 예외 처리 하고 싶은 태그들은 id 선택자를 이용하면 된다. (id의 우선순위가 class보다 높음)
※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다.
반응형
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| border-collapse 이용하여 div 테두리 겹침 제거 (0) | 2020.09.18 |
|---|---|
| 텍스트 관련 CSS (0) | 2020.09.12 |
| 폰트 관련 CSS (0) | 2020.09.11 |
| CSS 여백 margin(마진) 속성 이해하기 (0) | 2020.08.29 |
| 스타일과 스타일 시트, 주요 선택자 (0) | 2020.08.25 |
댓글