CSS 한걸음 더

: > 가상클래스
:: > 가상요소

CSS diner

'*' ㅣ 모든것
선택자 + " " + 선택자
선택자 + "+" + 선택자 : 클래스 요소 다음 요소
선택자 + " > " + 선택자 : 계층적 선택
선택자 + " ~ " + 선택자 : 뒤에나온 선택자가 나올때 설정

[ ] : 속성선택자

<style> 
	a[title] { color: red }

</style>


<a href = "" title="Naver">네이버</a>
<a href ="" >구글</a>

3. CSS 가상 클래스

:hover
:link =>a앵커링크 태그를 보여주었을때 클릭하기 이전의 상태를 보여주는 속성
:visited => 방문한 링크 속성
:not(.className) => classname이 아닌 얘들만 지정
:nth-child(n) => 클래스이름 지정하지 않고 순서로 가리킴

4. CSS 가상요소
   ::first-line => 텍스트 컨텐츠를 사용자엑 보여줄 때 첫번째 줄만 적용
   ::first-letter => 첫번째 글자에 적용
   ::after
   ::before ==> 필수적인 속성- content: "판다코딩 : " , ";";

6. 태그의 위치를 내 마음대로 - Position 속성 개요

.box {
	width : 100px;
    height: 100px;
    border: 4px solid red;
    
    top: 100px;
    left: 100px; //변함이 없다. 기준이 없기 때문
    
    
    position: absolute; //기준 : 부모
    position: fixed; //기준 : 브라우저
    position: relative; // 기준 : 원래 내 위치 
    position: static; //기본, 기준이 없습니다. 좌표적용 x
}

7. Position 속성 fixed와 absolute

div.other
div.parent
	div.target - absolute 지정하려면 parent태그로 기준을 세워야함 (parent: relative)
div.other

8. 태그의 위치를 내 맘대로 - Position 속성과 z-index

.modal {
	position: fixed;
    z-index : 1; -> 상위로 가져오기
    
   ★ top: 50%;
   ★ left: 50%;
   ★ transform: translate(-50%, -50%);
     <화면 정중앙배치>
    
    }

9. Media query

.box{ background-color: yellow; //1261이상일 경우 })


@media screen and (max-width: 1260px //브레이크 화면 기기마다의 특징) {
	.box{
    	width: 88%;
		background-color: red;
    }
}

@media screen and (max-width: 768px) {
	.box{
    	width: 90%;
		background-color: blue;
    }
}

@media screen and (max-width: 576px) {
	.box{
    	width: 100%;
		background-color: green;
    }
}