선택자 {
속성: 값;
}
<!--
값을 입력하고 마지막에 꼭 ;(세미클론) 넣어주기.
줄바꿈 형식으로 작성해야지 보기 편하고 협업할때도 좋음.
css에서의 주석처리는 /**/이며, ctrl + / = 주석처리하는 단축키
-->
<style>
div {
color: orange;
margin: 20px;
}
<div style= "color: orange; margin: 20px;">Hello world!</div>
<link rel="stylesheet" href="./css/main.css">
@import url("./box.css");
div {
font-size: 100px;
}
* {
color: blue;
}
li {
color: blue;
}
<!--클래스가 apple일 경우-->
.apple {
color: red;
}
<!--id가 banana일 경우-->
#banana {
color: yellow;
}
span.orange {
color: red;
}
<!--순서를 바꿔서 작성하면 하나로 인식하기 때문에 순서를 제대로 적는것이 중요함!-->
ul >.orange {
color: red;
}
div .orange {
color: red;
}
.orange + li {
color: red;
}
<!--인접 형제 선택자는 쓰는곳이 많으니 꼭 기억해두기!-->
.orange ~ li {
color: red;
}
a:hover {
color: blue;
}
a: active {
color: red;
}
input:focus {
background-color: blue;
}
<!--focus는 HTML 대화형 콘텐츠(input, a, button, label, select 등)에서만 사용될 수 있다. 하지만 tabindex를 통해 HTML 대화형 콘텐츠이외에 태그도 포커스가 될 수 있는 요소를 만들 수 있음.-->
<!--*tabindex: tab키를 통해 포커스 할 수 있는 순서를 지정하는 속성. 순서로 -1이 아닌 다른 값을 넣는 것은 흐름을 방해하기 때문에 권장X-->
.fruits span:first-child {
color: red;
}
.fruits h3:last-child {
color: red;
}
.fruits *:nth-child(2) {
color: red;
}
<!--fruits라는 클래스에서 2번째라는 뜻-->
.fruits *:nth-child(2n) {
color: red;
}
<!--n은 0부터 시작하며 짝수번째들이 선택됨-->
.fruits *:nth-child(2n+1) {
color: red;
}
<!--n은 0부터 시작하며 홀수번째들이 선택됨-->
.fruits *:nth-child(n+2) {
color: red;
}
<!--n은 0부터 시작하며 2번째부터 전부 선택됨-->
.fruits *:not(span) {
color: blue;
}
<!--span이외에 태그들이 선택됨.-->
.box::before or ::after {
content: "원하는 내용";
}
<!--content는 내용이 없더라도 꼭 작성해줘야함!-->
[type] {
color: blue;
}
[type="어떤 요소인지"] {
color: blue;
}
선택자 우선순위: 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 우선 적용할지를 결정하는 방법.
<점수표>
전체선택자: 0점
태그선택자: 1점
class 선택자: 10점
id 선택자: 100점
인라인 선언: 1000점
!important: 무한대(우선순위에서 1등, 하지만 많이 쓰는걸 추천하지않음.)
※부정선택자는 0점으로 침.
border: 선-두께 선-종류 선-색상;
속성이름: 10px;(전체에 모두 지정)
속성이름: 10px 10px;(위&아래 왼&오)
속성이름: 10px 10px 10px;(위 왼&오 아래)
속성이름: 10px 10px 10px 10px;(위 오 아래 왼/시계방향)
font-family: 글꼴1, "글꼴2", ... 글꼴계열(필수작성);
이번 2주차 강의들을 들으면서 사용방법만 알고 기본적인 개념을 모르는 나를 보면서 내가 국비지원학원에서 css를 자세하게 배우지 않았었구나를 깨달았다. 앞으로 남은 css강의를 들으면서 더 자세하게 알아가는 시간을 가져야겠다.