-
WEB2 - JavaScript - CSS 기초JavaScript/생활코딩 2018. 12. 19. 10:09
CSS 기초 - https://opentutorials.org/course/3085/18789
style속성
아래 h2태그에 디자인적으로 태그를 꾸미고 싶다면 style을 추가하여 css언어를 사용하면 된다.
<h2 style ="color: powderblue">~~~</h2>
style 태그
div, span은 어떠한 기능도 없다. 그러므로 특정한 내용을 style로 꾸미고 싶을 때 해당 태그들로 감싸서 style속성을 줄 수 있다.
하지만 div로 감싸게 되면 줄바꿈이 되므로 줄바꿈이 없는 span으로 감쌀수도 있다.
<span style = "font-weight:bold;">~~~</span>
만약 특정한 내용이 여러개가 있어서 그 내용들을 모두 바꾸고 싶다면 일일히 바꿔줄 수 없다.
그럴 때는 아래와 같이 사용하면 된다.
head태그에 style태그를 넣고 class가 js인 태그에 대해서 속성을 바꿔주도록 하면 된다.
class를 선택할 때 style태그에서는 앞에 점을 붙이면 된다. 이 때 점은 선택자라고 한다.
<head>
<style>
.js{
font-weight : bold;
color: red;
}
</style>
</head>
...
<body>
<span class ="js">~~~~</span>
<span class ="js">~~~~</span>
<span class ="js">~~~~</span>
</body>
css선택자
여러개의 span태그 중 특정한 span태그만 바꿔주고 싶다면 id값을 주어서 아래와 같이 사용하면 된다.
id선택자는 style태그에서 #을 사용하면 된다.
하지만 첫번째 span태그는 id, class값 모두 가지고 있고 style태그에서는 color속성을 다르게 주고 있다.
이 때 class는 더 포괄적인 의미이고 id는 더 특정한 값을 예외처리 하기 때문에 id값에 있는 속성을 가지게 된다.
class와 id는 아래와 같이 생각하면 이해하기 쉽다.
class : 그룹핑 (학년의 반)
id : 식별 (학번)
<head>
<style>
.js{
font-weight : bold;
color: red;
}
#first{
color : green;
}
</style>
</head>
...
<body>
<span id = "first" "class ="js">~~~~</span>
<span class ="js">~~~~</span>
<span class ="js">~~~~</span>
</body>
style태그안에서 선택자들의 우선순위는 id > class > 태그 순으로 적용된다.
'JavaScript > 생활코딩' 카테고리의 다른 글
WEB2 - JavaScript - 프로그램, 프로그래밍, 프로그래머 (0) 2018.12.19 WEB2 - JavaScript - 제어할 태그 선택하기 (0) 2018.12.19 WEB2 - JavaScript - 웹브라우저 제어 (0) 2018.12.18 WEB2 - JavaScript - 변수와 대입 연산자 (0) 2018.12.18 WEB2 - JavaScript - 데이터타입 - 문자열과 숫자 (0) 2018.12.18 댓글