멋쟁이 사자처럼 보조강의 - css를 정리해보았다. 이번에도 서강대 갓지승 선생님께서 알려주신 내용이다. 선생님께 감사하다. 선생님 보조강의를 2~3번씩 봤다. 혼자서 w3c를 독파하셔서 잘하시는 건가 싶어서. 나도 시도해봐야겠다는 생각이 들었다.
CSS
공부는 크게 세가지 레이아웃 - 기타 기교부리기 - 브라우저 호환성고려하기
box & box model
margin-box > border-box > padding -box > content-box 이것만 알아서는 부족하다
(강사님은 w3c를 독파하셨다고 한다. 그 방법이 가장 좋은 것 같기도 하다.)
**block/ inline/ inline-block/ flex ** 이 네 가지가 박스를 처리하는 방법이다!
#####block 길막을 기억하자.
-
별도의 width값을 주지 않았을 때, 부모의 content-box의 width만큼 늘어난다.
-
별도의 width값이 주어졌을 땐, 남은 빈 공간을 margin으로 채워버린다. (우리가 값을 주면, 원래는 쭉 늘어났어야 했었던 걸 우리가 줄여놓은 거니까, 남은 빈 공간은 margin이 채워지는 것이다.) (margin 0 auto - 중앙정렬, 여기서 auto라는 것은 자동으로 생기는 margin을 말한다.)
-
부모에게 별도의 height 값을 주지 않았을 때, 자신의 자식 크기 만큼 높이를 가진다.
#####inline 선 안에 흐르는 녀석들이 inline box p tag : 대표적인 block 박스안에서도 inline 성질을 가지는 녀석들이 있다. 자동적으로 줄바꿈이 된다.
블록 : 인라인 = 면 : 선 블록 : 인라인 = 영역 : 흐름
(인라인에는 흐름을 방해하는 게 적용이 안돼. 즉 width,height,margin과 같은 것들이 사용이 불가능하다 좌우 공간 같은 경우는 가능하다 하지만 span 안에서 margin-top : 100px을 주게 되면 글자들 위로 덮어버린다 -> 안먹힌 것이다. 왜냐하면 띄어지지가 않았으니까. 적용이 안된다.)
#####inline-block 인라인 요소의 한계를 극복함. width, height, padding-top, padding-bottom,margin-top,margin-bottom 모두 사용가능 하지만, 이것 다음에 오는 녀석들은 옆으로 흐른다. 같은 영역에 속한다면 옆으로 흐르고 아니라면 위 아래로 벌어질 수 있다. 짬봉이라고 보면 된다.
#####flex (아래에 계속)
box-sizing
기본 a 태그 파란색 제거 a{text-decoraion : none;}
box-sizing의 기본 값은 content-box 총 가로 길이 = width + padding + border 총 세로 길이 = width: + padding + border -> 이렇게 되면 값을 계산하기가 힘들어진다.
따라서 box-sizing: border-box로 해버리면 박스사이즈를 border-box까지 선언해버림으로써 width = content + padding + border height = content + padding + border 가 된다.
###float float는 가로배치를 위해서 사용한다. float의 작동 방식: 붕 뜬다
float의 특징 - 1. 이제부터 넌 집나간 자식
- 블록으로 신분 상승 3.길막을 못하는 이상한 블록 ( + 자동으로 채워지는 margin이 사라진다.) 빈 공간 = 가로배치 가능
빨간색 - float left 4.인라인요소는 float된 요소를 볼 수 있다.
-파사삭을 발 잡는 법 -아무도 그 이유를 알지 못하는 float의 부모한테 overflow:hidden을 하면 바로 잡아준다. (하지만 한계가 있는 방법)
-float 해제의 정석 clearfix clear: left - 내 위에 float:left된 요소가 있다면 그것에 영향을 받지 않고 나는 시작하겠어!
-응용 : float를 잡기 위해서 우리 눈에만 보이는 가상의 요소를 만들어 보는 건 어떨까?
- 가짜자식만들기 - 부모의 ::before - 제일 첫 번째 자식으로 만들 수 있다. ::after - 부모의 가장 마지막 자식으로 만들 수 있다
.parent::before { content : ‘before’; (무조건 컨텐트는 있어야한다.) }
.parent::after { content : ‘’; (컨텐트는 있어야 한다) display:block; (clear는 display가 블록일 때만 사용가능하다) clear: both; } (.parent의 마지막 자식으로 가짜 자식을 하나 만들거야. 그 가짜 자식의 콘텐츠는 아무것도 없고, 블록 요소이며, 이 가짜 자식은 float:left/right의 영향을 받지 않은 녀석이지)
position
float가 부모의 영역 속에 제한되는 느낌이라면, position은 완전히 자유자재로 움직일 수 있는 느낌이다.
포지션 - 종류 && 기준점 두 가지를 보고 결정
Position Static
모든 요소의 기본 값은 static이다. static 상태에서는 top, bottom, right ,left 값을 줘도 변환이 없다.
Position Relative
Position relative를 하면 붕 뜬다. 근데 자신의 원래 상태를 기억한다. 자기가 있던 곳을 기준으로 이동.
Position Absolute
absolute는 버린 자식이다. absolute가 되면 자동으로 display값이 block이 된다. 그런데 길막 능력이 상실된 block이 되어버린다. 그래서 자기의 컨텐츠 크기만큼 크기가 줄어든다.
또한 absolute는 기준점을 새로 정할 수 있다. 자기의 조상 요소들 중 position이 relatvie, absolute, fixed였다면 할아버지를 기준으로 이동이된다.
Positoin Fixed
postion absolute랑 비슷하다. 그런데 한가지, viewport를 기준으로 배치된다.
position 값을 주면 top,bottom,right,left로만 이동 가능하다
offset
top/bottom/left/right 중 각각 한개씩만 적어줘서 기준점을 정해주는 것이다.