테킷_프론트엔드트랙

테두리를 포함하여 사이즈 적용

기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box

--> * box sizing : border-box

 

 

<CSS>

자식 요소가 CSS규칙을 가지고 있다면 이를 우선하여 적용

<block은 가지지만 inlinde은 가지지 못하는 것>

width, height, margin, padding 

- inline은 좌우 margin,padding만 적용 가능

- inline에 적용되는 것처럼 보이는 상하 padding은 레이아웃에 영향을 미치지 못함

 

 

 

<Padding : 내용으로부터 테두리까지의 거리 >

 

 

Box-sizing : 박스에 적용된 사이즈의 기준 정하기

 

==> 테두리를 포함하여 사이즈 적용

기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box를 universal selector로 적용

*{ box-sizing : border-box;

}

 

 

 

[css 단위]

스크린 환경에 적합한 단위 : px, %, rem/em

px : 스크린을 구성하는 작은 점

% : 부모 요소를 기준으로 크기 설정

em : 부모 요소의 폰트 크기 기준

rem : 루트 요소의 폰트크기 기준

폰트 크기에 비례하여 크기 설정

 

==> 통일된 기준에서는 rem 사용 권장

 

[img]

img태그는 인라인!!! --> 단독으로 사용하지 말고 div태그로 감싸서 사용하자

img { max-width:100%;

}

부모영역에서 벗어나지 않도록 이미지의 너비 상한선을 100%로 설정

img { object-fit : cover;

} 

이미지를 부모 요소의 영역의 크기만큼 확대/축소하여 채움 (가운데로 알아서 감)

img { object-fit : contain;

} 

이미지의 비율을 유지하면서 크기를 변경하여 부모 요소를 채움

img { object-fit : fill;

} 

이미지의 비율을 유지하지 않고 부모 요소의 크기에 맞게 변경하여 채움

 

[overflow]

overflow : hidden; --> 안보이게 함

overflow : scroll; --> 스크롤하면 보이게 함, 근데 기본적으로 스크롤은 가로,세로 둘 다 만들어줌

overflow-x : scroll; --> x축에만 스크롤 만듦(가로)

overflow-y : scroll;

overflow : auto; --> 자동

 

[font]

 

 

a:link가 a:visited상위에 작성될 수 있도록 하자!! 순서 주의~

 

 

 

[테두리 꾸미기]

줄여서 border : 2px solid blue; 라고 한 문장으로 해도 됨

border-radius : 20px; --> 모서리 둥글게

 

 

 

[배경 이미지 설정]

background-position : center;

 

 

*이미지를 레이아웃에 맞는 해상도로 크롭해서 사용하는게 가장 베스트

 

 

[요소 정렬하기]

0은 상하, auto는 좌우 ==> 여기서는 좌우의 값을 자동으로 맞춰 가운데로 정렬할 수 있게끔 한다.

--> 부모 block요소의 width를 기준으로 자동으로 margin 계산

 

text-align : center; --> 여기서 text는 인라인 요소들을 말하는 것

==> 따라서 div안에 있는 이미지가 가운데에 위치하게됨

* 부모 요소가 block이고 정렬하려는 자식 요소가 inline일 때

 

 

 

 

CSS NEXT LEVLEL

 

 

[float]

떠오르다. 자식이 부모로부터 => margin을 없애버리다.

자식 요소의 width 값 자체가 바뀌는게 아니라, 부모 요소의 width 값 만큼 margin이 생기는 것

float를 하게 되면 가로배치가 되지 않고 겹치게 되는데?

--> 가로배치 하고 싶은 요소에 전부 float 선언

 

 

[clear]

페이지 layout을 짜다 보면 꼭 생기는 콘텐츠 범람 현상

float로 없어진 margin 영역에 대응하는 clear