CSS
-css의 모든 속성을 외울 필요없음. MDN의 css 레퍼런스 참조
https://developer.mozilla.org/en-US/docs/Web/CSS
-무슨 속성을 사용할지 모르겠다면 구글에 검색. ex)그림자 만들고 싶음=>css shadow
-css파일을 html파일과 연결 => head태그(메타정보)에 <link rel="stylesheet" href="example.css"> 추가
여러 속성들
-
background-color vs background
-background는 배경 이미지 설정, 그래디언트 설정 등 배경 이미지에 대한 많은 옵션이 있음.
-background-color는 배경색만 지정함.
-rgb(100, 100, 100)으로 색상 설정 가능.(color picker 활용하여) -
text-align: 해당 컨테이너 내에서 글자 정렬
-
font-weight: 400이 nomal. 지원하지 않는 요소도 있다. 그럴 경우 가장 비슷한 굵기로 브라우저가 설정
-
text-decoration: underline, line-through, wave; 와 같이 여러 옵션이 추가 됨. 색상, 모양 등..
- a{
text-decoration:none;
} //앵커 태그의 밑줄 없앰
-
line-height: 줄 간격(간격만 조절)
-
letter-spacing: 글자 사이 간격 조절
-
font-size: 글자 크기 설정
-
font-family: 글꼴 변경. 브라우저에 내장된 폰트에 따라 다르므로 ,로 백업용 폰트 설정할 수 있다. 마지막 폰트는 group으로 제네릭하게 설정하는게 좋다(브라우저가 해당 group내에서 하나 고름)
선택자
- 선택자 리스트
h1, h2 {
}
h1과 h2요소 모두 선택
- id선택자
html에 id를 추가하고, 해당 id 요소를 선택함
#id선택자 {
}
하나의 요소에만 적용하고, 하나의 id는 페이지 내에서 한 번만 나와야 한다(고유 식별)
id를 최소화(?)해서 쓰는게 좋음.
- class 선택자
.클래스이름 {
}
공통된 특성을 가지는 것을 그룹으로 묶어서 선택
요소에 class 태그를 달면 나중에 쉽게 찾아서 사용 가능
주로(?) 사용함
- 자손 선택자
li a {
}
li태그에 중첩된 모든 a태그 선택. class, id에도 활용 가능
ex) #id li / .class li
- 인접 선택자
input + button {
}
input다음으로 오는 button요소를 선택(형제 개념)
- 직계 자손 선택자
div > li {
}
div의 직계 자손인 li만 선택
- 속성 선택자
input[type="text"] {
}
input요소에서 type="text"특성을 가진 것을 선택
- a[href*="google"] {
}
앵커태그의 href에 "google"이 포함되면 선택
- 유사 클래스[선택자](pseudo class)
선택자 끝에 붙여 상태를 특정하는 키워드, :을 붙여서 사용
ex1)a:hover {
}
a태그에 마우스를 올렸을 때 색상 변함
ex2)button:active {
}
버튼이 활성화 되었을 때 동작
ex3)input[type="radio"]: checked{
}
check되면 동작함
- 가상 요소(pseudo element)
가상 클래스보다 실질적인 페이지의 요소(어떤 대상이나 선택한 요소의 일부), ::을 붙여서 사용
h2::first-letter {
font-size:50px;
}
h2의 첫 번째 글자 크기 50px로 설정
p::first-line {
}
p의 첫 번째 줄 선택
p::selection {
background-color: yellow;
}
p에서 드래그하면 배경색 변경
css 우선순위
css는 cascade하므로 같은 선택자로 설정하면, 이후에 적용된 스타일이 표시 됨.
다른 선택자 => 특이도에 다름
같은 속성을 건드릴 경우, 더 구체적인 선택자가 지정한 속성을 선택(충돌이 발생할 때만)
우선순위: inline style = !important > id > class > element
상속
-상위 요소에 적용된 스타일을 하위에서 따로 설정하지 않으면 상속받음
-but 일부 요소는 상속받지 않도록 설정이 되어 있다. <input>, <button> 등
button, input {
color: inherit;
} 와 같이 상위 항목의 특성을 상속받도록 할 수 있다(아예 못받는 요소, 속성도 있음!)
-개발자 도구에서 어떤 요소로부터 상속 받았는지 확인 가능.
