css
Cascading Style Sheet
상위요소는 건드릴수 없다.
HTML에 Style(디자인)을 준다.
**스타일정보는 웹문서가 브라우저에 렌더링 되기 전에 읽어져야 하기 때문에 모든 스타일 정보는 head 영역에 정의되어야 한다. (body전에 정의. 하지만 head 권장. title 밑 권장)
주석 : /* */ (단축키는 같음. 컨트롤+/)
- 스타일 시트 종류
- 내부 스타일 시트 : 해당 문서 head 안에 style 태그로 css용 영역을 만듬.
*2. 외부 스타일 시트 : 해당 문서 바깥에 별도의 css파일을 만들어서 정의.
- 연결방법 : link 태그(head안에 명시) 이용해서 외부 css파일을 불러온다.
- 내부보단 외부 스타일 시트가 더 많이 쓰인다.
장점 : 하나의 css파일로 여러 HTML 파일 수정 가능(코드 재사용)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 내부스타일 시트 */
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<!-- 외부 스타일 시트 -->
<link rel="stylesheet" href="./css/23.css기본.css">
</head>
<body>
<div class="box">box태그</div>
</body>
</html>외부 css. style태그 안씀
.box{
width: 50px;
height: 50px;
background-color: cyan;
}내부 스타일 시트와 외부 스타일 시트의 우선순위는 같다.
내부를 먼저 쓰고 외부를 마지막에 쓰면 외부 스타일이 적용되고, 외부를 먼저 쓰고 내부를 마지막에 쓰면 내부 스타일이 적용된다.
- CSS 선택자 -
선택자{
속성: 속성값;
속성: 속성값;
}선택자 안의 속성값 다음 ; (세미콜론) 필수
★우선순위
1. id : #id
2. class : .class
3. tag : tag명
여러 방법으로 속성값을 줬다면 우선순위별순으로 적용된다.
만약 width, height값을 id, class로 주다가 id의 css에서 width를 뺐다면 class의 css의 width 스타일을 가지고 온다.
동일 순위라면 마지막에 쓴 걸로 적용된다.
- 선택자 개수
부모 .a {background-color:red;}
.a {background-color:blue;}
하면 red가 된다.
우선순위가 같을 때는 선택자 많이 쓴 쪽이 이김.
css만 건들일거면 class로 하는 것이 좋다.
javaScript사용할 때 id를 쓰기 때문에 id를 다 쓰게 되면 script할 때 id를 사용못 할 수도 있음
★우선순위에는 포함 안되지만 0순위처럼 사용하는것
인라인방식 : style 속성을 해당 요소에 직접 넣는 것
선택자의 우선순위에 포함이 되지 않는 이유는 style이 아닌, 옵션이기 때문
추천하는 방식은 아님
<div id="box1" class="box" style="width: 300px;">box태그</div>★우선순위 무시(파괴)
!important : 우선순위뿐 아니라 인라인방식, javaScript, jQuary랑 싸워도 이김.
이것을 쓴다는 것은 css를 잘 못 만들었다는 소리. (어쩔 수 없는 상황이 있긴 함)
javaScript도 이기니 javaScript안쓰겠다는 소리니까 되도록 쓰지 말 것
div{ /*tag*/
width: 150px;
height: 150px;
background-color: green !important;
}
글이 잘 정리되어 있네요. 감사합니다.