※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
1~2.css diner소개-기본 css선택자 복습>
-
css diner 검색 css선택자를 잘 활용하고 있는지 확인 할 수 있는 사이트
css에서
: 하나 붙는거는 가상 클래스
:: 두개 붙는거 가상 요소-
태그이름
-
.클래스이름
-
#아이디 이름 -
선택자, " " , 선택자 (선택자는 아이디나 클래스이름도 됨)
div p { } -
선택자, "+" , 선택자
.test+panda { }플러스 씀. -
선택자 , ">" , 선택자
.test>panda { }
공백과 다른점은, 직계 자손만 선택함. -
선택자, "~" , 선택자
.test~panda { }플러스랑 비슷.
좀더 여유롭고 관대함 -
[ ]속성 선택자 대괄호..a[title] { }
<a href="" title="naver">네이버</a>naver가 선택됨.a[title="daum"] { } 로하면
<a href="" title="naver">네이버</a>
<a href="" title="daum">다음</a>
같은 타이틀있어도 특정 타이틀 선택 가능. -
a[title^="daum"]에서 ^ 정규식. -
*모든것을 선택.잘 사용 안해
-
3.css가상 클래스> 가상 선택자 : 하나 붙는거
a:hover { }
a:link { color: blue; }
a:visited { color: red; }
링크상태일때 클릭을 한 상태인지 아닌지. 확인 ex)클릭이후 빨강으로 바뀌는 거
not 지금까지랑은 다름. 특정 클래스인 애 말고 다른 곳에 css 적용하고 싶을때.
선택자:not(선택자)
.클래스명 p:nth-child(3) = 3번째 p태그선택
.클래스명 .클래스명:nth-of-type(3) = 3번째 p태그선택
.클래스명 .클래스명:nth-last-child
.클래스명 .클래스명:nth-last-of-type(2) = 뒤에서 2번째
last가 붙으면 뒤에서부터 읽음.
.클래스명 .클래스명:nth-first-child 앞에서부터 읽음.
.클래스명 .클래스명:only-child 태그가 하나만 있어야함.자주 안씀
4.css 가상요소> 최근에 나온 개념. :: (콜론) 2개 붙이길 선호
콜론 하나만 붙여도 되는데, 최근부터 2개씩 쓰게했으니 2개ㄱㄱ
.클래스명::first-line 텍스트 태그를 사용자에게 보여줄때 첫번째줄만 선택
.클래스명::first-letter 첫글자만 선택
.클래스명::after / .클래스명::before
많이 씀. 필수적 으로 content를 넣어씀. 예를 들어서,
.클래스명::before { content: "한수희 : "; }
.클래스명::after { content: "끝"; }
긴 글에서 맨앞에 한수희 : 만 추가, 끝에는 끝이라는 글자만 추가.
시작과 끝에 글추가. 글뿐만 하니라 도형이나 그림도 추가 가능.
CSS 가상 요소는 선택자에 추가하는 키워드로,
선택한 요소(element)의 일부에만 스타일을 적용.
즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라,
요소의 일부에만 스타일을 적용.
다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작.
5.에어비앤비 클론코딩 예고>
- position는 html에서 시각적으로 보이는 순서를 포지션은 바꿀수있음
- media-query는 미디어
- transition / animation
F12눌러서 좌측위 태블릿모양 누르면 브라우저 크기변경
에어비앤비 미디어 사용해서 할겨.
6.태그 위치를 내맘대로 position 속성>
position으로 기준을 잡고 위에서 100px, 좌측에서 30px 떨어뜨린다
top: 100px;
left: 30px;
position: absolute; 부모가 기준
position: fixed; 브라우저 기준.
position: relative; 원래 내위치 기준.
position: static; 기준x 좌요적용x.모든 태그들은 스태틱임.
7.태그 위치를 내맘대로 position: absolute; 와 position: fixed; >
★★중요 / ★★다시보기 2분33초~ 많이 해보면 익숙해질.
position: absolute;
position: fixed;
겹쳐도 포지션값 부여한 애들이 우선순위여서 화면 앞으로 보임.
8.태그 위치 position속성과 z-index>
★★중요
컨텐츠가 겹쳤을때 z-index: 1; 이나 z-index:2; 등으로 숫자 부여함.
1보다 2가 보인다. 하늘에서 봤을때 1층보다 2층이 보이니까
position: fixed; 하면 스크롤 내려도 모달이 브라우저에 고정되~
transform(translate(-50%, -50%); 하면 정중앙 고정
9. 브라우저 크기마다 css가 바뀌는 media query>
F12눌러서 좌측위 태블릿모양 누르면 브라우저 크기변경
태블릿이나 모바일 크기로 변경하는거.
마지막에 적용함.
@midia screen and (max-width: 1260px) 컴터 모니터 크기
@midia screen and (max-width: 768px) 태블릿 크기
@midia screen and (max-width: 576px) 모바일 크기
