프로그래밍 첫걸음 2주차-2

css 선택자

알고있는거 말고 애매하게 알았거나 몰랐던거 위주로 정리해 보겠다.

속성 선택자

어떤 태그의 속석 (attr)이 무엇인지에 따라 css를 선택하여 적용시킬 수 있다.
input[type=text] : 태그 [속성 = "~~"] 와 같은 방식으로 적요시킬 수 있다.

자식 결합자 (자손 선택자와는 다름)

parent child {} 로 하면 자손선택자가 된다.(자신의 자식 뿐만 아니라 자식의 자식도 선택됨)
parent > child{}를 하면 바로 안쪽자식들만 선택 된다.(자식의 자식은 선택 안됨)

일반 형제 결합자

aaa ~ b {~~~}: aaa에 의해 선택된 요소들의 b요소를 가진 모든 동생을 선택해서 스타일을 지정

인접형제(바로 다음 동생) 결합자

aaa + b {~~~} : aaa에 의해 선택된 요소들의 바로아래동생이 b로일때 b의 스타일을 지정
어떤 선택자와 결합해서, 해당 요소의 바로 아래 동생을 선택하는 결합자이다.

.selected {
    border-top:0;
    color:white;
    background-color: dodgerblue;
}
.selected + div {border-top : 0;}

이처럼 selected로 선택된거의 바로 다음것을 선택한다.

전체 선택자

section * {~~~} //섹션 아래 모든 요소

*: 모든 요소를 고름

psudo(가상) 클래스

가상 클래스는 모두 어떤 선택자에 대해 :으로 이은 뒤에 사용할 수 있다.
css에서 가상 클래스를 활용해 선택자의 범위를 더 좁히거나, 동적으로 스타일을 적용시킬 수있다.

부정 가상 클래스 not(~~)

:not(~~~)

.underline:not(.blue) { color: red; } //언더라인 이면서 블루는 아닌놈들
.underline:not(.blue):not(li) { color: inherit; } //언더라인이면서,블루는아니고,li도 아닌놈들

순서 관련 가상 클래스

아래와 같은 것들이 있다.

ul li:first-child { border-top: 2px solid black; } li의 첫번째 자식
ul li:last-child { border-bottom: 2px solid black; } li의 2번째 자식
ul li:nth-child(3) { color: purple; } li의 3번째 자식
ul li:nth-child(even) { background-color: #eee; } li의 짝수번째 자식
ul li:nth-child(3n+1) { text-decoration: underline; }

마우스 오버 가상 클래스

:hover

.blue-button:hover {
  background-color: darkblue;
}
div:hover ul { display: block; }
div ul li:hover { background-color: #222; }

css 우선순위

1. 인라인 스타일 > 2. id선택자 >3.클래스 선택자 >4.태그 선택자.

구체적일수록 우선순위가 높으며, 같은 우선순위라면 아래쪽의 스타일이 덮어쓴다.

CSS 기본 스타일

모르거나 헷갈리던 것 위주로 정리

웹폰트 사용

@import url("https://~~~")
이렇게 임포트 하고

font-family: "알맞는 이름";

을 하면 된다.

font-size의 단위

단위	설명	비고
px	절대 크기: 모니터상의 한 점	사용자가 브라우저를 통해 조정 불가: 낮은 접근성
em	상대 크기: 바로 윗 부모의 크기에 비례	중첩마다 제곱(자식으로 갈수록 값만큼 커짐)
rem	상대 크기: 최상위 조상의 크기에 비례 (최상위 조상이 기준임)	일반적으로 body의 글자 크기: 16px

font-weight의 단위

값	설명	비고
100 ~ 900	절대값	100 단위로 입력
normal	일반 굵기	400
bold	두껍게	700, 자주 사용됨
lighter, bolder	상속보다 얇거나 두껍게	정도는 상속된 값마다 다름

color (글자색)- css 전반에서 색을 다루는 방법

1. 16진수 표기 #ff0000
2. 지정된 색갈 표기blue
3. rgb() 사용 rgb(red 값[0~255],green 값 [0~255],blue 값[0~255])
4. rgba() 사용rgba(red 값[0~255],green 값[0~255],blue 값[0~255],불투명도 값[투명0~1불투명])

글자에 선긋기(text-decoration)

none | underline | oveerline | line-through

텍스트 자간(letter-spacing)

font-size에서 사용하는 단위 그대로 사용함

텍스트 행간(line-height)

생략되면(em)이 적힌것이다.

텍스트 정렬(text-align)

left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양끝 정렬

ul, ol 불릿 없애는 방법

ul{
	list-style:none;
    padding:0;
}