생활코딩으로 공부하고 복습하는 내용입니다.
CSS 효과를 적용하는 두가지 방법
1. style 태그
<head>
<style>
a {
color: red;
text-decoration:none;
}
</style>
</head>style 태그는 head 안에 들어가며 CSS코드를 작성하는 용도이다.
즉, CSS 언어의 문법대로 해석하여 처리된다.
어디에 효과를 줄것인지를 나타내는 선택자(selector)와 어떤 효과(Declaration)를 줄 것인지를 작성하게 된다.
선택자의 종류
https://www.w3schools.com/cssref/css_selectors.php
- 태그 선택자 -> 태그 그대로 선택자로 사용
- class 선택자 -> .class name
*클래스라는 속성의 값은 여러개가 올 수 있으며 띄어쓰기로 구분함 - id 선택자 -> #id name
우선 순위
- id 선택자 > class 선택자 > 태그 선택자
- 하나의 태그가 2개 이상의 클래스의 영향을 받는다면 순서에 따라 가장 최신의 명령을 수행함
why?
id선택자는 중복되서는 안되고 유일하기 때문에 가장 우선순위로 적용됨. 구체적인 것이 포괄적인 것을 이기는 것이 디자인할 때 효율적.
링크
<link rel="stylesheet" href="name.css">
여러 페이지에 동일하게 들어가는 style 태그 내용들은 css파일을 별도로 만들고 링크로 연결하여 중복을 제거하고 일괄적으로 관리할 수 있다.
2. style 속성
<ol>
<li><a href="2.html" style = "color: red; text-decoration:underline">CSS</a></li>
</ol>특정 태그에 직접 style 속성 넣는 방법. 특정 태그에 CSS 효과를 주고 싶으면 태그 내에 style 속성을 넣고 속성의 값으로 원하는 CSS 효과 지정.
후론트엔드 개발자