CSS - 2019.04.23

가변영역과 고정영역을 나누는 세가지 방법(calc(),flex,table)

1. display:flex를 부모에 주고, side의 너비 300px main의 flex:1 속성을 주면 된다.

2. display:table을 부모에 주고, 자식에 각각 display:table-cell; 속성을 주면 된다. 마찬가지로 side에 너비 300px

3. clac는 벤더프리픽스를 붙여주자.(낮은 버전의 브라우저에서 안돌아갈 수 있으므로 크로스 브라우징 해준다)

 

1. block 속성인 div를 나열하면 수직으로 나열 된다. 이걸 수평으로 바꾸려면 각 div에 float:left를 주거나 각 div의 블록 속성을 inline-block으로 바꿔주는 두가지 방법이 있다. 후자의 방법으로 했을때 div끼리 마진이 생기기 때문에 margin: 0 -3px로 그 마진을 없애주자.

 

2. 인라인 요소들이 수평에 쭉 나열 되어 있을때 수직정렬을 하고 싶을때 vertical-align : middle 속성을 사용한다.

 

vh의 v = viewport 라는것을 먼저 알아야 한다. 그냥 간단하게 생각하면 모바일에서 화면이 보이는 영역이다. 100vh라는것은 디바이스의 viewport height 즉 뷰포트 높이의 100%를 사용하겠다는것이다. 그렇기 때문에 화면 전체가 파란색으로 채워지게 되는것이다. 그럼 100% 와 100vh는 뭐가 다른거냐고 생각할수 있겠다. %의 경우에는 부모를 기준으로 길이가 잡히지만 vh는 무조건 뷰포트를 기준으로 잡히기 때문이 기준점이 다르다. 따라서, %로 줄경우에는 html과 body에 추가적으로 height:100%라는 문구를 적어줘야 제대로 적용되지만 100vh는 바로 그 요소에 적용해도 된다는 차이점이 있다.

 

블락요소는 margin 0 auto로 중앙정렬해야 한다.(인라인 불가능)

인라인 요소는 float : left, right로 중앙 정렬 시켜야 한다.(인라인,블록 둘다가능)

 

container에 높이 값을 주지 않으면 자동으로 내용물 만큼만 높이를 가지게 되므로 중앙 정렬이 제대로 됬는지 확인하려면 container에 높이값을 줘야 한다.

flex를 통한 중앙정렬은 

 

img태그

img태그는 닫는 태그가 필요 없는 홑태그이다.

실제로 브라우저는 img태그를 인라인으로 처리하지만, 실제로는 인라인블럭요소라고 생각해야 편하다. 왜냐면 이미지는 기본적으로 이미지 사이즈를 지정할수 있어야 하기 때문에 박스의 느낌도 가지고 있다.

 

출처 : 

https://www.youtube.com/watch?v=Bv9q6ATODHk&list=PLv_UUi9AVBVvr9gODWpz6aZUS6VNvdsYq&index=5