CSS : Cascading Style Sheets
css는 html보다 효율적으로 웹페이지를 디자인할 수 있다. 또한 코드 중복 방지 효과도 지닌다.
📍 CSS 사용 방법
웹페이지에서 css 효과를 주기 위해 <style> 태그를 사용한다. 목적에 따라 다양하게 입력할 수 있는 3가지 방법을 살펴보겠다.
🔎 1) <head> 태그 안에서 사용
a처럼 어디에 효과를 주고 싶은지 '선택자'를 입력하여 나타낸다. 여러 태그에 효과를 줘야 할 경우 한 줄에 가능하다.
<style>
a {
color:black;
text-decoration: none;
}
</style>또는
🔎 2) 인라인 스타일. <body> 태그 안에서 지정 태그에 사용
효과를 주기 원하는 태그에 직접 입력한다. 해당 태그에만 실행되므로 '선택자'를 입력하지 않는다.
<body>
<li><a href="" style="color:red; text-decoration:underline;">CSS</a></li>
<body>🔎 3) id or class 사용
<style>
.saw {
color:gray;
}
#active {
color: red;
}
</style>
<body>
<ol>
<li><a href="" class="saw" id="active">JavaScript</a></li>
</ol>
</body>📍 정의
a {
color:black;
}- a = Selector
- color:black = Declaration
- color = Property
- black = Value
📍 선택자 우선순위
id 선택자(#) > class 선택자(.) > 태그 선택자
why? id명은 중복되서는 안된다는 조건이 있다. 반면에 태그 선택자는 포괄적이다. class는 그 중간이다. 이처럼 구체적인 것이 포괄적인 것보다 더 우선순위가 높다.
또한 동일한 선택자 중에서는 가장 마지막, 즉 최신인 선택자의 우선순위가 제일 높다.
📍태그 범위
-
block level element
ex)h1
화면 전체 너비 사용 -
inline element
ex)a
지정된 자신의 부피만큼, 크기만큼만 범위 해당
범위는 display 속성 통해서 조절 가능하다. ( block / inline )
생활코딩 WEB2-CSS 강의 수강 후 정리한 글입니다.
부딪히지 않으면 아무 일도 일어나지 않는다 👊