HTML, CSS

코로나 걸림... 좀만 집중해도 토할것 같고 열 39.4도고... 목이 회뜨는거 같이 아프다..

---

1년전에 대강 듣다가 아이씨 하고 안들엇는데 걍 니꼬 쌤 강의루 새로 들음.. 원래 방학초에 들을려 햇는데 ㅎㅎ....

 

야 classes 강의 부분에 (9분10초?)한번에 선택하기 방법 잇음)

 

대부분의 box들은 block임 , inline에 해당하는건 많이 없음

div = box ( 보통 박스옆엔 박스가 올수 없음) , adresss, header.. box = block

span, a, img 이런것들은 :inline(inline옆에는 inline이 올 수 있다

 

inline은 높이와 너비를 가질 수 X ( block은 가지고 있음 )

 inline이었던것은 display:block;으로

 block은 display:inline;으로 (이떄 block안에 아무 문구라도 써야지 보임, 걍 빈칸이면 사라져버림 ( 높이와 너비가 없어졋기에)

 

 

 

margin : box의 border(경계)의 '바깥'에 있는 공간 - body가 default 값으로 가지고 있다

(아 margin을 0으로 주면 위에 살짝 나타나는 빈공간 사라짐 

ㄴ 아니.. 걍 마진이 마진이 남는다는 그거 잇잔어 ㅋㅋㅋ

마진-탑.. 마진-레프트.. 등등으로 마진 알아서...

ㄴ 이거 대신 margin: 20px 15px -> 마진-탑 : 20픽 마진-바텀: 20픽 마진-왼오른15픽 과 같음 

ㄴㄴ 값이 하나면 사방에 전부 적용, 값이 두개면 상하 좌우 순으로 적용됨, 4개주면 시계방향순으로 적용

collapsing margin : 두 마진의 경계선이 같다면 하나의 마진으로 취급 - 위 아래만 일어난다코?

 

padding  : box의 경계로부터 '안쪽'에 있는 공간

 

id를 주어 각각의 색깔 별경 (id는 각각하나만 잇어야 함!)

아래에서 <div id='first'></div>하면, 위에서 #first{}로 background-color 주기

div{}는 모든 div에 적용되는

각 selector간에 쉼표 줘서 한번에 적용 가능

#a, #b, #c {} 

 

#tomato == id = 'tomato'

.tomato == class = "tomato" (이거 아래서 <div class="tomato"></div>를 여러개 줄수 있음, id는 모두 이름이 달라야 해서 모두 다르게 써야하지만) 

클래스는 여러개 쓸수 잇늠 ( 코드 반복되는거 줄이기 가능!! )

 

border는 그냥 solid(none?)만 쓰는 것 같은데요

 

 

span 은 inline(높이 너비없음)이라 margin이 위아래 적용이 안됨, padding은 사방에 가능

쓰고 싶으면 dispklay를 block으로 바꾸시길...

 

 

viewpoint - vh

주축은 수평: justify-content, 교차축은 수직 : align-items

 

올 fixed는 티스토리 ? 그런데 뜨는 광고 아님 넷플릭스 메뉴화면 머 그런거 스크롤해도 계속 따라다니는거 

 

 

position : absolute는 body 기준인듯

absolute대신 relative를 쓰면 해당 부모? 가까운? 놈 기준으로 움직이고? 

 

pseudo selector 오...

 

children selector -> 바로 밑 자식일 때 >를 쓴다, 다음으로 오는 놈을 찾을땐 + 을 쓴다

-> 바로 뒤에는 안 오는데 형제일때는 ~씀 (중간에 뭔가 낑겨잇다면 +이 안먹으니까)

즉, >은 자식찾기, +은 형제 찾기 !

 

 

어떤element?이름 ~= name : name을 포함하고 잇는 element(이거 맞냐아무튼)

 

placeholder를 스타일링 하고 싶다면 ::을 작성하시길

 

 

transform은 box element를 변형시키지 않음