-
css는 cascading style sheet 즉, 위에서부터 아래로 차례로 적용된다.
그래서 동일한 셀렉터에 css를 적용할 경우 가장 마지막에 작성한 속성값을 따른다. -
htme에 css를 연결하는 방법 :
<head>안에 작성
- html파일에 css 코드 작성하기
<sytle> </style>안에 css 작성한다.
- css와 html을 분리하기
<link href = "스타일시트 파일명.css" rel = "stylesheet"/>
css 파일을 링크 걸어준다.
셀렉터 {
color: blue;
font-size: 20px; // 속성명은 공백x, - 사용
}
- 셀렉터 설정방법 :
#id명,
*(모든 요소),
.클래스명,
부모태그 자식태그(부모태그 안에있는 자식 요소에 적용),
부모태그 > 자식태그 (바로 밑의 자식 요소에만 적용),
태그 + 태그(태그 바로 다음으로 오는 형제 태그에 적용)
태그 ~ 태그(적용하고 싶은 요소(태그)가 바로 다음에 오지 않을 때 사용, ex) p ~ span : p다음에 오는 모든 span에 적용)
- class : id처럼 요소를 가리킬 수 있으면서도 겹쳐도 되는 방법. 여러 요소에서 동일한 클래스가 쓰일 수 있다. 한 요소가 여러 클래스를 가질 수도 있다.(id는 그럴 수 없음)
<span class = "tomato">hello</span>
<span>hello</span>
<span>hello</span>
<span class = "tomato honey potato">hello</span>-
pseudo selector
더 세부적으로 요소를 선택해주는 것
번거로운 선택과정을 규칙을 정해서 선택 가능하게 함.- li:
nth-child(n, 3n + 1, even, odd 등), first-child, last-child등 형제목록의 n번째 li 선택. 같은 종류의 요소에만 적용된다. nth-of-type: 동일한 타입들 안에서 순서를 따진다.input:속성: input태그에서 해당 속성을 가진 모든 요소에 적용input[type ~= "name"]: input태그 속성 type 값이 'name'을 포함하는 요소에 속성을 적용
첫 번째 혹은 마지막 번째의 요소를 선택하고 싶다면, first-child, last-child, first-of-type, last-of-type 을 사용
뒤에서 n번째 요소를 선택하고 싶다면, nth-last-child, nth-last-of-type 을 사용
nth-child와 nth-of-type의 차이 : https://nowonbun.tistory.com/353 참고- state 사용 (ex. button:active { color: red; })
active(마우스가 누르고 있을때 나타나는 모습 변형),
hover(마우스가 멤돌때 변형),
focus(키보드로 선택되었을 때 변형),
visited(링크에만 적용. 방문한적이 있는 링크에 적용)
focus-within(focused가 된 자식을 가진 부모 요소에 스타일 적용)
:placeholder(placeholder을 스타일해줌 )
:selction(텍스트를 선택할 때 스타일변경 )
:first-letter(요소의 첫번째 글자를 스타일해줌)
조건을 나열해 여러 상황을 설정할 수 있다.(and 개념)
form:hover input:hover { } - li:
form:hover input { //form이 hover상태가 되면 input이 바뀐다.
background-color: tomato
}
input::placeholder {
}
p::selction {
background-color: green
}-
color
3가지 컬러 시스템이 있다.
16진수(컬러 코드), rgb(red, green, blue), rgba(red, green, blue, 0.5(투명도))
:root { // :root에 도큐먼트에 기본적으로 적용되는 스타일을 지정해준다.
--main-color: #fxx00; // 변수는 dash 2개 다음에 1개 그리고 변수이름, 공백x.
--default-border: 1px solid var(--main-color);
}
p { // :root의 변수를 사용하여 스타일링 하기.
background-color: var(--main-color); // 변수 사용시 var 사용.
}
a {
color: var(--main-color);
border: var(--default-border);
}** color picker 라는 크롬 익스텐션 > 웹사이트 컬러 따올 수 있음
