CSS 기초 - 2

inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다.

 

 

단위

% : 부모 길이에 상대적

 

vw,vh : 뷰포트(화면 창의 크기) 너비와 높이의 1/100 단위

ex) width가 50vw면 윈도우 창의 반을 차지함

%는 부모 요소에 한정, vw,vh는 화면(윈도우)창 전체 기준

 

vamx,vmin : vw,vh 중 큰 것과 작은 것의 1/100 단위

가로,세로 중 더 긴게 vmax, 더 짧은 게 vmin

 

텍스트가 한 줄일 경우 height와 line-height를 똑같이 맞춰주면

글자가 위아래로 가운데 위치하게 효과를 줄 수 있음

 

 

display : none; 을 사용하면 화면에서 사라지게 한다.

 

 

 

 

[margin, padding]

 

margin : 바깥 쪽 여백

padding : 안쪽 여백

 

margin : 공통

margin : 세로, 가로

margin : 위, 오른쪽, 아래, 왼쪽

margin : 위, 가로, 아래

 

속성의 갯수에 따른 적용 범위이다. padding도 마찬가지로 적용된다.

 

예를 들어 margin : 10px 20px 15px이면

위 10px, 가로(왼,오) 20px, 아래 15px가 적용된다.

 

 

 

 

부모 요소의 margin,padding이 0이라도

자식요소가 margin을 가지고 있으면, 그 margin이 부모요소의 영역을 넘어서 적용될 수 있다.

그래서 다음 요소를 밀어내기도 하고, 부모 요소 끝 경계선을 밀어낼 수도 있다.

 

이런 경우가 있다는 것을 알아두자

 

 

 

 

두 개의 div 박스가 위,아래로 있을 때

각각의 div가 margin: 24px;를 적용했다고 하자.

 

그러면 두 개의 div가 각각 24px의 마진을 가지므로,

위,아래 사이에 48px의 여백이 있어야할 것 같지만

실제로는 24px의 여백만 존재한다.

 

block요소의 위,아래 margin이 서로 상쇄되기 때문이다.

위, 아래 요소가 둘 다 margin을 가질 경우 더 긴 쪽의 margin으로 적용이 된다.

 

 

 

 

특정 방향에만 margin,padding을 주고 싶을 때

-top, -bottom, -left, -right을 속성명에 붙여서 따로 지정할 수 있다.

ex) margin-top : 24px;

 

 



 

내가 지정한 CSS 속성이 아닌데, 매겨저 있는 것은 브라우저 브라우저가

기본적으로 주는 것일 수도 있다고 생각하자.

 

 

 

 

margin : auto;

너비가 지정된 블록 요소의 가로 방향에서 남은 공간을 채운다.

컨텐츠 섹션을 화면 가운데로 배치하는데 사용되었으나 

오늘날에는 flex로 많이 대체됨

 

inline-block는 block(상자) 형태를 유지하지만

inline처럼 텍스트의 흐름을 따르기 때문에

margin : 0 auto가 아닌, text-align:center로 가운데 배치한다.