CSS 작성
- inline 작성 : 태그마다 일일이 작성해주어야 하므로 좋지 않다.
- html head 안에 style 태그에 작성
- css 파일에 작성
- css 파일 생성
- html head에 css 파일 링크 추가
<head>
<title>forms demo</title>
<link rel="stylesheet" href="mystyle.css">
</head>선택자
<--! 전체 선택자 -->
* {
color: pink;
}
<--! 요소 선택자 -->
button {
font-size: 30px;
}
h1,h2 {
color: white;
}
<--! id 선택자 -->
#clear {
color: white;
}
<--! class 선택자 -->
.done {
color: grey;
}
<--! 자손 선택자 -->
li a {
color: teal;
}
//<li> 태그에 속한 모든 a 태그만 선택된다.
.post a {
color: blue;
}
//post 클래스에 속한 모든 a태그가 선택된다.
<--! 인접 선택자 -->
h1 + p {
color: red;
}
//<h1> 태그 다음에 오면서 같은 단계에 있는 <p> 태그가 선택된다.
input + button {
background-color: pink;
}
// input 태그 다음에 오는 button이 선택된다. (button이 두개이면 인접한 하나만 선택)
<--! 직계 자손 선택자 -->
div > li {
color: white;
}
// div 바로 아래에 있는 li 태그만 선택된다.
<--! 속성 선택자 -->
input[type="text"]{
width: 300px;
color: yellow;
}
a[href="https://example.org"]{
color:green;
}
a[href*="example"]{
font-weight: 30px;
}
a[href$=".org"]{
font-style: italic;
}가상 클래스
- 선택자 끝에 붙여 상태를 특정하는 키워드
a:hover{
color: orange;
}
//hover: 커서를 올려두었을 때 특정 반응이나 다른 시각적 효과
.post button:hover{
background-clolr: red;
color: white;
}
.post button:active {
background-color: blue;
}
//active: button을 클릭하여 활성화 되어 있을 때 반응, 클릭을 멈추면 변화
.post:nth-of-type(3) {
background-color: blue;
}
//같은 요소가 여러개 있을 경우 특정 순서에 활성화
//3: 3번째만 선택
//3n: 3번째마다 선택가상 요소
h2::first-letter {
font-size : 50px;
}
// 모든 h2의 첫번째 글자 크기를 변경한다.
//::를 :로 작성해도 동작한다.
p::selection {
background-color: yellow;
}
// 모든 문단의 드래그한 영역의 배경 색이 변경된다.
// p를 빼면 document 전체 영역에 적용된다.CASCADE
- CSS (CASCADING STYLE SYSTEM)
- 적용된 스타일의 순서가 중요하다는 의미, 스타일의 최상단부터 폭포처럼 출발하여 스타일 시트 최하단 또는 다음 스타일 시트로 넘어가는 것
h1, h2 {
color: black;
}
h1, h2 {
color: purple;
}
//스타일은 위에서부터 적용되어 마지막이 가장 나중에 적용된다.
//즉 중복된 스타일이 적용될 경우 가장 마지막 스타일이 적용된다.
백엔드 개발 공부