Mooc-boostCourse-01

John Doe Apr 30, 2018

CSS

우선순위 id > class > tag
id는 고유한
class는 그룹화 지을 수 있는 성질 대부분 클래스로
tag는 기본
depth는 3개 이상 넘어가지 않도록 타고 타고 들어가야되서 성능 저하 됨

pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.

이런 속성들은 꾸밈요소들은 부모로부터 상속되는 경우가 많습니다. layout외에
font-size
background-color
font-family

그리고 상대 단위인 rem과 em에 대해서 알아봅시다. 반응형에서 유용하게 쓸겁니다 :D
rem -> body or html 에서 기본 값을 정해놓으면 이 크기에 대해서 배율로 적용
em -> 부모로 상속 받은 기본값에 -> 배율로 적용

em은 depth에 따라서 계속 배율이 적용되므로 설계하기 좀 까다롭다 :ㅇ
rem을 사용하는 편이 설계에 용이! :D

CSS의 배치를 위해서는 중요한 여러 가지 개념을 알고 있어야 합니다.

그중에서 block과 inline의 차이 그리고 position 속성을 이해해야 합니다.

또한, 많이 사용되고 있는 float의 성질도 알아둘 필요가 있습니다.

말 그대로 block은 block, 한 줄 차지 , 구역 layout관련
inline은 줄 안에 있다. text, content와 관련 :ㅇ
inline-block 중간 성질 블락+inline과

float은 문서와 컨텐츠가 섞이게 할 떄 씀 -> layout에 더 많이 씀 !(legacy) 요즘은 다 flex ->
grid는 최신만

float는 뜨기 때문에 부모-자식 관계에서 벗어납니다 이 부분을 부모에 overflow 값을 auto or hidden을 주면 contents크기를 인식합니다. ㅂ

형제에서는 따라 올라오지 않기 위해서는 clear를 해줍니다 both, left, right

위치를 상대적으로 지정해줄 때
static, relative, absolute, fixed

relative로 자기 자신의 위치를 기반으로 움직임
absolute 보통 상위 엘리먼트에 relative를 주고 set로 움직임 !
상위 element중 static이 아닌 데를 기준으로 삼고 움직인다. top,left, right, bottom
cf) 다 0으로 줘서 100%을 채우거나 , left:0, right: 0을 줘서 한 줄을 채우게 하는 활용법도 있음 :D
fixed 뷰포트 기준으로 좌측 맨 위를 기준으로 동작
fixed는 고정 위치를 잡을 때 주로 씁니다 ex)스크롤과 상관없이 위치가 고정되어 있는 글쓰기 버튼 or 헤더

flex flex영역으로 만들고
direction align-tiems, justify-content 이 3가지를 이용해서 정렬및 간견을 맞춥니다 :D

그리드.. 공부합시다